/* Hero: a fanned deck of five identical 5:3 screens. The centre is in front; the others sit behind it and slide out one pair at a time. */
.cs-frame{width:100vw;position:relative;left:50%;margin:8px 0 0 -50vw;perspective:1200px;animation:none;opacity:1;filter:none}
.cs-card{max-width:none;width:100%;height:auto;border:0;padding:0;background:transparent;box-shadow:none;border-radius:0}
.cs-stage{container-type:inline-size;position:relative;display:block;width:100%;height:27.2cqw;margin-bottom:-7.5cqw}
.cs-stage .px{position:absolute;left:50%;top:0;width:40cqw;height:24cqw;margin:0 0 0 -20cqw;flex:none;overflow:hidden;border-radius:6px;background:#fff;
  z-index:var(--z);
  transform:translate(var(--tx),calc(var(--ty) + (1 - var(--p,0)) * var(--lag,0) * 1px));
  box-shadow:0 0 0 1px rgba(196,181,253,.28),0 0 50px -10px rgba(139,92,246,.5);
  animation:deckIn 1.15s var(--d) both cubic-bezier(.16,1,.3,1);will-change:transform}
.cs-stage .px.c{border-radius:7px;box-shadow:0 0 0 1px rgba(196,181,253,.4),0 0 70px -8px rgba(139,92,246,.7),0 0 170px -20px rgba(124,58,237,.55)}
.cs-stage .px img{position:static;display:block;width:100%;height:100%;object-fit:cover;max-width:none;top:auto;left:auto;-webkit-mask-image:none!important;mask-image:none!important;user-select:none}
/* depth: screens further back are slightly dimmed; every screen fades out softly at its bottom edge */
.cs-stage .px:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:rgba(9,9,11,var(--dim,0))}
.cs-stage .px.s1{--dim:.14}.cs-stage .px.s2{--dim:.26}
.cs-stage .px:after{content:"";position:absolute;left:0;right:0;bottom:0;height:12%;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent,var(--subtle,#09090B) 96%)}
html[data-theme="light"] .cs-stage .px:before{background:rgba(248,250,252,var(--dim,0))}
html[data-theme="light"] .cs-stage .px{box-shadow:0 0 0 1px rgba(84,18,196,.14),0 24px 60px -22px rgba(84,18,196,.4)}
html[data-theme="light"] .cs-stage .px.c{box-shadow:0 0 0 1px rgba(84,18,196,.2),0 34px 90px -22px rgba(84,18,196,.5)}
/* entrance: each screen starts behind the one in front of it and slides out to its place (individual transform props, so they don't fight the scroll transform) */
@keyframes deckIn{
  from{opacity:0;translate:calc(var(--tx) * -1) 14px;scale:.94;filter:blur(8px)}
  to{opacity:1;translate:0 0;scale:1;filter:blur(0)}
}
@media (max-width:768px){
  .cs-stage{height:48cqw;margin-bottom:-6cqw}
  .cs-stage .px{width:72cqw;height:43.2cqw;margin-left:-36cqw}
  .cs-stage .px.s2{display:none}
  .cs-stage .px.s1.l{--tx:-27cqw!important}.cs-stage .px.s1.r{--tx:27cqw!important}
}
@media (prefers-reduced-motion:reduce){.cs-stage .px{animation:none}}

/* ---- the line: screens rise out from behind a solid, opaque marquee band ---- */
.cs-stage .px:after{display:none}
@keyframes deckIn{
  0%{opacity:0;translate:calc(var(--tx) * -1) 13cqw}
  18%{opacity:1}
  100%{opacity:1;translate:0 0}
}
.cp-band,
html[data-theme="dark"] .cp-band,
html[data-theme="light"] .cp-band{
  position:relative;z-index:6;
  background:var(--subtle,#09090B) !important;background-image:none !important;
  border-top:1px solid rgba(139,92,246,.7) !important;
  box-shadow:0 -1px 0 rgba(167,139,250,.25),0 -18px 60px -24px rgba(124,58,237,.55);
  padding:34px 0 46px !important}
html[data-theme="light"] .cp-band{border-top-color:rgba(84,18,196,.55) !important;box-shadow:0 -1px 0 rgba(84,18,196,.12),0 -18px 60px -26px rgba(84,18,196,.35)}
.cp-toggle{top:10px}
@media (max-width:768px){
  .cs-stage{margin-bottom:-8cqw}
  .cp-band,html[data-theme="dark"] .cp-band,html[data-theme="light"] .cp-band{padding:26px 0 34px !important}
}

/* pause control sits on the line */
.cp-toggle{top:-20px;right:max(18px,2.4vw);background:var(--subtle,#09090B);border-color:rgba(139,92,246,.7)}
html[data-theme="light"] .cp-toggle{background:#fff;border-color:rgba(84,18,196,.4)}

/* ---- clip the stage at the line: screens only ever appear from behind it, never below the marquee ---- */
.cs-stage{height:20.4cqw;margin-bottom:0;clip-path:inset(-900px -100vw 0 -100vw)}
.cp-band,html[data-theme="dark"] .cp-band,html[data-theme="light"] .cp-band{box-shadow:none;border-top:1px solid rgba(139,92,246,.55) !important}
html[data-theme="light"] .cp-band{border-top-color:rgba(84,18,196,.4) !important;box-shadow:none}
/* glow stays behind the screens and fades out before the line, so hero and band share one background */
html[data-theme="dark"] .hero:before{background:radial-gradient(ellipse 60% 38% at 50% 48%,rgba(124,58,237,.36),transparent 74%),radial-gradient(ellipse 34% 22% at 50% 52%,rgba(167,139,250,.24),transparent 74%)}
html[data-theme="light"] .hero:before{background:radial-gradient(ellipse 60% 38% at 50% 48%,rgba(84,18,196,.13),transparent 74%)}
.cs:before{bottom:28%;height:44%}
@media (max-width:768px){.cs-stage{height:36cqw;margin-bottom:0}}

.cp-toggle{display:none!important}