/* ============================================================
   THS — native brand scroll site (v2)
   Built FOR the scroll, not converted from the deck.
   Tokens + @font-face come from deck.css (linked first).
   Every section owns the full viewport. Motion lives in brand.js.
   ============================================================ */

/* ---------- base / reset over deck.css ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }            /* Lenis owns smooth scroll */
html, body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body { width: 100%; }
img { display: block; max-width: 100%; }
::selection { background: var(--yellow); color: var(--ink); }

/* the display face from the brand book is a condensed Helvetica;
   fall back gracefully and tighten it hard like the deck does. */
:root {
  --pad: clamp(24px, 6vw, 120px);
  --maxw: 1500px;
}

/* ---------- generic section scaffold ---------- */
.sec {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(64px, 10vh, 140px) var(--pad);
  overflow: hidden;
}
.sec.paper { background: var(--paper); color: var(--ink); }
.sec.ink   { background: var(--ink);   color: var(--paper); }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; }

/* ---------- shared type ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: clamp(11px, 0.78vw, 14px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex; align-items: center; gap: 0.9em;
}
.eyebrow .tick { width: clamp(28px, 4vw, 64px); height: 1px; background: var(--yellow); display: inline-block; }
.sec.paper .eyebrow { color: var(--muted-dark); }

.display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: none;
}
.tagline { font-family: var(--tagline); font-weight: 400; }
.mono    { font-family: var(--mono); }

/* word-mask: each word rides inside an overflow-clip box */
.msk   { display: inline-block; overflow: hidden; vertical-align: top; }
.msk-i { display: inline-block; transform: translateY(116%); will-change: transform; }
.reveal-all .msk-i { transform: none !important; }

/* simple fade-rise primitive */
[data-rise] { opacity: 0; transform: translateY(28px); }
.reveal-all [data-rise] { opacity: 1 !important; transform: none !important; }

/* ============================================================
   1 — HERO  (full-bleed editorial, dark)
   ============================================================ */
#hero { min-height: 100vh; justify-content: flex-end; padding-bottom: clamp(40px, 7vh, 96px); }
#hero .bleed {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  /* slow cinematic push-in + barely-there drift — CSS so it never fights the scroll scrub on the img */
  animation: heroLive 18s ease-in-out infinite alternate;
}
@keyframes heroLive {
  0%   { transform: scale(1.00) translate(0, 0); }
  50%  { transform: scale(1.03) translate(-0.5px, 0.5px); }
  100% { transform: scale(1.06) translate(0.5px, -0.5px); }
}
@media (prefers-reduced-motion: reduce) { #hero .bleed { animation: none; } }
#hero .bleed img {
  width: 100%; height: 114%; object-fit: cover; object-position: center 18%;
  /* editorial grade: punchier contrast, slightly desaturated, deeper blacks */
  filter: contrast(1.1) saturate(0.9) brightness(0.94);
  will-change: transform;
}
#hero .scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* vignette — darken the edges so the lit figure separates from the dark ground */
    radial-gradient(115% 80% at 50% 34%, rgba(11,11,11,0) 38%, rgba(11,11,11,0.55) 100%),
    /* clean midground, strong floor for the wordmark, slight top for the eyebrow */
    linear-gradient(to top, rgba(11,11,11,0.96) 0%, rgba(11,11,11,0.62) 20%, rgba(11,11,11,0.05) 46%, rgba(11,11,11,0) 64%, rgba(11,11,11,0.40) 100%);
}
#hero .wrap { position: relative; z-index: 2; }
#markFixed {
  position: fixed; top: clamp(18px, 3vh, 38px); left: var(--pad); z-index: 30;
  height: clamp(14px, 1.4vw, 20px); width: auto; opacity: 0;
  pointer-events: none;
}
/* real wordmark lockup — huge, near-full-bleed (body overflow-x:hidden clips cleanly) */
#hero h1.display { margin: 0 0 0 -0.01em; line-height: 0; }
#hero .hero-wm { display: block; width: min(1500px, 95vw); height: auto; }
#hero .lede {
  margin-top: clamp(18px, 2.4vh, 34px);
  display: flex; align-items: baseline; gap: 1.4em; flex-wrap: wrap;
}
#hero .lede .t {
  font-family: var(--tagline);
  font-size: clamp(16px, 1.7vw, 27px);
  color: var(--paper);
  letter-spacing: 0.01em;
}
#hero .lede .meta { font-family: var(--mono); font-size: clamp(11px,0.8vw,13px); letter-spacing: 0.28em; color: var(--muted); text-transform: uppercase; }

.cue {
  position: absolute; right: var(--pad); bottom: clamp(20px,3.4vh,38px); z-index: 3;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.cue .ln { width: 1px; height: 46px; background: linear-gradient(var(--muted), transparent); position: relative; overflow: hidden; }
.cue .ln::after { content:""; position:absolute; left:0; top:-46px; width:1px; height:46px; background: var(--yellow); animation: drop 2.1s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes drop { 0%{transform:translateY(0)} 60%,100%{transform:translateY(92px)} }

/* ============================================================
   2 — MANIFESTO  (paper, line-masked statement)
   ============================================================ */
#manifesto { background: var(--paper); color: var(--ink); }
#manifesto .wrap { max-width: 1300px; }
#manifesto .stmt {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 5.2vw, 92px); line-height: 1.02; letter-spacing: -0.02em;
  margin-top: clamp(28px, 5vh, 64px); text-wrap: balance;
}
#manifesto .stmt .dim { color: var(--muted); }
#manifesto .stmt .hl  { color: var(--ink); }
#manifesto .foot {
  margin-top: clamp(36px, 7vh, 96px);
  display: flex; gap: clamp(28px, 5vw, 90px); flex-wrap: wrap;
  font-family: var(--body); color: var(--muted-dark); max-width: 760px;
  font-size: clamp(14px, 1.05vw, 18px); line-height: 1.62;
}
#manifesto .foot p { flex: 1 1 220px; }
#manifesto .foot b { color: var(--ink); font-weight: 600; }

/* ============================================================
   3 — HAMMER  (pinned, scrubbed hero product moment, ink)
   ============================================================ */
#hammer { padding: 0; }
#hammer .pin {
  position: relative; height: 100vh; width: 100%;
  display: grid; place-items: center; overflow: hidden;
  background:
    radial-gradient(58% 52% at 50% 46%, #3c3b35 0%, #232220 42%, var(--ink) 76%);
}
/* warm studio pool so the matte-black body separates from the dark ground */
#hammer .pin::before {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 47%;
  width: min(44vh, 460px); height: min(74vh, 720px); transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(228,219,198,0.16) 0%, rgba(228,219,198,0.05) 48%, rgba(228,219,198,0) 72%);
  filter: blur(8px); pointer-events: none;
}
#hammer .prod {
  position: relative; z-index: 2; height: min(82vh, 760px); width: auto;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,0.6));
  will-change: transform;
}
#hammer .ghost {
  position: absolute; z-index: 0; left: 50%; top: 50%;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(220px, 46vw, 880px); line-height: 1; color: #fff;
  opacity: 0.035; transform: translate(-50%,-50%); white-space: nowrap; letter-spacing: -0.04em;
}
#hammer .eyebrow { position: absolute; z-index: 4; top: clamp(40px,8vh,80px); left: var(--pad); }
#hammer .price { position: absolute; z-index: 4; top: clamp(40px,8vh,80px); right: var(--pad);
  font-family: var(--display); font-weight: 700; font-size: clamp(34px,4vw,72px); color: var(--paper); }
/* spec callouts pinned around the product */
.spec {
  position: absolute; z-index: 4; max-width: 280px; opacity: 0;
  font-family: var(--body);
}
.spec .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--yellow); display:block; margin-bottom: 6px; }
.spec .v { font-size: clamp(15px, 1.3vw, 21px); color: var(--paper); line-height: 1.35; }
.spec .v .sub { display:block; color: var(--muted); font-size: 0.8em; margin-top: 4px; }
#spec-1 { left: var(--pad);  top: 38%;  text-align: left; }
#spec-2 { right: var(--pad); top: 38%;  text-align: right; }
#spec-3 { right: var(--pad); bottom: clamp(48px,12vh,120px); text-align: right; }
#spec-4 { left: var(--pad);  bottom: clamp(48px,12vh,120px); text-align: left; }

/* caliper leader line that draws out from each callout (teardown annotation) */
.spec .lead { display: block; height: 1px; background: var(--yellow); opacity: 0.75; margin-bottom: 12px; transform: scaleX(0); width: clamp(40px, 8vw, 130px); }
.spec.left  .lead { transform-origin: left; }
.spec.right .lead { transform-origin: right; margin-left: auto; }
.reveal-all .spec .lead { transform: scaleX(1) !important; }

/* mode indicator (vibrate / tap) */
.modeTag { position: absolute; z-index: 4; left: 50%; bottom: clamp(26px,6vh,60px); transform: translateX(-50%);
  font-family: var(--mono); font-size: clamp(11px,0.9vw,14px); letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.modeTag .mv { color: var(--yellow); }

/* vibrate / tap ring demo — CSS-animated; the scrub just toggles opacity (live only) */
.rings { position: absolute; z-index: 1; left: 50%; top: 47%; width: min(56vh,520px); height: min(56vh,520px);
  transform: translate(-50%,-50%); border-radius: 50%; opacity: 0; pointer-events: none; }
.rings::before, .rings::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(239,208,39,0.45); }
.rings::before { animation: ringPulse 1.7s ease-out infinite; }
.rings::after  { animation: ringPulse 1.7s ease-out infinite; animation-delay: 0.85s; }
@keyframes ringPulse { 0% { transform: scale(0.46); opacity: 0.55; } 100% { transform: scale(1.12); opacity: 0; } }
.rings.tap::before { animation: tapPulse 0.5s cubic-bezier(.7,0,.3,1) infinite; }
.rings.tap::after  { animation: tapPulse 0.5s cubic-bezier(.7,0,.3,1) infinite; animation-delay: 0.25s; }
@keyframes tapPulse { 0% { transform: scale(0.6); opacity: 0; } 14% { opacity: 0.65; } 60%,100% { transform: scale(1.0); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rings::before, .rings::after { animation: none; } }

/* ============================================================
   4 — NAIL & SCREW  (entry duo, paper-deep)
   ============================================================ */
/* pinned product showcase — same treatment as #hammer (dark studio + scrub) */
#duo { padding: 0; background: var(--ink); }
#duo .pin {
  position: relative; height: 100vh; width: 100%; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(58% 52% at 50% 46%, #3c3b35 0%, #232220 42%, var(--ink) 76%);
}
#duo .pin::before {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 47%;
  width: min(52vh, 540px); height: min(72vh, 700px); transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(228,219,198,0.15) 0%, rgba(228,219,198,0.04) 50%, rgba(228,219,198,0) 72%);
  filter: blur(8px); pointer-events: none;
}
#duo .prod { position: relative; z-index: 2; height: min(72vh, 640px); width: auto;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,0.6)); will-change: transform; }
#duo .ghost { position: absolute; z-index: 0; left: 50%; top: 50%; font-family: var(--display); font-weight: 700;
  font-size: clamp(200px, 42vw, 760px); line-height: 1; color: #fff; opacity: 0.035;
  transform: translate(-50%,-50%); white-space: nowrap; letter-spacing: -0.04em; }
#duo .eyebrow { position: absolute; z-index: 4; top: clamp(40px,8vh,80px); left: var(--pad); }
#duo .price { position: absolute; z-index: 4; top: clamp(40px,8vh,80px); right: var(--pad);
  font-family: var(--display); font-weight: 700; font-size: clamp(30px,3.4vw,60px); color: var(--paper); }
#duo .price small { font-family: var(--mono); font-weight: 400; font-size: 0.3em; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-left: 0.5em; }
#dspec-1 { left: var(--pad);  top: 38%; text-align: left; }
#dspec-2 { right: var(--pad); top: 38%; text-align: right; }
#dspec-3 { left: var(--pad);  bottom: clamp(48px,12vh,120px); text-align: left; }
#dspec-4 { right: var(--pad); bottom: clamp(48px,12vh,120px); text-align: right; }

/* ============================================================
   5 — PACKAGING  (full-bleed craft moment)
   ============================================================ */
#craft { background: #efece6; color: var(--ink); min-height: 112vh; justify-content: center; padding-left: 0; padding-right: 0; }
#craft .bleed { position: absolute; inset: -8% 0; z-index: 0; }
#craft .bleed img { width: 100%; height: 116%; object-fit: cover; object-position: center; will-change: transform; }
/* left-edge scrim so the overlaid copy stays legible over the busy packaging shot */
#craft .bleed::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(11,11,11,0.86) 0%, rgba(11,11,11,0.6) 30%, rgba(11,11,11,0) 58%);
}
#craft .wrap { position: relative; z-index: 2; padding: 0 var(--pad); pointer-events:none; }
#craft .panel { max-width: 520px; }
#craft .eyebrow { color: var(--muted-soft); }
#craft .stmt { font-family: var(--display); font-weight: 700; font-size: clamp(28px,4.4vw,72px); line-height: 1.02; letter-spacing:-0.02em; color: var(--paper); }
#craft .desc { margin-top: clamp(16px,2.4vh,28px); color: #cdc9bf; font-size: clamp(14px,1.05vw,18px); line-height: 1.62; max-width: 440px; }
#craft .desc b { color: #fff; }

/* ============================================================
   6 — THE RANGE  (catalog list, ink)
   ============================================================ */
#range { background: var(--ink); color: var(--paper); }
#range h2.display { font-size: clamp(34px,5vw,84px); margin-top: 22px; }
#range .rows { margin-top: clamp(30px,6vh,72px); border-top: 1px solid #2a2a26; }
#range .row {
  display: grid; grid-template-columns: 0.5fr 1.4fr 2.2fr 0.8fr; gap: clamp(12px,2vw,40px);
  align-items: baseline; padding: clamp(20px,3.2vh,40px) 0; border-bottom: 1px solid #2a2a26;
}
#range .row .no { font-family: var(--mono); color: var(--muted); font-size: clamp(11px,0.8vw,14px); letter-spacing: 0.2em; }
#range .row .nm { font-family: var(--display); font-weight: 700; font-size: clamp(28px,3.6vw,64px); line-height: 0.95; }
#range .row .ds { color: var(--muted); font-size: clamp(13px,1vw,17px); line-height: 1.5; }
#range .row .pr { font-family: var(--display); font-weight: 700; font-size: clamp(18px,1.8vw,32px); text-align: right; }
#range .row .pr.soon { font-family: var(--mono); font-weight: 400; font-size: clamp(11px,0.8vw,13px); letter-spacing: 0.2em; color: var(--yellow); text-transform: uppercase; }
#range .row.soon .nm { color: var(--muted); }

/* ============================================================
   7 — CLOSE  (dark, wordmark + access)
   ============================================================ */
#close { background: var(--ink); color: var(--paper); min-height: 100vh; justify-content: center; text-align: center; align-items: center; }
#close .mark { width: min(74vw, 760px); height: auto; opacity: 0.96; }
#close .line { font-family: var(--tagline); font-size: clamp(16px,1.8vw,28px); color: var(--muted); margin-top: clamp(26px,4vh,48px); }
#close .key {
  margin-top: clamp(34px,6vh,72px); display: inline-flex; align-items: center; gap: 18px;
  border: 1px solid #34342f; border-radius: 999px; padding: 14px 16px 14px 28px;
}
#close .key span { font-family: var(--mono); letter-spacing: 0.22em; text-transform: uppercase; font-size: clamp(11px,0.85vw,14px); color: var(--paper); }
#close .key b { background: var(--yellow); color: var(--ink); font-family: var(--mono); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: clamp(11px,0.85vw,13px); padding: 10px 20px; border-radius: 999px; }
#close .foot { position: absolute; bottom: clamp(20px,3vh,36px); left: 0; right: 0; padding: 0 var(--pad); display:flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }

/* --- The Key: email capture --- */
.keyform { margin-top: clamp(28px,5vh,56px); display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 540px; transition: opacity .4s, transform .4s; }
.keyform.gone { opacity: 0; transform: translateY(-10px); pointer-events: none; height: 0; margin: 0; overflow: hidden; }
.keyin { flex: 1 1 260px; min-width: 220px; background: transparent; border: 1px solid #34342f; color: var(--paper);
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; padding: 16px 20px; border-radius: 999px; outline: none; transition: border-color .3s; }
.keyin::placeholder { color: var(--muted); }
.keyin:focus { border-color: var(--yellow); }
.keybtn { flex: 0 0 auto; background: var(--yellow); color: var(--ink); border: none; cursor: pointer;
  font-family: var(--mono); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; font-size: 13px; padding: 16px 28px; border-radius: 999px; transition: transform .25s, filter .25s; }
.keybtn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.keymsg { margin-top: 18px; min-height: 1.2em; font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--yellow); opacity: 0; transition: opacity .5s; }
.keymsg.show { opacity: 1; }

/* the wallet-pass Key card — flips in on submit */
.keycard {
  position: relative; margin-top: clamp(26px,5vh,52px);
  width: min(86vw, 380px); aspect-ratio: 1.586; /* credit-card ratio */
  border-radius: 18px; padding: clamp(18px,2.4vw,26px);
  background: linear-gradient(150deg, #1a1a17 0%, #0b0b0b 60%); border: 1px solid #34342f;
  box-shadow: 0 30px 60px rgba(0,0,0,0.55);
  display: flex; flex-direction: column; text-align: left; overflow: hidden;
  transform: perspective(1200px) rotateX(38deg) translateY(40px) scale(0.92); transform-origin: center top;
  opacity: 0; pointer-events: none; transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .7s ease;
}
.keycard.revealed { transform: perspective(1200px) rotateX(0deg) translateY(0) scale(1); opacity: 1; }
.kc-sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(239,208,39,0.10) 48%, transparent 62%); pointer-events: none; }
.kc-top { display: flex; align-items: center; justify-content: space-between; }
.kc-brand { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.kc-h { width: 26px; height: 26px; display: block; }
.kc-mid { font-family: var(--display); font-weight: 700; font-size: clamp(34px,7vw,48px); letter-spacing: -0.01em; color: var(--paper); margin: auto 0; }
.kc-rows { display: flex; gap: 28px; }
.kc-row { display: flex; flex-direction: column; gap: 3px; }
.kc-k { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.kc-v { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--paper); }
.kc-bars { margin-top: 14px; height: 26px; border-radius: 3px;
  background-image: repeating-linear-gradient(90deg, var(--paper) 0 2px, transparent 2px 4px, var(--paper) 4px 5px, transparent 5px 9px); opacity: 0.85; }

/* ============================================================
   UI — progress rail + side dot-nav
   ============================================================ */
#rail { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: var(--yellow); z-index: 50; }
#nav { position: fixed; right: clamp(14px,2vw,34px); top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 14px; }
#nav a { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--muted); opacity: 0.6; transition: all .35s; }
#nav a.active { background: var(--yellow); border-color: var(--yellow); opacity: 1; transform: scale(1.25); }
#nav.on-paper a { border-color: var(--muted-dark); }
@media (max-width: 760px) { #nav { display: none; } }

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  #duo .grid { grid-template-columns: 1fr; }
  #duo .shot { order: -1; max-width: 70%; margin: 0 auto; }
  #range .row { grid-template-columns: 0.4fr 1.4fr; }
  #range .row .ds, #range .row .pr { grid-column: 2; text-align: left; }
  .spec { max-width: 200px; }
  #spec-1,#spec-2,#spec-3,#spec-4 { font-size: 0.9em; }
}

/* ============================================================
   CINEMATIC LAYERS — film grain · HUD · reticle · marquee · hero buzz
   ============================================================ */
/* film grain (oversized so the drift never exposes an edge) */
#grain {
  position: fixed; inset: -12%; z-index: 9990; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 170px 170px; opacity: 0.055; mix-blend-mode: overlay;
  animation: grain 0.6s steps(3) infinite; will-change: transform;
}
@keyframes grain { 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }

/* instrument HUD — section readout, bottom-left, blends on any bg */
#hud { position: fixed; left: var(--pad); bottom: clamp(16px,3vh,30px); z-index: 60; pointer-events: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff; mix-blend-mode: difference; display: flex; align-items: baseline; gap: 7px; }
#hud .hud-sep, #hud #hudTot { opacity: 0.5; }
#hud .hud-lab { opacity: 0.85; }
#hud .hud-lab::before { content: "— "; opacity: 0.5; }
@media (max-width: 760px) { #hud { display: none; } }

/* machined marquee ticker */
.marquee { overflow: hidden; background: var(--ink); border-top: 1px solid #2a2a26; border-bottom: 1px solid #2a2a26; padding: clamp(14px,2vh,20px) 0; }
.mq-track { display: flex; align-items: center; white-space: nowrap; width: max-content; animation: mq 28s linear infinite; will-change: transform; }
.mq-track span { font-family: var(--mono); font-size: clamp(12px,1.3vw,17px); letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper); padding: 0 26px; }
.mq-track .mq-dot { color: var(--yellow); padding: 0 4px; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* hero buzz — subliminal vibration on its own layer (won't fight scale/scrub) */
#hero .buzz { position: absolute; inset: 0; animation: buzz 0.16s steps(2) infinite; will-change: transform; }
@keyframes buzz { 0%{transform:translate(0,0)} 50%{transform:translate(0.5px,-0.5px)} 100%{transform:translate(-0.4px,0.4px)} }

/* ---------- reduced motion ---------- */
.reveal-all .spec, .reveal-all #hero .mark, .reveal-all [data-rise] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  #grain, .mq-track, #hero .buzz { animation: none; }
}