/* ============================================================
   intro.css — premium "boot" intro, themed dark. The headline
   gooey-morphs through the layers, then settles into the
   positioning line and hands off to the selector.
   ============================================================ */
#intro-loader {
  position: fixed; inset: 0; z-index: 9000; overflow: hidden;
  background: #0a0a0d; color: var(--ink-100);
}
#intro-loader::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 6;
  background: radial-gradient(120% 100% at 50% 50%, transparent 58%, rgba(0,0,0,0.62));
}

/* ---------- meta layer (editorial, static) ---------- */
#meta-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.18em; }
.meta { position: absolute; font-size: 11px; line-height: 1.6; color: var(--ink-300); }
.meta--logo { top: 26px; left: 28px; font-family: var(--font-art); font-size: 26px; letter-spacing: 0.02em; color: var(--ink-100); }
.meta--logo b { color: var(--orange-500); }
.meta--logo i { color: var(--acid-500); font-style: normal; }
.meta--nav { top: 28px; right: 28px; text-align: right; display: flex; flex-direction: column; gap: 0.4rem; }
.meta--nav span { color: var(--ink-500); }
.meta--id { top: 132px; right: 28px; text-align: right; color: var(--ink-500); }
.meta--id b { color: var(--ink-100); font-weight: 400; display: block; margin-bottom: 0.3rem; letter-spacing: 0.24em; }
.meta--desc { bottom: 24px; left: 28px; color: var(--ink-300); line-height: 1.9; }
.meta--coord { top: 50%; left: 28px; translate: 0 -50%; color: var(--ink-500); writing-mode: vertical-rl; letter-spacing: 0.3em; }
.meta--status { bottom: 24px; right: 28px; color: var(--ink-500); display: flex; align-items: center; gap: 0.5rem; }
.meta--status i { width: 6px; height: 6px; border-radius: 50%; background: var(--acid-500); box-shadow: 0 0 8px var(--acid-500);
  animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
@media (max-width: 720px) { .meta--desc, .meta--id, .meta--nav, .meta--coord { display: none; } }

/* ---------- center stage ---------- */
.intro-stage { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; }

/* cap-height unit for sizing glyphs exactly to the caps (em fallback ~Anton) */
:root { --cap: 0.73em; }
@supports (height: 1cap) { :root { --cap: 1cap; } }

/* paused state (Tweaks → Pause intro): freeze every intro animation */
#intro-loader.is-paused, #intro-loader.is-paused * { animation-play-state: paused !important; }

/* gooey morphing headline */
.gooey { position: absolute; animation: gooey-in 0.7s var(--ease-out) both;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,0.55)); }
@keyframes gooey-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.gooey__defs { position: absolute; width: 0; height: 0; }
.gooey__stage { position: relative; display: grid; place-items: center; }
.gooey__t {
  position: absolute; white-space: nowrap; user-select: none; text-align: center;
  font-family: var(--font-art); text-transform: uppercase; letter-spacing: 0.01em;
  font-size: clamp(3rem, 11vw, 11rem); line-height: 1;
  color: var(--ink-100);
}
/* keep the morph clean: no glyph glow halos bleeding through the goo filter */
.gooey .mglyph, .gooey .mglyph--spark, .gooey .mglyph--heart, .gooey .mglyph--zero { filter: none; }

/* crisp settle headline */
.intro-hero {
  position: absolute; text-align: center; will-change: transform, opacity;
  font-family: var(--font-art); text-transform: uppercase;
  font-size: clamp(2.4rem, 7.5vw, 7.5rem); line-height: 0.92; letter-spacing: 0.005em; color: var(--ink-100);
}
.intro-hero .l2 { color: var(--orange-500); }

/* ---------- editorial statement frame (intro settles into this) ---------- */
.manifesto {
  position: absolute; inset: 0; display: grid; place-items: center;
  animation: gooey-in 0.6s var(--ease-out) both;
}
.manifesto__type {
  margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.02em;
  font-family: var(--font-art); font-weight: 400; text-transform: uppercase; text-align: left;
  font-size: clamp(2.4rem, 9vw, 8rem); line-height: 0.92; letter-spacing: var(--stair-track, 0.005em); color: var(--ink-100);
}
/* flush-left editorial hierarchy: escalating size top→bottom (PRODUCTS smaller,
   STORIES bigger, & CODE biggest) — clean stacked emphasis. */
.manifesto__line { position: relative; display: block; }
.manifesto__line:nth-child(1) { font-size: calc(var(--line1-size, 1) * 1em); }
.manifesto__line:nth-child(2) { font-size: calc(var(--line2-size, 1) * 1em); }
.manifesto__line:nth-child(3) { font-size: calc(var(--line3-size, 1) * 1em); }
.ml-in { display: inline-block; will-change: transform; }
/* arrange mode (Tweaks → Hold statement): freeze entrance, drag to position */
.manifesto.is-arrange .manifesto__line { animation: none; opacity: 1; transform: none; filter: none; }
.manifesto.is-arrange .manifesto__line .ml-in { cursor: grab; outline: 1px dashed rgba(244,241,234,0.25); outline-offset: 0.08em; }
.manifesto.is-arrange .manifesto__line .ml-in:active { cursor: grabbing; }
.manifesto__hint {
  position: absolute; left: 50%; bottom: 64px; translate: -50% 0;
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--acid-400);
}
.manifesto__line {
  display: block; white-space: nowrap;
  opacity: 0; transform: translateY(30px); filter: blur(7px);
  animation: line-rise 0.75s var(--ease-out) var(--d, 0s) both;
}
@keyframes line-rise { to { opacity: 1; transform: none; filter: blur(0); } }

/* glyphs slotted in as true letter replacements: cap-height, baseline-set,
   tucked with negative margins for proper kerning, filled to match weight. */
/* glyphs seat within the letters' cap-height (baseline-aligned, optically
   centred via height ~ caps — no vertical offset). */
/* PROPER cap-height fit: size each glyph to the font's cap height via the CSS
   `cap` unit (em fallback for Anton), baseline-aligned so the ink spans
   baseline→cap exactly like an uppercase letter. Icon art fills its viewBox so
   cap-height = visible height. No per-glyph magic numbers. */
.mglyph {
  display: inline-block; height: var(--cap); width: auto; vertical-align: baseline;
  margin: 0 0.015em; transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0.03em 0.05em rgba(0,0,0,0.55));
}
.mglyph--spark { color: var(--orange-500);
  filter: drop-shadow(0 0 0.28em rgb(var(--orange-glow) / 0.5)) drop-shadow(0 0.03em 0.05em rgba(0,0,0,0.5)); }
.mglyph--heart { color: var(--orange-500);
  filter: drop-shadow(0 0 0.28em rgb(var(--orange-glow) / 0.45)) drop-shadow(0 0.03em 0.05em rgba(0,0,0,0.5)); }
.mglyph--zero { color: var(--acid-500);
  filter: drop-shadow(0 0 0.12em rgb(var(--acid-glow) / 0.3)) drop-shadow(0 0.03em 0.05em rgba(0,0,0,0.5)); }
/* animate the glyphs ONLY in the settled statement frame — during the gooey
   morph they stay static so they don't break the morphism. */
.manifesto .mglyph--spark { animation: glyph-spin 16s linear infinite; }
.manifesto .mglyph--heart { animation: glyph-beat 2.6s var(--ease-inout) infinite; }
/* CODE slash: repeatedly draws in then sweeps out (terminal feel) */
.manifesto .mglyph--zero .zero-slash {
  stroke-dasharray: 20; stroke-dashoffset: 20;
  animation: slash-draw 2.6s var(--ease-inout) infinite;
}
@keyframes slash-draw {
  0% { stroke-dashoffset: 20; }
  38% { stroke-dashoffset: 0; }
  72% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -20; }
}

/* terminal "code rain" inside the CODE zero */
.zero-term { position: relative; display: inline-block; }
.zero-term .mglyph--zero { position: relative; z-index: 2; }
.zero-rain {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
  clip-path: circle(39% at 50% 50%); display: flex; justify-content: center; align-items: flex-start;
}
.zero-rain b {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.055em; line-height: 1.5;
  width: 3.4em; word-break: break-all; text-align: center; letter-spacing: 0.32em;
  color: var(--acid-400); opacity: 0.42;
  animation: zero-rain 2.6s linear infinite;
}
@keyframes zero-rain { from { transform: translateY(-46%); } to { transform: translateY(6%); } }
@media (prefers-reduced-motion: reduce) { .zero-rain b { animation: none; } }
@keyframes glyph-spin { to { transform: rotate(360deg); } }
@keyframes glyph-beat { 0%,100% { transform: scale(1); } 45% { transform: scale(1.1); } }

/* editorial meta chrome in the corners */
.manifesto__meta { position: absolute; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-500); opacity: 0; animation: meta-in 0.8s var(--ease-out) 0.5s forwards; }
.manifesto__meta--tl { top: 30px; left: 32px; }
.manifesto__meta--tr { top: 30px; right: 32px; color: rgb(var(--acid-glow) / 0.7); }
.manifesto__meta--bl { bottom: 30px; left: 32px; }
.manifesto__meta--br { bottom: 30px; right: 32px; display: flex; align-items: center; gap: 0.5rem; }
@keyframes meta-in { to { opacity: 1; } }
@media (max-width: 680px) { .manifesto__meta { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .manifesto__line, .manifesto__meta { animation: none; opacity: 1; transform: none; filter: none; }
  .mglyph--spark, .mglyph--heart { animation: none; }
  .manifesto .mglyph--zero .zero-slash { animation: none; stroke-dashoffset: 0; }
}

/* M/Z identity mark (gooey resolves into this) */
.intro-mark { font-size: clamp(4rem, 16vw, 16rem); letter-spacing: 0.02em; line-height: 1; will-change: transform, opacity; }
.intro-mark b { color: var(--orange-500); }
.intro-mark .sep { color: var(--ink-500); margin: 0 0.04em; }
.intro-mark i { color: var(--acid-500); font-style: normal; }

/* ---------- skip ---------- */
.intro-skip {
  position: absolute; bottom: 24px; left: 50%; translate: -50% 0; z-index: 7; pointer-events: auto;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-500); background: none; border: none; cursor: pointer; transition: color 0.3s;
}
.intro-skip:hover { color: var(--ink-100); }

/* === art-pass 2026-06-12 === */
/* the skip control must be unmistakable the moment keyboard focus lands */
.intro-skip:focus-visible {
  outline: 2px solid #c6f135;
  outline-offset: 4px;
  background: rgba(198, 241, 53, 0.12);
  color: #f5eddf;
}