:root{
    --black:#030204;
    --ink:#EFEDE8;
    --ink-dim:#96939D;
    --violet-deep:#150037;
    --violet:#4C00D2;
    --electric:#753FE4;
    --lilac:#979FE4;
    --lime:#E1FF83;
    --font:'Poppins',system-ui,-apple-system,Segoe UI,sans-serif;
  }
  html,body{height:100%}
  body{
    margin:0;
    background:var(--black);
    color:var(--ink);
    font-family:var(--font);
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
    user-select:none;-webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;
  }

  #film{position:fixed;inset:0;overflow:hidden;cursor:pointer;perspective:900px}

  /* ---------- void backdrops ---------- */
  .bg{position:absolute;inset:0;opacity:0;transition:opacity 2.4s ease;pointer-events:none}
  .bg.on{opacity:1}
  .bg{animation:bgzoom 14s ease-in-out infinite alternate}
  @keyframes bgzoom{
    from{transform:scale(1) translate(0,0)}
    to{transform:scale(1.09) translate(-1.2%,1.5%)}
  }
  #bg-mono{
    background:
      radial-gradient(42% 34% at 74% 26%, rgba(151,159,228,.07) 0%, transparent 70%),
      radial-gradient(38% 30% at 68% 76%, rgba(225,255,131,.05) 0%, transparent 70%),
      radial-gradient(120% 90% at 50% 8%, #16131D 0%, #07060A 52%, #020103 100%);
    animation:flicker 7s steps(1) infinite, bgzoom 14s ease-in-out infinite alternate;
  }
  @keyframes flicker{
    0%,100%{opacity:1}
    7%{opacity:.93}8%{opacity:1}
    41%{opacity:.96}42%{opacity:1}
    73%{opacity:.91}74%{opacity:1}
  }
  #bg-mono .beam{
    position:absolute;top:-12%;width:34vmax;height:80vmax;
    background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 68%);
    clip-path:polygon(42% 0%, 58% 0%, 100% 100%, 0% 100%);
    filter:blur(6px);
    transform-origin:50% 0%;
  }
  #bg-mono .beam.b1{left:6%;animation:sway 11s ease-in-out infinite}
  #bg-mono .beam.b2{right:6%;animation:sway2 13s ease-in-out infinite}
  @keyframes sway{0%,100%{transform:rotate(12deg)}50%{transform:rotate(17deg)}}
  @keyframes sway2{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(-17deg)}}
  #bg-violet{
    background:
      radial-gradient(95% 75% at 50% 108%, #4C00D2 0%, rgba(76,0,210,.45) 42%, transparent 74%),
      radial-gradient(70% 55% at 50% -12%, rgba(117,63,228,.5) 0%, transparent 65%),
      linear-gradient(180deg, #0A0316 0%, #150037 100%);
  }
  #bg-world{
    background:
      radial-gradient(85% 70% at 50% 115%, rgba(76,0,210,.6) 0%, transparent 70%),
      radial-gradient(60% 45% at 82% -8%, rgba(117,63,228,.4) 0%, transparent 65%),
      linear-gradient(180deg, #0A0316 0%, #130030 55%, #1A0140 100%);
  }
  #bg-finale{
    background:
      linear-gradient(rgba(151,159,228,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(151,159,228,.06) 1px, transparent 1px),
      radial-gradient(80% 65% at 50% 110%, rgba(76,0,210,.55) 0%, transparent 70%),
      radial-gradient(55% 45% at 15% -5%, rgba(117,63,228,.35) 0%, transparent 60%),
      #0A0316;
    background-size:56px 56px, 56px 56px, auto, auto, auto;
  }
  #stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
  /* solid-color slam transition */
  #slam{
    position:fixed;inset:0;z-index:47;pointer-events:none;
    background:var(--slamc,#E1FF83);
    transform:translateX(-103%);
  }
  #slam::after{
    content:"";position:absolute;inset:0;opacity:.45;
    background-image:
      radial-gradient(rgba(5,3,8,.55) 1.3px, transparent 1.6px),
      radial-gradient(rgba(5,3,8,.4) 1px, transparent 1.3px),
      linear-gradient(90deg, rgba(5,3,8,.5) 8px, transparent 8px);
    background-size:94px 74px, 132px 108px, 260px 190px;
    background-position:0 0, 44px 32px, 120px 80px;
    background-repeat:repeat;
  }
  #slam.go{animation:slamgo .5s cubic-bezier(.32,0,.18,1) 1}
  #slam.go.rev{animation-name:slamgorev}
  @keyframes slamgo{
    0%{transform:translateX(-103%)}
    34%{transform:translateX(0)}
    58%{transform:translateX(0)}
    100%{transform:translateX(103%)}
  }
  @keyframes slamgorev{
    0%{transform:translateX(103%)}
    34%{transform:translateX(0)}
    58%{transform:translateX(0)}
    100%{transform:translateX(-103%)}
  }

  /* outlined title box */
  .boxed{position:relative}
  .boxed::before{
    content:"";position:absolute;inset:-.45em -.9em;
    border:2px solid var(--boxc,#E1FF83);
    transform:scaleX(0);transform-origin:left center;
    pointer-events:none;
  }
  .here .boxed::before{animation:boxdraw .55s cubic-bezier(.3,0,.2,1) .55s forwards}
  @keyframes boxdraw{to{transform:scaleX(1)}}

  /* finale card fan carousel */
  .fan{
    position:relative;
    width:min(230px,52vw);
    aspect-ratio:1240/1676;
    transform-origin:50% 170%;
  }
  .here .fan{animation:fansway 12s ease-in-out 2.2s infinite}
  @keyframes fansway{
    0%{transform:rotate(0deg)}
    25%{transform:rotate(-7deg)}
    75%{transform:rotate(7deg)}
    100%{transform:rotate(0deg)}
  }
  .fan .fc{
    position:absolute;left:0;top:0;width:100% !important;height:auto;
    transform-origin:50% 170%;
    transform:rotate(0deg);
    animation:none;
    filter:drop-shadow(0 18px 40px rgba(0,0,0,.5));
  }
  .fan .fancard{filter:brightness(.85) drop-shadow(0 14px 30px rgba(0,0,0,.5))}
  .here .fan .fc{animation:fanout .7s cubic-bezier(.2,.7,.25,1.18) calc(1.1s + var(--fd,0s)) forwards}
  @keyframes fanout{to{transform:rotate(var(--a,0deg))}}
  @media (max-width:640px){
    .fan .fc.f1{--a:-30deg !important}
    .fan .fc.f2{--a:30deg !important}
    .fan .fc.f3{--a:-15deg !important}
    .fan .fc.f4{--a:15deg !important}
  }
  @media (prefers-reduced-motion: reduce){
    .here .fan{animation:none}
    .fan .fc{animation:none !important;transform:rotate(var(--a,0deg))}
  }

  /* markets deck overlay */
  #mko{
    position:fixed;inset:0;z-index:70;
    background:
      radial-gradient(42% 34% at 74% 26%, rgba(151,159,228,.07) 0%, transparent 70%),
      radial-gradient(38% 30% at 68% 76%, rgba(225,255,131,.05) 0%, transparent 70%),
      radial-gradient(120% 90% at 50% 8%, #16131D 0%, #07060A 52%, #020103 100%);
    display:flex;flex-direction:column;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  .mko-head{
    display:flex;align-items:flex-start;justify-content:space-between;
    padding:20px clamp(18px,4vw,40px) 6px;
  }
  .mko-kicker{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--lilac)}
  .mko-title{font-weight:800;font-style:italic;font-size:clamp(1.5rem,5vw,2.4rem);color:var(--lime);line-height:1.1;margin-top:4px}
  .mko-note{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(240,240,240,.35);margin-top:6px}
  #mkoBack{
    margin-top:12px;display:block;width:max-content;
    background:rgba(5,3,10,.4);border:1px solid rgba(225,255,131,.45);
    color:var(--lime);border-radius:999px;padding:7px 14px;cursor:pointer;
    font-family:var(--font);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;
  }
  #mkoBack[hidden]{display:none !important}
  #ring.l1 .ritem{
    font-size:clamp(.92rem,3.4vw,1.3rem);font-weight:700;
    white-space:normal;text-align:left;line-height:1.3;
    width:min(72vw,560px);
  }
  #ring.l1 .ritem span{flex:1}
  .rodds{
    font-size:.55em;font-weight:800;letter-spacing:.06em;
    color:var(--lime);border:1px solid rgba(225,255,131,.45);
    border-radius:999px;padding:.14em .6em;
  }
  #mkoClose{
    flex:none;width:40px;height:40px;border-radius:50%;
    background:rgba(5,3,10,.5);border:1px solid rgba(225,255,131,.4);
    color:var(--lime);font-size:1rem;cursor:pointer;font-family:var(--font);
  }
  #mkoClose:focus-visible{outline:2px solid #fff;outline-offset:2px}
  #mko[hidden]{display:none !important}
  #mkoStars{position:absolute;inset:0;pointer-events:none}
  #mko::after{
    content:"";position:absolute;inset:-40px;pointer-events:none;opacity:.5;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .mko-head,#mkoStage,.mko-hint{position:relative;z-index:1}
  #mkoStage{flex:1;position:relative;overflow:hidden;touch-action:none}
  #ringWrap{position:absolute;inset:0;overflow:hidden}
  #ring{position:absolute;left:clamp(26px,9vw,120px);top:46%;transition:top .5s cubic-bezier(.2,.7,.2,1), left .45s cubic-bezier(.2,.7,.2,1)}
  #ring::before{
    content:"";position:absolute;left:-7px;top:-7px;
    width:14px;height:14px;border-radius:50%;
    background:var(--lime);box-shadow:0 0 16px rgba(225,255,131,.7);
  }
  #ring::after{
    content:"";position:absolute;left:14px;top:-1px;height:2px;
    width:calc(min(16vw,96px) + 4px);
    background:linear-gradient(90deg, var(--lime), transparent);
    opacity:.65;
  }
  .ritem{
    position:absolute;left:0;top:0;
    transform-origin:0 50%;
    background:none;border:0;cursor:pointer;
    display:inline-flex;align-items:center;gap:.4em;
    font-family:var(--font);font-weight:800;text-transform:uppercase;
    font-size:clamp(1.5rem,6vw,2.6rem);letter-spacing:.01em;
    white-space:nowrap;line-height:1;
    color:#fff;
    padding:4px 8px;
    will-change:transform,opacity;
  }
  .ritem::before{
    content:"";flex:none;width:.4em;height:.4em;border-radius:50%;
    background:var(--rc,#E1FF83);
    box-shadow:0 0 10px var(--rc,#E1FF83);
  }
  .ritem:focus{outline:none}
  @media (max-width:700px){
    #ring{top:42%}
    .ritem{font-size:clamp(1.05rem,5.2vw,1.6rem)}
    #ring.l1 .ritem{font-size:.76rem;font-weight:600;gap:.4em;width:calc(100vw - 100px)}
    #ringWrap{perspective:900px}
  }

  /* catch-the-spark title lockup */
  .cts{text-align:center}
  .cts-top{
    font-weight:300;text-transform:uppercase;
    font-size:clamp(.95rem,3.2vw,1.7rem);
    color:#B9C2F2;
    letter-spacing:.55em;padding-left:.55em;
    opacity:0;
  }
  .here .cts-top{animation:trackin .9s cubic-bezier(.2,.7,.2,1) .05s forwards}
  @keyframes trackin{
    0%{opacity:0;letter-spacing:1.1em;filter:blur(5px)}
    100%{opacity:1;letter-spacing:.55em;filter:blur(0)}
  }
  .cts-wm{
    display:block;margin:18px auto 0;
    width:min(360px,78vw);height:auto;
    opacity:0;
    filter:drop-shadow(0 0 30px rgba(225,255,131,.25));
  }
  .here .cts-wm{animation:wmslam .65s cubic-bezier(.2,.8,.2,1.1) .4s forwards}
  @keyframes wmslam{
    0%{opacity:0;transform:scale(1.55);filter:blur(9px)}
    60%{opacity:1;transform:scale(.97);filter:blur(0)}
    100%{opacity:1;transform:scale(1);filter:blur(0) drop-shadow(0 0 30px rgba(225,255,131,.25))}
  }
  .cts-big{
    font-weight:900;line-height:.95;
    font-size:clamp(3.6rem,19vw,9.5rem);
    color:var(--lime);letter-spacing:.02em;
    text-shadow:0 0 46px rgba(225,255,131,.3);
  }
  .cts-big .tex{
    background:linear-gradient(135deg,#753FE4 0%,#E1FF83 45%,#4C00D2 80%);
    background-size:250% 250%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    text-shadow:none;
  }
  .here .cts-big .tex{
    animation:Lin .5s cubic-bezier(.2,.8,.2,1.12) var(--d,0ms) forwards,
              texshift 4.5s ease-in-out 1.1s infinite alternate;
  }
  @keyframes texshift{from{background-position:0% 0%}to{background-position:100% 100%}}
  .cts-big .dotp{color:#fff;text-shadow:none}

  /* ---- FPL-style market set piece ---- */
  .beat.fpl{padding:0;justify-content:center;align-items:stretch}
  .giantword{
    position:absolute;top:50%;left:-14vw;transform:translateY(-50%);
    font-weight:800;font-size:min(46vw,54vh);line-height:1;letter-spacing:.01em;
    white-space:nowrap;color:transparent;
    -webkit-text-stroke:1.5px rgba(151,159,228,.55);
    opacity:0;pointer-events:none;
    transition:opacity .9s ease .1s;
  }
  .here .giantword{opacity:.95;animation:gwdrift 9s linear .1s forwards}
  @keyframes gwdrift{from{transform:translateY(-50%) translateX(3vw)}to{transform:translateY(-50%) translateX(-8vw)}}
  .giantword.front{z-index:5;-webkit-text-stroke-color:rgba(151,159,228,.9)}
  .giantword.toback{opacity:.3;transition:opacity 1.1s ease;-webkit-text-stroke-color:rgba(151,159,228,.5)}
  .lineslice{position:absolute;inset:0;overflow:hidden;pointer-events:none}
  .lineslice i{
    position:absolute;background:var(--lime);
    transform:rotate(-38deg) translate(-90vw,-40vh);
    box-shadow:0 0 18px rgba(225,255,131,.25);
  }
  .lineslice i:nth-child(1){top:4vh;left:-4vw;width:52vw;height:26px}
  .lineslice i:nth-child(2){top:12vh;left:-8vw;width:34vw;height:10px;opacity:.85}
  .lineslice i:nth-child(3){top:19vh;left:-3vw;width:44vw;height:4px;background:var(--lilac);opacity:.7;box-shadow:none}
  .lineslice i:nth-child(4){top:26vh;left:-9vw;width:24vw;height:14px;opacity:.9}
  .lineslice i:nth-child(5){top:34vh;left:-2vw;width:15vw;height:3px;opacity:.6;box-shadow:none}
  .here .lineslice i{animation:linein .5s cubic-bezier(.25,0,.15,1) forwards}
  .here .lineslice i:nth-child(2){animation-delay:.08s}
  .here .lineslice i:nth-child(3){animation-delay:.16s}
  .here .lineslice i:nth-child(4){animation-delay:.24s}
  .here .lineslice i:nth-child(5){animation-delay:.32s}
  @keyframes linein{to{transform:rotate(-38deg) translate(0,0)}}
  .fpl-label{
    position:absolute;top:35vh;left:0;
    display:flex;align-items:center;
    transform:translateX(-102%);
    pointer-events:none;
  }
  .here .fpl-label{animation:labelin .45s cubic-bezier(.25,0,.15,1) .55s forwards}
  @keyframes labelin{to{transform:translateX(0)}}
  .fpl-label i{display:block;width:14vw;height:44px;background:var(--lime)}
  .fpl-label span{
    display:flex;align-items:center;height:44px;padding:0 18px;
    background:#050308;color:var(--lime);
    font-size:.72rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
    border:1px solid rgba(225,255,131,.5);border-left:0;
  }
  .fpl-panel{
    position:absolute;inset:19% 24% 19% 30%;
    overflow:hidden;background:#0A0316;
    clip-path:inset(0 100% 0 0);
    pointer-events:none;
  }
  .here .fpl-panel{animation:panelseq 7.4s cubic-bezier(.3,0,.2,1) .9s forwards}
  @keyframes panelseq{
    0%{clip-path:inset(0 100% 0 0)}
    9%{clip-path:inset(0 0 0 0)}
    100%{clip-path:inset(0 0 0 0)}
  }
  .fpl-panel video{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    filter:contrast(1.12) url(#duoLime) brightness(.95) contrast(1.12);
  }
  .fpl-panel.flip{animation:flipland .65s cubic-bezier(.2,.7,.2,1) forwards;clip-path:inset(0 0 0 0);inset:19% 24% 19% 30%}
  @keyframes flipland{
    0%{transform:scale(.42);opacity:0}
    18%{opacity:1}
    62%{transform:scale(1.06)}
    100%{transform:scale(1);opacity:1}
  }
  .fpl-panel.flip video{filter:contrast(1.12) url(#duoViolet) brightness(.95) contrast(1.15)}
  .fpl-panel video[data-clip="roar"]{display:none}
  .fpl-panel.flip video[data-clip="strike"]{display:none}
  .fpl-panel.flip video[data-clip="roar"]{display:block}
  .fpl-panel .halft{
    position:absolute;inset:0;opacity:.5;
    background-image:radial-gradient(rgba(2,1,3,.6) 1.1px, transparent 1.5px);
    background-size:7px 7px;
  }
  .odds{
    position:absolute;top:57%;left:50%;transform:translate(-50%,-50%);
    width:min(86vw,560px);
    font-size:clamp(.58rem,1.1vw,.85rem);letter-spacing:.14em;text-transform:uppercase;
    color:var(--lime);
    text-shadow:0 1px 10px rgba(2,1,3,.95);
    background:linear-gradient(180deg, rgba(4,2,8,.68), rgba(4,2,8,.78));
    padding:6px 4px;
  }
  .orow{
    display:grid;grid-template-columns:1.4fr 1.2fr .6fr;gap:8px;
    padding:9px 10px;align-items:center;
    opacity:0;transform:translateY(10px);
  }
  .here .orow{animation:rowin .4s cubic-bezier(.2,.7,.2,1) forwards}
  .here .orow:nth-child(1){animation-delay:1.4s}
  .here .orow:nth-child(2){animation-delay:1.55s}
  .here .orow:nth-child(3){animation-delay:1.7s}
  .here .orow:nth-child(4){animation-delay:1.85s}
  .here .orow:nth-child(5){animation-delay:2.0s}
  .here .orow:nth-child(6){animation-delay:2.15s}
  @keyframes rowin{to{opacity:1;transform:none}}
  .ohead{border-bottom:1px solid rgba(225,255,131,.5);font-weight:700}
  .orow:last-child span:last-child,.orow span:last-child{font-weight:700}
  .ohot{position:relative;color:#0A0316;font-weight:700}
  .ohot::before{
    content:"";position:absolute;inset:0;background:var(--lime);z-index:-1;
    transform:scaleX(0);transform-origin:left center;
    box-shadow:0 0 24px rgba(225,255,131,.45);
  }
  .here .ohot::before{animation:hotbar .45s cubic-bezier(.25,0,.15,1) 2.4s forwards}
  @keyframes hotbar{to{transform:scaleX(1)}}
  @media (max-width:480px){
    .fpl-panel{inset:22% 12% 22% 18%}
    .fpl-panel.flip{inset:22% 12% 22% 18%}
    .fpl-label span{height:38px;font-size:.62rem;padding:0 12px}
    .fpl-label i{height:38px}
    .boltslice{height:48vh}
  }
  @media (prefers-reduced-motion: reduce){
    .giantword,.lineslice i,.fpl-label,.fpl-panel,.orow,.ohot::before{animation:none !important;opacity:1 !important;transform:none !important;clip-path:none !important}
    .fpl-label{transform:none !important}
  }

  /* rising arrow behind the opening */
  .uparrow{
    position:absolute;left:50%;top:52%;
    width:min(90vw,620px);height:auto;
    transform:translate(-50%,-50%);
    opacity:.28;z-index:-1;pointer-events:none;
  }
  .uparrow .track{
    fill:none;stroke:rgba(240,240,240,.95);stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:1;stroke-dashoffset:1;opacity:0;
  }
  .here .uparrow .track{animation:drawloop 4.4s cubic-bezier(.35,0,.25,1) .7s infinite}
  @keyframes drawloop{
    0%{stroke-dashoffset:1;opacity:0;stroke:rgba(240,240,240,.95);filter:drop-shadow(0 0 6px rgba(240,240,240,.35))}
    5%{opacity:1}
    36%{stroke:rgba(240,240,240,.95);filter:drop-shadow(0 0 6px rgba(240,240,240,.35))}
    50%{stroke-dashoffset:0;opacity:1;stroke:#E1FF83;filter:drop-shadow(0 0 6px rgba(225,255,131,.9)) drop-shadow(0 0 22px rgba(225,255,131,.55)) drop-shadow(0 0 48px rgba(225,255,131,.3))}
    85%{stroke-dashoffset:0;opacity:1;stroke:#E1FF83;filter:drop-shadow(0 0 6px rgba(225,255,131,.9)) drop-shadow(0 0 22px rgba(225,255,131,.55)) drop-shadow(0 0 48px rgba(225,255,131,.3))}
    100%{stroke-dashoffset:0;opacity:0;stroke:#E1FF83}
  }
  .here .uparrow{animation:arrowdrift 9s ease-in-out infinite alternate}
  @keyframes arrowdrift{
    from{transform:translate(-50%,-49%)}
    to{transform:translate(-50%,-54%)}
  }
  .uparrow .tick{opacity:0}
  .here .uparrow .tick{animation:tickblink 4.4s linear .7s infinite}
  @keyframes tickblink{
    0%{opacity:0;fill:rgba(240,240,240,.9)}
    6%{opacity:.85}
    34%{fill:rgba(240,240,240,.9)}
    48%{opacity:1;fill:#E1FF83;filter:drop-shadow(0 0 8px rgba(225,255,131,1)) drop-shadow(0 0 24px rgba(225,255,131,.7))}
    64%{opacity:0;fill:#E1FF83}
    100%{opacity:0}
  }
  @media (prefers-reduced-motion: reduce){
    .uparrow .track{stroke-dashoffset:0;opacity:1;animation:none !important}
    .here .uparrow,.uparrow .tick{animation:none !important}
  }

  /* --- 3D set dressing --- */
  #floor{
    --gridc:rgba(255,255,255,.07);
    position:absolute;left:-25%;right:-25%;bottom:-8%;height:54%;
    background:
      repeating-linear-gradient(90deg, var(--gridc) 0 1px, transparent 1px 64px),
      repeating-linear-gradient(0deg, var(--gridc) 0 1px, transparent 1px 64px);
    transform:perspective(620px) rotateX(72deg);
    transform-origin:50% 100%;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 48%);
    mask-image:linear-gradient(180deg, transparent 0%, #000 48%);
    opacity:0;transition:opacity 2s ease;
    animation:floorslide 9s linear infinite;
    pointer-events:none;
  }
  @keyframes floorslide{from{background-position:0 0, 0 0}to{background-position:0 0, 0 128px}}
  #film.floor-on #floor{opacity:1}
  #film.ch-finale #floor,#film.ch-world #floor,#film.ch-violet #floor{--gridc:rgba(151,159,228,.12)}

  .ember{
    position:absolute;bottom:9%;
    font-weight:800;font-style:italic;color:var(--lime);
    opacity:0;pointer-events:none;letter-spacing:.04em;
    text-shadow:0 0 14px rgba(225,255,131,.5);
  }
  .here .ember{animation:rise var(--dur,9s) linear var(--del,0s) infinite}
  @keyframes rise{
    0%{transform:translateY(0);opacity:0}
    12%{opacity:.34}
    75%{opacity:.1}
    100%{transform:translateY(-54vh);opacity:0}
  }

  #vignette{
    position:fixed;inset:0;z-index:42;pointer-events:none;
    background:radial-gradient(125% 105% at 50% 45%, transparent 56%, rgba(0,0,0,.44) 100%);
  }
  #sweep{
    position:fixed;inset:-20% -30%;z-index:45;pointer-events:none;opacity:0;
    background:repeating-linear-gradient(105deg,
      transparent 0 30px, var(--swc, rgba(255,255,255,.18)) 30px 33px,
      transparent 33px 74px, var(--swc, rgba(255,255,255,.10)) 74px 76px, transparent 76px 130px);
    filter:blur(.5px);
    transform:translateX(-130%) skewX(-8deg);
  }
  #sweep.go{animation:sweepgo .55s cubic-bezier(.35,0,.15,1) 1}
  @keyframes sweepgo{
    0%{opacity:0;transform:translateX(-130%) skewX(-8deg)}
    15%{opacity:1}
    100%{opacity:0;transform:translateX(130%) skewX(-8deg)}
  }
  #film.ch-violet ~ #sweep,#film.ch-world ~ #sweep,#film.ch-finale ~ #sweep{--swc:rgba(225,255,131,.16)}

  #dip{
    position:fixed;inset:0;z-index:46;pointer-events:none;
    background:#020103;opacity:0;
  }
  #dip.go{animation:dipgo .32s ease-out 1}
  @keyframes dipgo{0%{opacity:0}28%{opacity:.6}100%{opacity:0}}
  #grain.burst{animation:grainburst .4s steps(2) 1}
  @keyframes grainburst{0%{opacity:.5}40%{opacity:.95}100%{opacity:.5}}

  #flare{
    position:absolute;left:-10%;right:-10%;top:47.5%;height:3px;
    background:linear-gradient(90deg, transparent, rgba(225,255,131,.95), transparent);
    filter:blur(1px) drop-shadow(0 0 20px rgba(225,255,131,.8));
    opacity:0;transform:scaleX(.05);pointer-events:none;
  }
  #flare.go{animation:flarego 1s cubic-bezier(.2,.7,.2,1) 1}
  @keyframes flarego{
    0%{opacity:0;transform:scaleX(.05)}
    16%{opacity:1;transform:scaleX(1.04)}
    100%{opacity:0;transform:scaleX(1.45)}
  }

  #boltMorph{
    position:absolute;left:50%;top:50%;
    opacity:0;pointer-events:none;
    filter:blur(16px);
    transition:opacity 1.3s ease, filter 1.5s ease;
  }
  #boltMorph.on{
    opacity:1;filter:blur(0)
      drop-shadow(0 0 24px rgba(225,255,131,.5)) drop-shadow(0 0 70px rgba(225,255,131,.28));
  }
  .beat.spark-beat{justify-content:flex-start;padding-top:calc(13vh + env(safe-area-inset-top,0px));padding-bottom:calc(13vh + env(safe-area-inset-bottom,0px))}
  .spark-beat .tagline{margin-top:auto;font-size:clamp(.8rem,2.2vw,1.05rem)}
  .flash{
    position:absolute;inset:0;pointer-events:none;opacity:0;
    background:radial-gradient(38% 30% at 50% 48%, rgba(255,255,255,.95), rgba(225,255,131,.6) 40%, transparent 72%);
  }
  .flash.go{animation:flash 1s ease-out 1}
  @keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}

  /* ---------- beats ---------- */
  .beat{
    position:absolute;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;
    padding:24px clamp(30px,8vw,84px);
    padding-top:calc(24px + env(safe-area-inset-top,0px));
    padding-bottom:calc(56px + env(safe-area-inset-bottom,0px));
    opacity:0;
    transform:translateZ(-420px);
    filter:blur(12px);
    pointer-events:none;
    transition:opacity 1.1s ease, transform 1.5s cubic-bezier(.16,.6,.18,1), filter 1.1s ease;
    will-change:opacity,transform,filter;
  }
  .beat.here{opacity:1;transform:translateZ(0);filter:blur(0);pointer-events:auto}
  .beat.gone{opacity:0;transform:translateZ(340px) translateY(-46px);filter:blur(14px);transition-duration:.9s,1.1s,.9s}

  .big{
    font-size:clamp(1.7rem, 4.6vw + 1rem, 3.6rem);
    font-weight:600;line-height:1.3;letter-spacing:-.01em;
    max-width:16ch;text-wrap:balance;margin:0;
    text-shadow:0 2px 30px rgba(0,0,0,.75);
  }
  .soft{color:var(--ink-dim);font-weight:400}
  .em{font-weight:800;color:#FFF}
  .lime{color:var(--lime)}
  .cool{color:#9DA8F5}
  .subline{
    font-size:clamp(.95rem,2.6vw,1.25rem);color:var(--ink-dim);
    font-weight:400;margin:18px 0 0;max-width:34ch;line-height:1.6;
    text-shadow:0 2px 24px rgba(0,0,0,.75);
  }

  .here .big{animation:bigbreathe 6.5s ease-in-out infinite alternate, lineblink 7.3s steps(1) 2.2s infinite}
  @keyframes lineblink{
    0%,93.5%,100%{opacity:1}
    94%{opacity:.3}
    94.6%{opacity:1}
    95.4%{opacity:.55}
    96%{opacity:1}
  }
  @keyframes bigbreathe{from{transform:translateY(0)}to{transform:translateY(-7px)}}
  .sub{opacity:0;transform:translateY(22px);filter:blur(5px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.22,.61,.21,1),filter 1s ease}
  .here .sub.on{opacity:1;transform:none;filter:blur(0)}

  /* kinetic words */
  .w{display:inline-block;opacity:0;transform:translateY(.6em) rotate(3deg) scale(.92);filter:blur(4px);will-change:transform,opacity}
  .here .w{animation:wordin .65s cubic-bezier(.2,.75,.25,1.12) forwards;animation-delay:var(--d,0ms)}
  @keyframes wordin{
    55%{opacity:1;transform:none;filter:blur(0)}
    66%{opacity:.45}
    74%{opacity:1}
    100%{opacity:1;transform:none;filter:blur(0)}
  }
  .w.impact{transform:scale(1.7);filter:blur(9px)}
  .here .w.impact{animation:slamin .6s cubic-bezier(.2,.8,.2,1.05) forwards;animation-delay:var(--d,0ms)}
  @keyframes slamin{
    0%{opacity:0;transform:scale(1.7);filter:blur(9px)}
    55%{opacity:1;transform:scale(.94);filter:blur(0);text-shadow:-3px 0 rgba(151,159,228,.85), 3px 0 rgba(225,255,131,.85)}
    70%{text-shadow:2px 0 rgba(151,159,228,.5), -2px 0 rgba(225,255,131,.5)}
    78%{opacity:1}
    84%{opacity:.35}
    90%{opacity:1;filter:blur(0)}
    100%{opacity:1;transform:scale(1);filter:blur(0);text-shadow:none}
  }
  .L{display:inline-block;opacity:0;transform:translateY(.35em) scale(1.6) rotate(8deg)}
  .here .L{animation:Lin .5s cubic-bezier(.2,.8,.2,1.12) forwards;animation-delay:var(--d,0ms)}
  @keyframes Lin{60%{opacity:1;transform:scale(.96) rotate(-1deg)}100%{opacity:1;transform:none}}


  /* engine whispers — quiet system voice in the background */
  #whisper{
    position:fixed;left:50%;transform:translateX(-50%);
    bottom:calc(44px + env(safe-area-inset-bottom,0px));
    z-index:44;pointer-events:none;
    font-size:.62rem;font-weight:300;letter-spacing:.3em;text-transform:uppercase;
    color:rgba(240,240,240,.34);white-space:nowrap;
    opacity:0;transition:opacity 1.2s ease;
  }
  #whisper.show{opacity:1}
  #film.ch-violet ~ #whisper, #film.ch-world ~ #whisper, #film.ch-finale ~ #whisper{color:rgba(225,255,131,.4)}

  /* skip control */
  #skip{
    position:fixed;right:16px;top:calc(12px + env(safe-area-inset-top,0px));
    z-index:60;cursor:pointer;
    font-family:var(--font);font-size:.62rem;font-weight:600;
    letter-spacing:.24em;text-transform:uppercase;
    color:rgba(240,240,240,.6);
    border:1px solid rgba(240,240,240,.25);border-radius:999px;
    padding:7px 14px;background:rgba(5,3,10,.35);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    transition:opacity .6s, color .3s, border-color .3s;
  }
  #skip:hover{color:#fff;border-color:rgba(240,240,240,.5)}
  #skip:focus-visible{outline:2px solid #fff;outline-offset:2px}
  #skip.off{opacity:0;pointer-events:none}

  /* app link, present from the first frame */
  #appChip{
    position:fixed;left:50%;transform:translateX(-50%);
    top:calc(12px + env(safe-area-inset-top,0px));
    z-index:60;
    font-size:.64rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
    color:var(--lime);text-decoration:none;
    border:1px solid rgba(225,255,131,.45);border-radius:999px;
    padding:7px 16px;background:rgba(5,3,10,.35);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  }
  #appChip:focus-visible{outline:2px solid #fff;outline-offset:2px}

  /* end fail-safe: after the finale lands, everything must be visible no matter what */
  #film.ended .beat[data-kind="end"]{opacity:1;transform:none;filter:none;pointer-events:auto}
  #film.ended .beat[data-kind="end"] .sub{opacity:1;transform:none;filter:none}
  #film.ended .beat[data-kind="end"] .L,
  #film.ended .beat[data-kind="end"] .w{animation:none;opacity:1;transform:none;filter:none}

  /* camera */
  #cam{position:absolute;inset:-3.2%;will-change:transform}
  #film.kick{animation:kick .55s cubic-bezier(.2,.7,.3,1) 1}
  @keyframes kick{0%{transform:scale(1)}28%{transform:scale(1.04)}100%{transform:scale(1)}}
  #film.pulse{animation:pulse 1.05s ease-in-out infinite}
  #film.frozen, #film.frozen *{animation-play-state:paused !important}
  @keyframes pulse{0%,100%{transform:scale(1)}9%{transform:scale(1.016)}16%{transform:scale(1)}}

  /* ---------- heartbeat ---------- */
  .ecg{width:min(620px,86vw);height:auto;overflow:visible;margin:clamp(14px,4vh,34px) 0}
  .ecg path{
    fill:none;stroke:rgba(240,240,240,.9);stroke-width:2.2;
    stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:1;stroke-dashoffset:1;
    transition:stroke-dashoffset 2.2s cubic-bezier(.4,0,.25,1), stroke 1.2s ease, filter 1.2s ease;
  }
  .here.drawn .ecg path{stroke-dashoffset:0}
  .here.hot .ecg path{stroke:var(--lime);filter:drop-shadow(0 0 10px rgba(225,255,131,.55))}

  /* ---------- logo ---------- */
  .bolt{
    width:clamp(78px,17vw,132px);height:auto;
    filter:drop-shadow(0 0 24px rgba(225,255,131,.5)) drop-shadow(0 0 70px rgba(225,255,131,.28));
  }
  .wordmark-img{width:min(280px,60vw);height:auto;margin-top:18px;filter:drop-shadow(0 2px 18px rgba(0,0,0,.5))}
  .wordmark{display:flex;align-items:baseline;gap:.28em;font-style:italic;letter-spacing:-.02em;margin-top:10px}
  .wordmark .w1{font-weight:900;font-size:clamp(2.7rem,9vw,4.8rem);color:#fff}
  .wordmark .w2{font-weight:300;font-size:clamp(1.5rem,5vw,2.7rem);color:#fff;letter-spacing:.02em}
  .tagline{
    font-size:clamp(.95rem,2.6vw,1.3rem);font-weight:400;color:var(--lilac);
    letter-spacing:.24em;text-transform:uppercase;margin:18px 0 0;
  }

  /* ---------- card ---------- */
  .card-wrap{perspective:1100px;margin-top:14px}
  .pcard-img{
    width:min(230px,52vw);
    height:auto;display:block;
    animation:float 5.5s ease-in-out infinite;
    filter:drop-shadow(0 22px 50px rgba(0,0,0,.55));
    transform-style:preserve-3d;
  }
  .pcard{
    position:relative;width:min(292px,72vw);
    clip-path:polygon(24% 0%,76% 0%,100% 12%,100% 88%,76% 100%,24% 100%,0% 88%,0% 12%);
    background:radial-gradient(120% 90% at 70% 0%, rgba(117,63,228,.85) 0%, rgba(45,8,110,.95) 55%, #22064F 100%);
    padding:6px;
    animation:float 5.5s ease-in-out infinite;
    transform-style:preserve-3d;
  }
  @keyframes float{
    0%,100%{transform:rotateX(4deg) rotateY(-6deg) translateY(0)}
    50%{transform:rotateX(-3deg) rotateY(6deg) translateY(-10px)}
  }
  .pcard .inner{
    clip-path:polygon(24% 0%,76% 0%,100% 12%,100% 88%,76% 100%,24% 100%,0% 88%,0% 12%);
    background:
      repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 3px, transparent 3px 14px),
      radial-gradient(130% 100% at 65% -10%, rgba(255,255,255,.14) 0%, transparent 45%),
      linear-gradient(180deg,#3A0B85 0%,#26065C 60%,#1D0448 100%);
    border:2px solid #DDFB7A;
    padding:42px 18px 16px;
    display:flex;flex-direction:column;gap:11px;align-items:center;
  }
  .timer{
    position:absolute;top:-2px;left:50%;transform:translateX(-50%);
    width:54px;height:54px;border-radius:50%;
    background:conic-gradient(var(--lime) 0 62%, #574B7E 62% 100%);
    display:grid;place-items:center;
    box-shadow:0 6px 18px rgba(0,0,0,.45);
  }
  .timer b{
    width:42px;height:42px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #4B14A8, #2A0763);
    display:grid;place-items:center;color:#FFB84D;font-size:1.1rem;font-weight:800;
  }
  .q1{font-size:.76rem;font-weight:700;letter-spacing:.04em;color:#fff;margin:0}
  .q2{font-size:1rem;font-weight:800;letter-spacing:.02em;color:var(--lime);margin:0;line-height:1.3}
  .chip{
    width:100%;box-sizing:border-box;background:rgba(10,2,30,.55);border-radius:12px;
    padding:9px 12px;font-size:.78rem;color:#D9D6EA;
    display:flex;align-items:center;justify-content:center;gap:8px;
  }
  .score{
    display:flex;align-items:center;gap:8px;font-weight:700;color:#fff;font-size:.78rem;
    background:rgba(10,2,30,.55);border-radius:999px;padding:7px 14px;
  }
  .score .live{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
  .mult{
    margin-top:2px;font-size:1.45rem;font-weight:900;color:var(--lime);
    letter-spacing:.03em;text-shadow:0 0 18px rgba(225,255,131,.45);
  }
  .feature-row{
    display:flex;gap:clamp(10px,3vw,26px);flex-wrap:wrap;justify-content:center;
    max-width:560px;margin-top:clamp(16px,3.5vh,30px);
  }
  .feat{
    font-size:clamp(.7rem,1.9vw,.84rem);letter-spacing:.14em;text-transform:uppercase;
    color:var(--lilac);display:flex;align-items:center;gap:8px;
  }
  .feat i{width:6px;height:6px;background:var(--lime);border-radius:1px;transform:rotate(45deg);flex:none}

  /* ---------- finale ---------- */
  .kicker{
    font-size:clamp(.72rem,2vw,.9rem);letter-spacing:.3em;text-transform:uppercase;
    color:#fff;font-weight:400;margin:0 0 6px;
  }
  .kicker .diff{font-style:italic;font-weight:800;color:var(--lime)}
  .coming{
    font-size:clamp(2.2rem,9vw,4.6rem);font-weight:900;font-style:italic;line-height:.95;
    letter-spacing:-.02em;color:var(--lime);text-transform:uppercase;
    text-shadow:0 0 60px rgba(225,255,131,.25);margin:0;
  }
  .logo-row{display:flex;align-items:center;gap:14px;font-style:italic;margin-top:18px}
  .logo-row svg{width:32px;height:auto;filter:drop-shadow(0 0 12px rgba(225,255,131,.5))}
  .logo-row .w1{font-weight:900;font-size:1.65rem;color:#fff;letter-spacing:-.02em}
  .logo-row .w2{font-weight:300;font-size:1.1rem;color:#fff}
  .domain{font-size:.78rem;letter-spacing:.22em;color:var(--lilac);text-transform:uppercase;margin:14px 0 0}
  .cta{
    display:inline-block;margin-top:18px;font-family:var(--font);
    font-size:.84rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
    color:#0A0316;background:var(--lime);text-decoration:none;
    border:0;border-radius:999px;padding:15px 34px;cursor:pointer;
    box-shadow:0 0 30px rgba(225,255,131,.4);
  }
  .cta:focus-visible,.cta2:focus-visible,.ghost:focus-visible{outline:3px solid #fff;outline-offset:3px}
  .cta2{
    display:inline-block;margin-top:14px;font-family:var(--font);cursor:pointer;
    font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
    color:var(--lime);text-decoration:none;
    border:1px solid rgba(225,255,131,.45);border-radius:999px;
    padding:10px 22px;background:rgba(5,3,10,.25);
  }
  .ghost{
    margin-top:16px;background:none;border:0;cursor:pointer;
    font-family:var(--font);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--lilac);
  }

  /* ---------- chrome / HUD ---------- */
  #grain{
    position:fixed;inset:-40px;pointer-events:none;opacity:.5;z-index:40;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  #hud{position:fixed;inset:0;pointer-events:none;z-index:45;animation:hudflick 9s steps(1) infinite}
  @keyframes hudflick{0%,100%{opacity:1}23%{opacity:.75}24%{opacity:1}61%{opacity:.8}62%{opacity:1}}
  #hud .h{
    position:absolute;
    font-size:.58rem;font-weight:300;letter-spacing:.22em;text-transform:uppercase;
    color:rgba(240,240,240,.34);
    white-space:nowrap;
  }
  #hud .tr{top:calc(14px + env(safe-area-inset-top,0px));right:16px;transition:opacity 1s}
  #hud .bl{bottom:calc(14px + env(safe-area-inset-bottom,0px));left:16px;font-variant-numeric:tabular-nums}
  #hud .br{bottom:calc(14px + env(safe-area-inset-bottom,0px));right:16px}
  #hud .cross{
    position:absolute;font-style:normal;
    color:rgba(240,240,240,.16);font-size:.9rem;font-weight:300;
    transform:translate(-50%,-50%);
  }
  #hud .c1{left:12%;top:24%}#hud .c2{left:88%;top:20%}#hud .c3{left:10%;top:78%}#hud .c4{left:90%;top:74%}
  #film.ch-violet #hud .h,#film.ch-world #hud .h,#film.ch-finale #hud .h{color:rgba(151,159,228,.5)}
  #film.ch-violet #hud .cross,#film.ch-world #hud .cross,#film.ch-finale #hud .cross{color:rgba(151,159,228,.22)}
  #bar{
    position:fixed;left:0;bottom:0;height:3px;width:0%;
    background:var(--lime);z-index:50;
    box-shadow:0 0 12px rgba(225,255,131,.6);
    transition:width .8s ease;
    margin-bottom:env(safe-area-inset-bottom,0px);
  }

  @media (max-height:760px){
    .beat.spark-beat{padding-top:calc(9vh + env(safe-area-inset-top,0px));padding-bottom:calc(10vh + env(safe-area-inset-bottom,0px))}
    .pcard-img{width:min(190px,46vw)}
    .coming{font-size:clamp(1.9rem,8vw,3.6rem)}
    .card-wrap{margin-top:8px}
    .logo-row{margin-top:12px}
    .cta{margin-top:12px;padding:12px 26px}
    .ghost{margin-top:10px}
    .kicker{margin:0 0 4px}
    .big{font-size:clamp(1.45rem,4vw + .8rem,3rem)}
  }
  @media (max-width:420px){
    .beat{padding-left:22px;padding-right:22px}
    .subline{font-size:.92rem}
    .wordmark-img{width:min(230px,58vw)}
  }

  @media (prefers-reduced-motion: reduce){
    .beat,.sub,.bg,.ecg path{transition:none !important}
    .pcard,.pcard-img,#bg-mono,#bg-mono .beam,#hud,.bg,#film{animation:none !important}
    .flash.go{animation:none !important}
    .w,.L{animation:none !important;opacity:1 !important;transform:none !important;filter:none !important}
    #floor,.here .ember,#flare.go,#dip.go,#grain.burst,#sweep.go,.here .big,#slam.go{animation:none !important}
    .here .boxed::before{animation:none !important;transform:scaleX(1)}
  }