/* ============================================================
   SYNERGY 420 — assembly-line intro (index.html only)
   Dark industrial overture before the editorial page. The page
   content (.page-main, opaque) scrolls up over the fixed canvas.
   Everything is namespaced .intro-* so it can't collide with
   styles.css (.eyebrow, .brand, .cta, .hint were the risks).
   Scroll length = .intro-scroll-space height; the last 100vh is
   the "curtain" — the landing tableau completes one viewport
   before the content arrives (see js/intro.js).
   ============================================================ */

:root{
  /* dark set in the site's own key: ink-forest void, LIME signal accents
     (same signal color as the editorial page), pale instrument text */
  --void:#0a0e0b; --pale:#e7ece7; --muted:#8a948c; --acc:#bfe84e;
  --mono:"JetBrains Mono", ui-monospace, monospace;
}

#gl{ position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block; background:var(--void); }
.intro-scroll-space{ position:relative; height:780vh; z-index:1; pointer-events:none; }

/* the real page curtains up over the fixed canvas */
.page-main{ position:relative; z-index:10; background:var(--bone); }

/* intro chrome sits above the canvas but UNDER the page (z 5 < 10):
   the incoming content physically covers it — no fade choreography needed */
.intro-hud{
  position:fixed; inset:0 0 auto 0; z-index:5; pointer-events:none;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:22px 26px; font-family:var(--mono); color:var(--pale);
}
.intro-brand{ font-weight:600; letter-spacing:.16em; font-size:12px; }
.intro-brand b{ color:var(--acc); }
.intro-instrument{ text-align:right; font-size:10.5px; line-height:1.7; letter-spacing:.14em; color:var(--muted); }
.intro-instrument .row{ display:flex; gap:10px; justify-content:flex-end; }
.intro-instrument .status{ color:var(--acc); font-weight:600; }
.intro-instrument .depth{ color:var(--pale); font-weight:600; }

.intro-reveal{
  position:fixed; left:50%; bottom:12vh; transform:translate(-50%,16px);
  z-index:5; text-align:center; width:min(560px,86vw); opacity:0;
  pointer-events:none; font-family:var(--mono); color:var(--pale);
}
.intro-eyebrow{
  font-family:var(--font-body); font-size:11px; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase; color:var(--acc); margin-bottom:14px;
}
/* the reveal speaks the site's display voice — Fraunces, site heading weight */
.intro-title{
  font-family:var(--font-display); font-weight:480; letter-spacing:-.02em;
  font-size:clamp(30px,5.4vw,54px); line-height:1.05; text-wrap:balance;
}
.intro-reveal .serif-i{ color:var(--acc); }
.intro-reveal p{ margin-top:16px; font-size:12px; letter-spacing:.06em; color:var(--muted); }
.intro-reveal .seen{
  font-family:var(--font-display); font-style:italic; font-weight:380;
  font-size:1.25em; color:var(--acc);
}

.intro-hint{
  position:fixed; left:50%; bottom:30px; transform:translateX(-50%); z-index:5;
  font-size:11px; letter-spacing:.28em; color:var(--muted); font-family:var(--mono);
  display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:none;
}
.intro-hint .arrow{ width:1px; height:26px; background:linear-gradient(var(--acc),transparent); }

.intro-loader{
  position:fixed; inset:0; z-index:40; display:grid; place-items:center;
  background:var(--void); transition:opacity .6s ease; font-family:var(--mono);
}
.intro-loader.hide{ opacity:0; pointer-events:none; }
.intro-loader .dot{ font-size:11px; letter-spacing:.3em; color:var(--muted); }

/* fixed nav stays hidden during the intro; js/intro.js lifts this
   as the page curtains in (coverage ≥ .7) */
.nav{
  transition: background .4s var(--ease-out), box-shadow .4s, padding .4s,
              opacity .45s ease, visibility .45s;
}
body.intro-live .nav{ opacity:0; visibility:hidden; pointer-events:none; }

/* watchdog fallback (.intro-failed) and one-per-session replay guard
   (.intro-skip): the page renders intro-less and fully usable */
.intro-failed #gl, .intro-skip #gl,
.intro-failed .intro-hud, .intro-skip .intro-hud,
.intro-failed .intro-reveal, .intro-skip .intro-reveal,
.intro-failed .intro-hint, .intro-skip .intro-hint,
.intro-failed .intro-loader, .intro-skip .intro-loader{ display:none !important; }
.intro-failed .intro-scroll-space, .intro-skip .intro-scroll-space{ height:0 !important; }
.intro-failed .nav, .intro-skip .nav{ opacity:1 !important; visibility:visible !important; pointer-events:auto !important; }

@media (max-width:640px){ .intro-instrument .row .k{ display:none; } }

@media (prefers-reduced-motion: reduce){
  /* static landed tableau, one viewport tall, then the page */
  .intro-scroll-space{ height:100svh; }
  /* nav never hides, and stays legible over the dark frame */
  body.intro-live .nav{ opacity:1; visibility:visible; pointer-events:auto; }
  html:not(.intro-failed):not(.intro-skip) .nav{
    background: rgba(242, 238, 228, 0.88);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--line);
  }
}