/* ═══════════════════════════════════════════════════════════════════════
   Gestu — BASE: reset, canvas, texture, typography, utilities, boot
   ═══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--obsidian);
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--obsidian);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-synthesis-weight: none;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, dl, dd, dt, ol, ul, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection {
  background: color-mix(in srgb, var(--gold) 32%, transparent);
  color: var(--gold-bright);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── SCROLLBAR — a milled channel, not a browser default ─────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--obsidian); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--hairline), #1A2231);
  border-radius: var(--r-pill);
  border: 3px solid var(--obsidian);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

/* ── SKIP LINK ───────────────────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  translate: -50% -160%;
  z-index: 200;
  padding: 0.7rem 1.4rem;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--gold-ink);
  font-size: var(--t-small);
  font-weight: 700;
  transition: translate var(--dur-mid) var(--ease-forge);
}
.skip-link:focus-visible { translate: -50% 0; }

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL TEXTURE — SVG turbulence noise over obsidian gradients
   ═══════════════════════════════════════════════════════════════════════ */
.texture {
  position: fixed;
  inset: 0;
  z-index: var(--z-texture);
  pointer-events: none;
}

.texture__noise {
  position: absolute;
  inset: -50%;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='360' height='360' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 360px 360px;
  animation: grain 6s steps(6) infinite;
  mix-blend-mode: overlay;
}
@keyframes grain {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-3%, 2%, 0); }
  40%  { transform: translate3d(2%, -3%, 0); }
  60%  { transform: translate3d(-2%, -2%, 0); }
  80%  { transform: translate3d(3%, 1%, 0); }
}

.texture__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 70% at 50% -8%, transparent 40%, color-mix(in srgb, #000 62%, transparent) 100%),
    radial-gradient(90% 60% at 50% 108%, color-mix(in srgb, #000 55%, transparent), transparent 70%);
}

.texture__scan {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, #fff 1.5%, transparent) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: soft-light;
  /* Phone-class scanlines, not a CRT grid on a 27" display. */
  background-size: 1px 4px;
}
@media (min-width: 900px) {
  .texture__scan { opacity: 0.28; }
}

@media (prefers-reduced-motion: reduce) {
  .texture__noise { animation: none; }
}

/* ── SCROLL PROGRESS — a drawn rim ──────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 20;
  background: color-mix(in srgb, var(--hairline) 45%, transparent);
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright) 45%, var(--frost));
  box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 55%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
   TYPOGRAPHY PRIMITIVES
   ═══════════════════════════════════════════════════════════════════════ */
.mono { font-family: var(--f-mono); font-feature-settings: "zero" 1; }

.serif {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.004em;
}

.gold { color: var(--gold); }
.frost { color: var(--frost); }

.h2 {
  /* Authority face for the statement; the rune-metal Cinzel is reserved for
     the short accent clause beneath it, where inscriptional caps earn their
     weight instead of fighting the sentence. */
  font-family: var(--f-sans);
  font-size: var(--t-h2);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.032em;
  color: var(--ink);
  text-wrap: balance;
}
.h2 .serif { font-size: 1.1em; letter-spacing: 0.004em; }

.eyebrow {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.9;
}

.head { max-width: 46rem; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .head__lede { margin-inline: auto; }
.head__lede {
  margin-top: 1.15rem;
  max-width: 38rem;
  color: var(--ink-2);
  font-size: var(--t-lede);
  line-height: 1.66;
}
.head > .eyebrow { margin-bottom: 1.05rem; }

/* Engraved rune-metal gradient on the emissive accents */
.hero__title-line--serif,
.h2 .gold,
.foot__wordmark,
.boot__brand {
  background: linear-gradient(96deg, var(--gold-deep) 0%, var(--gold-bright) 34%, var(--gold) 58%, var(--frost) 128%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.boot__brand { filter: drop-shadow(0 0 18px var(--gold-a24)); }

/* ── LAYOUT SHELL ───────────────────────────────────────────────────── */
.shell {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ═══════════════════════════════════════════════════════════════════════
   REVEAL — GSAP owns the final state; JS-off keeps everything visible
   ═══════════════════════════════════════════════════════════════════════ */
html.js .reveal { opacity: 0; }
html.js .reveal.is-lit { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BOOT SEQUENCE
   ═══════════════════════════════════════════════════════════════════════ */
.boot {
  position: fixed;
  inset: 0;
  z-index: var(--z-boot);
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 45% at 50% 42%, color-mix(in srgb, var(--gold) 7%, transparent), transparent 70%),
    var(--obsidian-void);
  transition: opacity var(--dur-slow) var(--ease-deep), visibility var(--dur-slow);
}
/* The overlay is progressive enhancement: it only exists to cover the first
   paint when scripting is live enough to dismiss it. Without JS it must never
   appear, or the page reads as a permanent loading screen. */
html:not(.js) .boot { display: none; }
.boot.is-done { opacity: 0; visibility: hidden; }

.boot__inner { display: grid; justify-items: center; gap: 0.85rem; padding: 2rem; text-align: center; }

.boot__rim .rim { width: clamp(96px, 20vw, 132px); height: auto; }
.boot__rim .rim__ring {
  fill: none;
  stroke: var(--gold-a24);
  stroke-width: 1.25;
  stroke-dasharray: 251;
  stroke-dashoffset: 251;
  animation: rimDraw 1.5s var(--ease-forge) 0.15s forwards;
}
.boot__rim .rim__core {
  fill: color-mix(in srgb, var(--frost) 70%, transparent);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--frost) 70%, transparent));
  opacity: 0;
  animation: corePulse 1.9s ease-in-out 0.4s infinite;
}
@keyframes rimDraw { to { stroke-dashoffset: 0; } }
@keyframes corePulse {
  0%, 100% { opacity: 0.35; transform: scale(0.92); transform-origin: 60px 60px; }
  50%      { opacity: 1;    transform: scale(1.06); transform-origin: 60px 60px; }
}

.boot__brand {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.boot__line {
  font-size: var(--t-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink-3);
  min-height: 1.2em;
}
.boot__caret {
  display: inline-block;
  width: 0.55em; height: 1em;
  margin-left: 0.35em;
  translate: 0 0.13em;
  background: var(--gold);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.boot__meter {
  width: min(46vw, 230px);
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--hairline);
  overflow: hidden;
}
.boot__meter span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright), var(--frost));
  box-shadow: 0 0 10px var(--gold-a40);
}
.boot__hash {
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--ink-4);
  max-width: min(88vw, 30rem);
  line-height: 1.7;
}
.boot__hash b { color: var(--sage); }

@media (prefers-reduced-motion: reduce) {
  .boot { display: none; }
}