/* Closing recap on the L Squared mark: a screen from the talk in each square, under a title written in light. */
.stage > .rc { z-index: 26; display: grid; place-items: center; background: radial-gradient(60% 70% at 50% 50%, #0B1A2E, #03070D 75%);
  opacity: 0; pointer-events: none; transition: opacity 1s var(--ease-out); --c: min(19vh, 11vw); --gap: calc(var(--c) * .11); --k: .34; }
.stage > .rc.on { opacity: 1; }
.rc .rc__t { position: absolute; z-index: 2; left: 0; right: 0; top: 7vh; text-align: center; color: #fff; font-size: clamp(28px, 4.4vw, 82px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.05; opacity: 0; transition: opacity .6s ease; }
.rc.on .rc__t1 { opacity: 1; transition-delay: .4s; }
.rc.hw .rc__t1, .rc.brand .rc__t1 { opacity: 0; transition-delay: 0s; }
.rc.hw .rc__t2 { opacity: 1; transition-delay: 1s; }
.rc.brand .rc__t2 { opacity: 0; transition-delay: 0s; }
.rc__lock { position: relative; width: calc(var(--c) * 3 + var(--gap) * 2); height: calc(var(--c) * 3 + var(--gap) * 2);
  transform: translateY(4vh); transition: transform 1s cubic-bezier(.65,0,.25,1); }
.rc__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, var(--c)); grid-template-rows: repeat(3, var(--c)); gap: var(--gap);
  transition: transform 1.1s cubic-bezier(.65,0,.25,1); }
.rc__s { position: relative; overflow: hidden; border-radius: 2px; background: #04080E; box-shadow: 0 0 0 1px rgba(124,194,236,.18);
  transition: transform .9s cubic-bezier(.65,0,.35,1) var(--dl, 0s), opacity .5s ease calc(var(--dl, 0s) + .35s), background-color .6s ease, box-shadow .5s ease; }
.rc__s img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(1.06);
  transition: opacity .35s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.rc__s.lit { box-shadow: 0 0 0 1px rgba(124,194,236,.6), 0 0 calc(var(--c) * .2) rgba(86,176,228,.55); }
.rc__s.lit img { opacity: 1; transform: none; }
.rc__s img.bg { object-fit: cover; filter: blur(14px) brightness(.55) saturate(1.2); transform: scale(1.2); }
.rc__s.lit img.bg { transform: scale(1.2); }
/* The squares fold into the centre and the hardware opens out of it. */
.rc.hw .rc__s { transform: translate(calc((2 - var(--col)) * (var(--c) + var(--gap))), calc((2 - var(--row)) * (var(--c) + var(--gap)))) scale(.12); opacity: 0; }
.rc__hw { position: absolute; left: 50%; top: 58%; width: min(74vw, 124vh); height: auto; transform: translate(-50%, -50%) scale(.5); opacity: 0;
  -webkit-mask-image: radial-gradient(closest-side, #000 78%, transparent); mask-image: radial-gradient(closest-side, #000 78%, transparent);
  transition: opacity .9s ease .55s, transform 1.6s cubic-bezier(.16,1,.3,1) .5s; }
.rc.hw .rc__hw { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.rc.brand .rc__hw { opacity: 0; transition: opacity .7s ease; }
/* The icon, then the wordmark slides out of it. */
.rc.snap *, .rc.snap .rc__s { transition: none !important; }
.rc.brand:not(.mark) .rc__s, .rc.pre .rc__s { opacity: 0; }
.rc.mark .rc__lock { transform: translateX(var(--shift, 0px)); }
.rc.mark .rc__grid { transform: scale(var(--k)); }
.rc.mark .rc__s { box-shadow: none; transition: opacity .7s ease; }
.rc.mark .rc__s--b { background: #56B0E4; }
.rc.mark .rc__s--g { background: #CACACB; }
.rc__wm { position: absolute; left: 50%; top: 50%; width: var(--wmw, 56vw); height: auto; transform: translate(calc(-50% + var(--wmx, 0px)), -50%); clip-path: inset(0 100% 0 0); }
.rc.wm .rc__wm { clip-path: inset(0 0 0 0); transition: clip-path .9s cubic-bezier(.65,0,.25,1); }
.rc.lsout .rc__lock, .rc.lsout .rc__wm { opacity: 0; transition: opacity .8s ease; }
/* Intel, then Lenovo, which stays. */
.rc__logo { position: absolute; left: 50%; top: 50%; height: 14vh; width: auto; transform: translate(-50%, -50%) scale(.96); opacity: 0;
  transition: opacity 1s var(--ease-out), transform 1.4s var(--ease-out); }
.rc__intel { height: 12vh; filter: brightness(0) invert(1); }
.rc.intel .rc__intel, .rc.lenovo .rc__lenovo { opacity: 1; transform: translate(-50%, -50%); }
.rc.intelout .rc__intel { opacity: 0; transition: opacity .8s ease; }
@media (prefers-reduced-motion: reduce) { .rc *, .stage > .rc { transition: none !important; } }

/* Industry recaps share the introduction's card: blue glass with a glowing edge. Each card turns in
   from edge-on and a line of light runs around it as it lands. */
.stage > .recap { background: rgba(11, 34, 58, .55); border: 0; border-radius: 14px;
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 0 0 1.5px rgba(124, 194, 236, .85), 0 0 34px rgba(86, 176, 228, .5), 0 30px 60px rgba(0, 0, 0, .45); }
.recap__tag { color: #9FD6F5; }
.recap li span i { color: #9FD6F5; }
.recap li { position: relative; padding: .45vw .45vw .6vw; border-radius: 10px; background: rgba(11, 34, 58, .45);
  box-shadow: 0 0 0 1px rgba(124, 194, 236, .55), 0 0 18px rgba(86, 176, 228, .28);
  opacity: 0; transform: perspective(900px) rotateY(-90deg) scale(.94); transform-origin: 50% 50%;
  transition: opacity .3s ease, transform .56s cubic-bezier(.2, 1.25, .4, 1); transition-delay: calc(var(--i) * 260ms + 300ms); }
.recap.on li { opacity: 1; transform: none; }
.recap li::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 2px #b9e3ff, 0 0 16px #56b0e4; }
.recap.on li::after { animation: rcTrace 1.2s ease calc(var(--i) * 260ms + 650ms) both; }
@keyframes rcTrace { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.recap li img { border-radius: 7px; }
@media (prefers-reduced-motion: reduce) { .recap li { transition: none; transform: none; } .recap.on li::after { animation: none; } }