/*
    CINEMATIC VOID — deliberately single-theme. A film is not shown in light mode;
    this page commits to darkness as a design decision, not an omission.

    Type note: display = Monument Extended / Archivo Expanded class,
    body = General Sans / Satoshi class, data = Martian Mono / IBM Plex Mono.
    Currently on system faces + scaleX + tracking; webfonts land later.
  */
  :root{
    --void:#05060A;
    --star:#F4F6FB;
    --bright:#CBD3E1; /* reading tier for body copy over plates */
    --dim:#9AA4B8;
    --faint:#3A4054;
    --ion:#6BB6FF;
    --ember:#FFB454;
    --rail:rgba(138,147,166,0.25);
    --font-body: ui-sans-serif, "Helvetica Neue", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
  }
  *{ box-sizing:border-box; margin:0; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--void);
    color:var(--star);
    font-family:var(--font-body);
    overflow-x:hidden;
    line-height:1.6;
  }
  ::selection{ background:rgba(107,182,255,0.35); }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *, *::before, *::after{
      animation-duration:0.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.001ms !important;
    }
    .reveal{ opacity:1 !important; transform:none !important; }
  }

  canvas#stars{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }

  /* left mission rail */
  .rail{
    position:fixed; left:clamp(14px, 3vw, 40px); top:0; bottom:0; width:1px;
    background:var(--rail); z-index:5;
  }
  .rail-fill{
    position:absolute; top:0; left:0; width:1px; height:0%;
    background:linear-gradient(180deg, var(--ion), rgba(107,182,255,0.2));
    box-shadow:0 0 8px rgba(107,182,255,0.6);
  }
  .rail-marks{ position:fixed; left:calc(clamp(14px, 3vw, 40px) + 10px); top:0; bottom:0; z-index:5; pointer-events:none; }
  .rail-mark{
    position:absolute; font-family:var(--font-mono); font-size:9px; letter-spacing:0.18em;
    color:var(--faint); transform:translateY(-50%); transition:color 0.5s ease;
    white-space:nowrap;
  }
  .rail-mark.active{ color:var(--ion); }
  @media (max-width:720px){ .rail, .rail-marks{ display:none; } }

  /* ---------- scenes & plates ---------- */
  .scene{
    position:relative;
    overflow:clip; /* clip, not hidden — keeps position:sticky working inside */
  }
  .plate{
    position:absolute; left:0; right:0; top:-8%; bottom:-8%;
    z-index:1; pointer-events:none;
    will-change:transform;
  }
  .plate img{
    width:100%; height:100%;
    object-fit:cover; object-position:center;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }
  .plate::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(90deg, rgba(5,6,10,0.75), transparent 16%, transparent 84%, rgba(5,6,10,0.75)),
      radial-gradient(ellipse at center, transparent 42%, rgba(5,6,10,0.5) 100%);
  }

  /* hero: slow Ken Burns settle */
  .scene--hero .plate img{ animation: kenburns 26s cubic-bezier(0.16,1,0.3,1) both; }
  @keyframes kenburns{ from{ transform:scale(1.12); } to{ transform:scale(1); } }

  /* act 02: the cockpit holds while the words scroll over it */
  .scene--signal{ min-height:180vh; }
  .scene--signal .plate--sticky{
    position:sticky; top:0; left:auto; right:auto; bottom:auto;
    height:100vh; width:100%;
  }
  .scene--signal .act{ margin-top:-100vh; min-height:180vh; }

  /* ---------- act content ---------- */
  .act{
    position:relative; z-index:2;
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding:18vh clamp(22px, 10vw, 160px);
    max-width:1200px; margin:0 auto;
    /* tight layer defines stroke edges; wide layers lift text off busy plate detail */
    text-shadow:0 1px 2px rgba(5,6,10,0.95), 0 2px 10px rgba(5,6,10,0.85), 0 4px 36px rgba(5,6,10,0.9);
  }
  .act.center{ align-items:center; text-align:center; }
  .act.scrim::before{
    content:""; position:absolute; inset:6% -10%;
    background:radial-gradient(ellipse at center, rgba(5,6,10,0.55), transparent 68%);
    z-index:-1;
  }
  .act.low{ justify-content:flex-end; padding-bottom:10vh; }

  .kicker{
    font-family:var(--font-mono);
    font-size:clamp(10px, 1.1vw, 12px);
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--dim);
    margin-bottom:4vh;
  }
  .kicker b{ color:var(--ion); font-weight:500; }

  .display{
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.02em;
    line-height:1.04;
    text-wrap:balance;
  }
  .display .wide{
    display:inline-block;
    transform:scaleX(1.12);
    transform-origin:left center;
  }
  .center .display .wide{ transform-origin:center center; }

  /* display scale reduced ~45% per direction (2026-07-19) */
  .xxl{ font-size:clamp(26px, 5vw, 70px); }
  .xl{ font-size:clamp(19px, 3.1vw, 42px); }
  .lg{ font-size:clamp(15px, 2.3vw, 31px); }

  /* ion glow on display type; dark layers preserved (text-shadow doesn't merge with inherited) */
  .display .wide{
    text-shadow:
      0 1px 2px rgba(5,6,10,0.95), 0 2px 10px rgba(5,6,10,0.85),
      0 0 16px rgba(107,182,255,0.30), 0 0 44px rgba(107,182,255,0.14);
  }
  /* slow breathing shine on the wordmark — blurred glow layer with animated
     opacity (composited) instead of animating text-shadow (repaints every frame) */
  .scene--hero h1 .wide{ position:relative; }
  .scene--hero h1 .wide::after{
    content:attr(data-text);
    position:absolute; left:0; top:0; width:100%;
    color:var(--ion); filter:blur(16px);
    opacity:0.3; z-index:-1; pointer-events:none;
    animation:glowpulse 5.2s ease-in-out infinite;
  }
  @keyframes glowpulse{ 0%,100%{ opacity:0.22; } 50%{ opacity:0.55; } }
  /* 8-direction dark halo outline — lifts type off busy plates (act 03) */
  .outlined .wide{
    text-shadow:
      1.5px 0 0 rgba(3,4,8,0.95), -1.5px 0 0 rgba(3,4,8,0.95),
      0 1.5px 0 rgba(3,4,8,0.95), 0 -1.5px 0 rgba(3,4,8,0.95),
      1px 1px 0 rgba(3,4,8,0.95), -1px -1px 0 rgba(3,4,8,0.95),
      1px -1px 0 rgba(3,4,8,0.95), -1px 1px 0 rgba(3,4,8,0.95),
      0 0 18px rgba(107,182,255,0.25);
  }
  .lede .accent{ text-shadow:0 0 12px rgba(107,182,255,0.45); }
  .lede .ember{ text-shadow:0 0 12px rgba(255,180,84,0.45); }

  .lede{
    margin-top:5vh;
    max-width:38em;
    font-size:clamp(13px, 1.25vw, 16px);
    color:var(--bright);
    font-weight:400;
  }
  .lede strong{ color:var(--star); font-weight:600; }
  .lede .accent{ color:var(--ion); font-weight:500; }
  .lede .ember{ color:var(--ember); font-weight:500; }

  /* hero */
  #hero .sub{
    margin-top:4vh; font-size:clamp(13px, 1.4vw, 17px);
    color:var(--bright); font-weight:400; max-width:30em;
  }
  #hero .sub b{ color:var(--star); font-weight:600; }
  .scroll-cue{
    position:absolute; bottom:6vh; left:50%; transform:translateX(-50%);
    font-family:var(--font-mono); font-size:10px; letter-spacing:0.32em;
    color:var(--dim); text-transform:uppercase;
    animation:cue 2.6s ease-in-out infinite;
  }
  @keyframes cue{ 0%,100%{ opacity:0.35; transform:translateX(-50%) translateY(0); } 50%{ opacity:1; transform:translateX(-50%) translateY(6px); } }

  /* signal delay readout */
  .readout{
    margin-top:6vh;
    display:inline-flex; flex-direction:column; gap:6px;
    border:1px solid rgba(138,147,166,0.25);
    padding:18px 26px;
    background:rgba(5,6,10,0.55);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    align-self:flex-start;
  }
  .readout .label{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.26em; color:var(--dim); text-transform:uppercase; }
  .readout .value{
    font-family:var(--font-mono); font-weight:600;
    font-size:clamp(18px, 2.6vw, 32px);
    color:var(--ion);
    font-variant-numeric:tabular-nums;
    letter-spacing:0.04em;
    text-shadow:0 0 24px rgba(107,182,255,0.4);
  }
  .readout .caption{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.14em; color:var(--faint); }

  /* First Contact countdown — Mission 13 clock */
  .countdown{
    margin-top:7vh;
    display:inline-flex; flex-direction:column; gap:8px; align-items:center;
    border:1px solid rgba(255,180,84,0.28);
    padding:20px 34px;
    background:rgba(5,6,10,0.55);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  .countdown .cd-label{
    font-family:var(--font-mono); font-size:10px; letter-spacing:0.3em;
    color:var(--dim); text-transform:uppercase;
  }
  .countdown .cd-value{
    font-family:var(--font-mono); font-weight:600;
    font-size:clamp(20px, 3vw, 38px);
    color:var(--ember);
    font-variant-numeric:tabular-nums;
    letter-spacing:0.06em;
    text-shadow:0 0 22px rgba(255,180,84,0.45), 0 0 60px rgba(255,180,84,0.18);
  }
  .countdown .cd-caption{
    font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.2em;
    color:var(--faint); text-transform:uppercase;
  }

  .delay-table{ margin-top:5vh; display:flex; flex-direction:column; gap:0; max-width:34em; width:100%; }
  .delay-row{
    display:flex; justify-content:space-between; align-items:baseline; gap:24px;
    padding:14px 2px;
    border-bottom:1px solid rgba(138,147,166,0.14);
    font-size:clamp(12px, 1.25vw, 15px); color:var(--bright); font-weight:400;
  }
  .delay-row .place{ color:var(--star); }
  .delay-row .t{ font-family:var(--font-mono); font-size:0.85em; color:var(--dim); font-variant-numeric:tabular-nums; letter-spacing:0.06em; }
  .delay-row:last-child .t{ color:var(--ember); }
  .delay-row:last-child .place{ color:var(--ember); }

  /* reveal system */
  .reveal{
    opacity:0; transform:translateY(34px);
    transition:opacity 1.1s cubic-bezier(0.16,1,0.3,1), transform 1.1s cubic-bezier(0.16,1,0.3,1);
  }
  .reveal.in{ opacity:1; transform:none; }
  .reveal.d1{ transition-delay:0.12s; } .reveal.d2{ transition-delay:0.24s; } .reveal.d3{ transition-delay:0.36s; }

  /* closing */
  #closing .lede{ margin-left:auto; margin-right:auto; }
  .earth-for-now{
    margin-top:8vh;
    display:flex; flex-direction:column; gap:14px; align-items:center;
  }
  .earth-for-now .wordmark{
    font-weight:800; letter-spacing:0.34em; text-transform:uppercase;
    font-size:clamp(13px, 1.4vw, 16px); color:var(--star);
  }
  .earth-for-now .tag{
    font-family:var(--font-mono); font-size:10px; letter-spacing:0.3em;
    color:var(--dim); text-transform:uppercase;
  }
  .earth-for-now .tag .amber{ color:var(--ember); }

  .hr-light{
    width:min(280px, 40vw); height:1px; border:0; margin:0 auto;
    background:linear-gradient(90deg, transparent, rgba(138,147,166,0.5), transparent);
  }