:root{
    --bg:#0a0a0c;
    --bg-2:#111116;
    --ink:#f4f2ee;
    --ink-dim:#8b8894;
    --accent:#ff3b2f;      /* vivid signal-red */
    --accent-2:#ffe14d;    /* electric yellow */
    --accent-3:#3b6bff;    /* deep blue */
    --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
    --display:"Arial Black","Segoe UI",system-ui,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:var(--sans);overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none}

  /* film grain / noise overlay */
  body::after{
    content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
    background-image:repeating-radial-gradient(circle at 0 0, #fff 0, #fff .5px, transparent .5px, transparent 3px);
    background-size:3px 3px;
  }

  /* ---------- Lab chrome ---------- */
  .lab-back,.lab-note{
    position:fixed;z-index:9999;bottom:16px;
    font-family:var(--mono);font-size:11px;letter-spacing:.02em;
    background:rgba(255,255,255,.06);color:var(--ink);text-decoration:none;
    padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(6px);
  }
  .lab-back{left:16px}
  .lab-note{right:16px;pointer-events:none}
  .lab-note b{color:var(--accent-2);font-weight:600}
  .lab-back:hover{background:rgba(255,255,255,.14)}

  /* ---------- minimal top chrome ---------- */
  .brandbar{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;justify-content:space-between;
    align-items:center;padding:18px clamp(16px,4vw,40px);mix-blend-mode:difference;pointer-events:none}
  .brandbar .mark{font-family:var(--mono);font-size:12px;letter-spacing:.4em;text-transform:uppercase;font-weight:700}
  .brandbar .idx{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:#fff}

  /* scroll progress */
  .progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);
    background:linear-gradient(90deg,var(--accent),var(--accent-2));z-index:70}
  @supports (animation-timeline: scroll()){
    .progress{animation:growX linear both;animation-timeline:scroll(root);}
  }
  @keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  .scroll-hint{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:60;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim)}
  .scroll-hint span{display:inline-block;animation:bob 1.8s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

  /* ---------- shared moment layout ---------- */
  .moment{min-height:100vh;display:grid;place-items:center;position:relative;padding:12vh clamp(16px,5vw,64px);z-index:2}
  .kicker{position:absolute;top:12vh;left:clamp(16px,5vw,64px);font-family:var(--mono);
    font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim)}
  .kicker b{color:var(--accent)}

  .giant{
    font-family:var(--display);font-weight:900;line-height:.82;letter-spacing:-.03em;
    text-transform:uppercase;margin:0;text-align:center;
    font-size:clamp(64px,20vw,320px);
  }
  .line{display:block;white-space:nowrap}

  /* per-character wrappers for cursor + reveal effects */
  .ch{display:inline-block;will-change:transform;transition:transform .18s ease-out}

  /* ---------- MOMENT 1: HERO — reveal from below on load, morph on scroll ---------- */
  #m1{background:radial-gradient(120vw 80vh at 50% 30%, #17171d, var(--bg) 70%)}
  #m1 .giant .line:nth-child(1){color:var(--ink)}
  #m1 .giant .line:nth-child(2){
    color:transparent;-webkit-text-stroke:2px var(--accent);text-stroke:2px var(--accent);
  }
  #m1 .giant .line:nth-child(3){color:var(--accent-2)}
  #m1 .sub{margin-top:4vh;font-family:var(--mono);font-size:clamp(12px,1.6vw,15px);
    letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);text-align:center}

  /* load reveal */
  .reveal .ch{transform:translateY(120%);opacity:0}
  .reveal.on .ch{transform:translateY(0);opacity:1;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .8s}

  /* scroll-driven squeeze of hero as you leave it */
  @supports (animation-timeline: view()){
    #m1 .giant{animation:heroExit linear both;animation-timeline:view();animation-range:exit 0% exit 100%;}
  }
  @keyframes heroExit{
    to{ transform:scale(.82) translateY(-6vh); filter:blur(2px); opacity:.15; letter-spacing:-.06em; }
  }

  /* ---------- MOMENT 2: overlapping blend words ---------- */
  #m2{background:var(--bg)}
  #m2 .stack{position:relative;display:grid;place-items:center}
  #m2 .word{
    grid-area:1/1;font-family:var(--display);font-weight:900;text-transform:uppercase;
    font-size:clamp(72px,22vw,300px);line-height:.8;letter-spacing:-.04em;mix-blend-mode:screen;
  }
  #m2 .w1{color:var(--accent)}
  #m2 .w2{color:var(--accent-3);transform:translate(6%,8%)}
  #m2 .w3{color:var(--accent-2);transform:translate(-5%,-7%)}
  @supports (animation-timeline: view()){
    #m2 .w1{animation:drift1 linear both;animation-timeline:view();animation-range:cover 10% cover 90%}
    #m2 .w2{animation:drift2 linear both;animation-timeline:view();animation-range:cover 10% cover 90%}
    #m2 .w3{animation:drift3 linear both;animation-timeline:view();animation-range:cover 10% cover 90%}
  }
  @keyframes drift1{from{transform:translate(-14%,0)}to{transform:translate(10%,0)}}
  @keyframes drift2{from{transform:translate(14%,10%)}to{transform:translate(-8%,4%)}}
  @keyframes drift3{from{transform:translate(4%,-12%)}to{transform:translate(-6%,-2%)}}
  #m2 .cap{position:absolute;bottom:14vh;font-family:var(--mono);font-size:clamp(12px,1.8vw,16px);
    letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-align:center;max-width:30ch}

  /* ---------- MOMENT 3: word-by-word scroll reveal statement ---------- */
  #m3{background:linear-gradient(180deg,var(--bg),#141018)}
  #m3 .statement{max-width:18ch;font-family:var(--display);font-weight:900;text-transform:uppercase;
    line-height:.92;letter-spacing:-.02em;font-size:clamp(40px,9vw,132px);text-align:center}
  #m3 .statement .w{display:inline-block;color:#2a2830;transition:color .4s}
  #m3 .statement .w.hot{color:var(--ink)}
  #m3 .statement .w.accent{color:var(--accent)}

  /* ---------- MOMENT 4: kinetic marquee bands ---------- */
  #m4{background:var(--bg);padding:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:2px;overflow:hidden}
  .band{white-space:nowrap;font-family:var(--display);font-weight:900;text-transform:uppercase;
    font-size:clamp(48px,12vw,150px);line-height:1;letter-spacing:-.02em;display:flex;width:max-content}
  .band span{padding:0 .25em}
  .band.a{color:transparent;-webkit-text-stroke:2px var(--ink);text-stroke:2px var(--ink)}
  .band.b{color:var(--accent)}
  .band.c{color:var(--accent-2)}
  .band .track{display:flex;animation:scrollL 22s linear infinite}
  .band.b .track{animation-direction:reverse;animation-duration:28s}
  .band.c .track{animation-duration:18s}
  @keyframes scrollL{to{transform:translateX(-50%)}}

  /* ---------- MOMENT 5: closing brand lockup ---------- */
  #m5{background:radial-gradient(100vw 70vh at 50% 60%, #1a0f0e, var(--bg) 75%);text-align:center}
  #m5 .lockup{display:grid;gap:5vh;place-items:center}
  #m5 .big{font-family:var(--display);font-weight:900;text-transform:uppercase;
    font-size:clamp(64px,18vw,260px);line-height:.82;letter-spacing:-.03em}
  #m5 .big .a{color:var(--accent)}
  #m5 .cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
  #m5 .cta a{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
    padding:14px 26px;border-radius:999px;border:1px solid rgba(255,255,255,.2);transition:.25s;pointer-events:auto}
  #m5 .cta a.solid{background:var(--accent);border-color:var(--accent);color:#fff}
  #m5 .cta a:hover{transform:translateY(-2px);background:rgba(255,255,255,.1)}
  #m5 .cta a.solid:hover{background:#ff5347}
  #m5 .foot{margin-top:6vh;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-dim)}

  /* ---------- reduced motion: everything static & legible ---------- */
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .reveal .ch{transform:none;opacity:1}
    .ch{transition:none}
    .scroll-hint span{animation:none}
    .band .track{animation:none}
    #m2 .w1,#m2 .w2,#m2 .w3{animation:none}
    #m3 .statement .w{color:var(--ink)}
    #m3 .statement .w.accent{color:var(--accent)}
    .progress{display:none}
  }


/* inline style= -> class (CSP-clean) */
.dgkine1{mix-blend-mode:difference;color:#fff}

.lab-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}