@layer reset, tokens, base, layout, components, motion, utilities;

@property --cin { syntax:'<number>'; inherits:false; initial-value:0 }

@layer reset {
  *{ margin:0; padding:0; box-sizing:border-box }
  html, body{ width:100%; overscroll-behavior:none; }
  img, video, canvas, svg{ display:block; max-width:100% }
  a{ color:inherit; text-decoration:none }
  dl, dt, dd{ margin:0 }
}

@layer tokens {
  :root{
    --u: calc(100vw / 1470);
    --w: #ffffff;
    --k: #030303;
    --pol: 0;

    --fs-120: max(56px, calc(120 * var(--u)));
    --fs-80:  max(40px, calc(80 * var(--u)));
    --fs-60:  max(34px, calc(60 * var(--u)));
    --fs-24:  max(15px, calc(24 * var(--u)));
    --fs-18:  max(13px, calc(18 * var(--u)));
    --fs-14:  max(12px, calc(14 * var(--u)));

    --font: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --track: -0.03em;

    --gutter: max(16px, calc(24 * var(--u)));
    --r: 8px;
    --blur: blur(12px);

    --ease-expo: cubic-bezier(.16,1,.3,1);
    --ease-strong: cubic-bezier(.23,1,.32,1);

    --runway: 1250vh;

    --cut-scale: 1;
    --cut-y: 0px;

    --z-stage:0; --z-rev-a:5; --z-rev-b:7;
    --z-outro:8; --z-cutout:9; --z-chrome:10; --z-pill:50;
  }
  *{ letter-spacing:var(--track) }

  .pol, .skip{
    --ink:   color-mix(in srgb, var(--w), var(--k) calc(var(--pol) * 100%));
    --plate: color-mix(in srgb, var(--k), var(--w) calc(var(--pol) * 100%));
    --ov: color-mix(in srgb, rgba(255,255,255,.10), rgba(3,3,3,.10) calc(var(--pol) * 100%));
    --hairline: color-mix(in srgb, rgba(255,255,255,.16), rgba(3,3,3,.16) calc(var(--pol) * 100%));
    --ink-fade: color-mix(in srgb, var(--ink), var(--plate) 35%);
    --grad: linear-gradient(180deg, var(--ink) 0%, var(--ink-fade) 136.55%);
  }
}

@layer base {
  body{
    font-family:var(--font); font-weight:400;
    background:var(--k); color:var(--w);
    -webkit-font-smoothing:antialiased;
    font-variant-numeric:tabular-nums;
  }
  .runway{ height:var(--runway) }
  ::selection{ background:var(--w); color:var(--k) }
  :where(a):focus-visible{ outline:2px solid var(--ink, #fff); outline-offset:3px }
}

@layer layout {
  .stage{ position:fixed; inset:0; z-index:var(--z-stage); background:var(--k);
          opacity:calc(1 - var(--stage-out,0)); }
  .stage video, .stage canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

  .reveal{ position:fixed; top:0; right:0; height:100%;
           width:calc(var(--reveal,0) * 100vw);
           overflow:hidden; pointer-events:none; background:var(--k); }
  .reveal--a{ z-index:var(--z-rev-a) }
  .reveal--b{ z-index:var(--z-rev-b); background:var(--w);
              top:auto; bottom:0; right:0;
              width:100vw; height:calc(var(--reveal,0) * 100vh); }
  .reveal--b video, .reveal--b canvas{ opacity:calc(1 - var(--dissolve,0)); top:auto; bottom:0; height:100vh; }
  .reveal video, .reveal canvas{ position:absolute; top:0; right:0; width:100vw; height:100%; object-fit:cover; }
  .reveal::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:1px;
                   background:rgba(255,255,255,.22); opacity:var(--edge,0); }
  .reveal--b::before{ left:0; right:0; top:0; bottom:auto; width:auto; height:1px }
  .is-covered{ visibility:hidden }

  .cut-wrap{ position:fixed; inset:0; z-index:var(--z-cutout); pointer-events:none; }
  .cutout{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    opacity:var(--cut,0);
    transform-origin:50% 50%;
    --e2:calc(var(--exit,0) * var(--exit,0));
    --e3:calc(var(--e2) * var(--exit,0));
    --eg:clamp(0, calc((var(--exit,0) - .45) / .55), 1);
    --eb:clamp(0, calc((var(--exit,0) - .55) / .45), 1);
    transform:translateY(calc(var(--e2) * 75vh + var(--e3) * 80vh + var(--cut-y)))
              scale(calc(var(--cut-scale) * (1 + var(--eg) * var(--eg) * 1.8)));
  }
  .cutout.is-diving{ filter:blur(calc(var(--eb) * var(--eb) * 64px)); }

  .plate-out{ position:fixed; inset:0; z-index:var(--z-outro); background:var(--w);
              opacity:var(--vidfade,0); pointer-events:none; }

  .chrome{ position:fixed; inset:0; z-index:var(--z-chrome); pointer-events:none }
  .scr{ position:absolute; inset:0 }

  .display{ position:absolute; margin:0 }
  .display--hero{ left:var(--gutter); bottom:calc(228 / 900 * 100%); font-size:var(--fs-120); }
  .display--s2{ left:var(--gutter); bottom:calc(523 / 900 * 100%); font-size:var(--fs-80); }

  .note{ position:absolute; left:var(--gutter); bottom:calc(33 / 900 * 100%);
         width:max(260px, calc(305 * var(--u)));
         font-size:var(--fs-14); line-height:calc(17 / 14); }
  .note--right{ left:calc(1105 / 1470 * 100%); bottom:auto; top:calc(369 / 900 * 100%); }

  .callout{ position:absolute;
            left:calc(var(--bx) / 1470 * 100%); top:calc(var(--by) / 900 * 100%);
            transform:translateY(calc((0.5 - var(--par,0.5)) * 56px)); }
  .badge{ position:relative; width:max(96px, calc(120 * var(--u))); aspect-ratio:1;
          display:flex; align-items:center; justify-content:center; text-align:center; }
  .ring{ position:absolute; inset:0; width:100%; height:100%; overflow:visible }
  .ring circle{ fill:none; stroke:var(--ink); stroke-width:1;
                stroke-dasharray:374;
                stroke-dashoffset:calc((1 - var(--draw,0)) * 374);
                transform:rotate(-90deg); transform-origin:50% 50%; }

  .card{ position:absolute; right:var(--gutter); bottom:var(--gutter);
         width:max(300px, calc(345 * var(--u))); padding:4px;
         display:flex; flex-direction:column; gap:max(26px, calc(36 * var(--u)));
         background:var(--ov);
         backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
         border-radius:var(--r); }
  .card-body{ padding:max(32px, calc(48 * var(--u))) 16px 0;
              display:flex; flex-direction:column; gap:max(18px, calc(24 * var(--u))); }

  .pill{ position:fixed; top:var(--gutter); left:var(--gutter); z-index:var(--z-pill);
         width:max(300px, calc(345 * var(--u))); height:max(37px, calc(41 * var(--u)));
         padding:4px 4px 4px 16px;
         display:flex; justify-content:space-between; align-items:center;
         background:var(--ov);
         backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
         border-radius:var(--r); }
  .pill-nav{ display:flex; gap:16px; font-size:var(--fs-18); color:var(--ink) }
  .pill-nav a{ pointer-events:auto }

  .outro{ position:fixed; inset:0; z-index:var(--z-outro); padding:var(--gutter);
          display:flex; flex-direction:column; align-items:center; justify-content:center;
          gap:max(36px, calc(48 * var(--u))); pointer-events:none; }
  .display--fin{ position:static; font-size:var(--fs-80); text-align:center; white-space:nowrap;
                 opacity:var(--fin,0);
                 transform:translateY(calc((1 - var(--fin,0)) * 26px)); }
  .outro.is-anim .display--fin{ filter:blur(calc((1 - var(--fin,0)) * 12px)) }
  .outro-foot{ display:flex; flex-direction:column; align-items:center;
               gap:max(20px, calc(32 * var(--u))); width:min(720px, 100%) }
  .spec{ width:min(720px, 100%) }
  .spec-row{ display:grid; grid-template-columns:minmax(96px, 1fr) 2.4fr; gap:16px;
             padding:max(8px, calc(11 * var(--u))) 0;
             border-top:1px solid var(--hairline); }
  .spec-row:last-child{ border-bottom:1px solid var(--hairline) }
  .spec dd{ display:flex; justify-content:space-between; gap:1em }
}

@layer components {
  .display{ font-weight:400; line-height:1;
            background:var(--grad);
            -webkit-background-clip:text; background-clip:text;
            -webkit-text-fill-color:transparent; color:transparent; }
  .display, .b-read{ padding-bottom:.08em }

  .note{ color:var(--ink) }

  .b-read{ position:relative; font-size:var(--fs-24); line-height:1;
           background:var(--grad);
           -webkit-background-clip:text; background-clip:text;
           -webkit-text-fill-color:transparent; color:transparent;
           opacity:var(--val,0);
           transform:translateY(calc((1 - var(--val,0)) * .22em)); }
  .callout.is-anim .b-read{ filter:blur(calc((1 - var(--val,0)) * 7px)) }
  .b-val, .b-unit{ display:block }

  .card-title{ font-size:var(--fs-60); line-height:1; text-align:center;
               background:var(--grad);
               -webkit-background-clip:text; background-clip:text;
               -webkit-text-fill-color:transparent; color:transparent; }
  .card-title span{ display:block }
  .card-note{ font-size:var(--fs-14); line-height:calc(17 / 14); text-align:center; color:var(--ink); }

  .card-act{ display:flex; gap:4px; align-items:stretch }
  .chip{ flex:1 1 auto; display:flex; align-items:center;
         padding:8px 48px 8px 16px;
         background:var(--ov); border-radius:var(--r);
         font-size:var(--fs-14); font-weight:500; line-height:calc(17 / 14);
         color:var(--ink); white-space:nowrap; }
  .pill-act{ display:flex; gap:4px; align-items:center }
  .pill-act .chip{ flex:none }
  .sq{ flex:none; width:32px; height:32px;
       display:flex; align-items:center; justify-content:center;
       background:var(--ink); color:var(--plate);
       border-radius:var(--r); pointer-events:auto;
       transition:transform 160ms var(--ease-strong); }
  .sq:active{ transform:scale(.94) }
  @media (hover:hover) and (pointer:fine){ .sq:hover svg{ transform:translateX(1.5px) } }
  .sq svg{ transition:transform 200ms var(--ease-strong) }

  .spec dt{ font-size:var(--fs-14); font-weight:500; color:var(--ink) }
  .spec dd{ font-size:var(--fs-14); color:var(--ink) }
  .spec dd span{ opacity:.5 }
  .spec-act{ width:min(720px, 100%) }
  .spec-act .chip{ flex:1; background:var(--ink); color:var(--plate); }

  .skip{ position:fixed; top:8px; left:8px; z-index:100; padding:10px 14px;
         background:var(--w); color:var(--k); font-size:var(--fs-14);
         border-radius:var(--r); transform:translateY(-200%); }
  .skip:focus{ transform:none }

  canvas.plate{ opacity:0; transition:opacity 420ms ease }
  canvas.plate.is-live{ opacity:1 }
}

@layer motion {
  .scr{ opacity:calc(var(--in,0) * (1 - var(--out,0)));
        transform:translateY(calc((1 - var(--in,0)) * 26px + var(--out,0) * -40px)); }
  .scr.is-anim{ filter:blur(calc((1 - var(--in,0)) * 6px + var(--out,0) * 12px)); }
  .scr.is-hidden{ visibility:hidden }
  .scr--1{ --in:1 }

  .callout{ --val: clamp(0, calc(var(--cin,0) / .45), 1);
            --draw:clamp(0, calc((var(--cin,0) - .40) / .60), 1); }
  .is-ready .scr--1 .callout{ --cin:1; transition:--cin 1500ms var(--ease-expo) 320ms; }

  .spec-row, .spec-act{
    --t-row:clamp(0, calc((var(--tail,0) - var(--i,0) * .06) / .62), 1);
    --w-row:calc(var(--t-row) * var(--t-row) * (3 - 2 * var(--t-row)));
    opacity:var(--w-row);
    transform:translateY(calc((1 - var(--w-row)) * 24px)); }
  .outro.is-hidden{ visibility:hidden }

  .js .scr--1 > *, .js .pill{ opacity:0; filter:blur(10px); transform:translateY(14px) }
  .is-ready .scr--1 > *, .is-ready .pill{
    opacity:1; filter:none; transform:none;
    transition:opacity 900ms var(--ease-expo), filter 900ms var(--ease-expo), transform 900ms var(--ease-expo); }
  .is-ready .scr--1 > :nth-child(2){ transition-delay:80ms }
  .is-ready .scr--1 > :nth-child(3){ transition-delay:160ms }
  .is-ready .scr--1 > :nth-child(4){ transition-delay:240ms }
  .js .scr--1 > .callout{ opacity:1; filter:none; transform:none }
  .is-ready .pill{ transition-delay:320ms }
  .is-settled .scr--1 > *, .is-settled .pill{ opacity:1; filter:none; transform:none; transition:none; }
  .is-settled .scr--1 .callout{ --cin:1; transition:none }
}

@layer utilities {
  @media (prefers-reduced-motion:reduce){
    .scr, .spec-row, .spec-act, .cutout, .b-read{ transform:none !important; filter:none !important }
    .callout{ transform:none !important }
    .ring circle{ stroke-dashoffset:0 }
    .is-ready .scr--1 > *, .is-ready .pill{ transition-duration:1ms }
    canvas.plate{ transition:none }
    .sq{ transition:none }
  }

  @media (max-width:767px){
    :root{ --runway:auto; --gutter:16px }
    .reveal, .cut-wrap{ display:none }
    .chrome{ position:static; pointer-events:auto }
    .scr{ position:static; inset:auto; min-height:auto; padding:12vh var(--gutter);
          opacity:1 !important; transform:none !important; filter:none !important;
          visibility:visible !important;
          display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
    .scr--1{ min-height:92svh; justify-content:flex-end; padding-top:calc(24px + 56px) }
    .display, .note, .card, .callout{ position:static; inset:auto; transform:none }
    .display--fin{ white-space:normal; text-align:left }
    .note{ width:100% }
    .card{ width:100%; margin-top:8px }
    .callout{ flex-direction:row !important; align-items:center; gap:12px }
    .badge{ width:72px }
    .ring circle{ stroke-dashoffset:0 }
    .b-read{ opacity:1 !important; transform:none !important; filter:none !important }
    .outro{ position:static; inset:auto; padding:12vh var(--gutter); visibility:visible !important; align-items:flex-start; }
    .spec-row, .spec-act, .display--fin{ opacity:1 !important; transform:none !important }
    .outro{ transform:none !important; gap:32px }
    .outro-foot{ width:100% }
    .chrome, .outro{ position:relative; z-index:1 }
    .stage::after{ content:''; position:absolute; inset:0;
                   background:linear-gradient(180deg, rgba(3,3,3,.55), rgba(3,3,3,.92)); }
    .runway{ display:none }
  }

  html:not(.js) .chrome{ position:static; pointer-events:auto }
  html:not(.js) .scr{ position:static; inset:auto; min-height:auto; padding:12vh var(--gutter);
                      opacity:1; transform:none; filter:none; visibility:visible;
                      display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
  html:not(.js) .scr--1{ min-height:88svh; justify-content:flex-end }
  html:not(.js) .display,
  html:not(.js) .note,
  html:not(.js) .card,
  html:not(.js) .callout{ position:static; inset:auto }
  html:not(.js) .display--fin{ white-space:normal; text-align:left; transform:none; opacity:1 }
  html:not(.js) .callout{ display:flex; flex-direction:row; align-items:center; gap:12px; --cin:1 }
  html:not(.js) .badge{ width:72px }
  html:not(.js) .ring circle{ stroke-dashoffset:0 }
  html:not(.js) .b-read{ opacity:1; transform:none; filter:none }
  html:not(.js) .pill{ opacity:1; filter:none; transform:none }
  html:not(.js) .reveal,
  html:not(.js) .cut-wrap,
  html:not(.js) .runway{ display:none }
  html:not(.js) .stage::after{ content:''; position:absolute; inset:0;
                               background:linear-gradient(180deg, rgba(3,3,3,.55), rgba(3,3,3,.92)); }
  html:not(.js) .outro{ position:static; inset:auto; visibility:visible; padding:12vh var(--gutter);
                         align-items:flex-start; transform:none; gap:32px }
  html:not(.js) .spec-row,
  html:not(.js) .spec-act{ opacity:1; transform:none }
  html:not(.js) .outro-foot{ width:100% }
  html:not(.js) .chrome,
  html:not(.js) .outro{ position:relative; z-index:1 }
}