/* ============================================================
   HOME V2 (concept) — shared tokens and vocabulary.
   Everything on this page is prefixed `hv2-`: the storefront loads
   Bootstrap plus styles_v3.css, both of which define .btn, .lead, .line,
   .overlay and friends, so generic names would let those rules leak IN.
   Tokens live on .hv2, not :root, for the same reason.

   UNITS: px only. styles_v3 sets html { font-size: 62.5% }, so rem values
   land at ~62% of what they say.

   Brand red is #ee3a23 — the current Feniex red (feniex-brand skill, verified
   against the live header logo). The live homepage sections still carry the
   legacy #ea3000.
   ============================================================ */

.hv2 {
  --hv2-ink: #f4f5f7;
  --hv2-accent: #ee3a23;
  --hv2-accent-soft: #ff5a3c;
  --hv2-line: rgba(255, 255, 255, 0.10);
  --hv2-muted: rgba(244, 245, 247, 0.58);
  --hv2-dim: #8a8f95;
  --hv2-maxw: 1180px;
  /* #header is sticky, 80px, opaque black, z-index 1000. */
  --hv2-header-h: 80px;
  /* The consent bar (CookieYes, production only) is a 132px fixed bar at the
     bottom of the window on a first visit. Anything that must be seen on
     screen one keeps its bottom edge above this line. */
  --hv2-cookie-safe: 140px;
  /* The film's scroll runway — the whole 354-frame film (drawn at stride 2)
     scrubs across this distance. 100vh + the panel = a two-screen hero. */
  --hv2-runway: 100vh;

  display: block;
  background: #000;
  color: var(--hv2-ink);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  letter-spacing: normal;
  overflow-x: clip;
}

.hv2 *,
.hv2 *::before,
.hv2 *::after { box-sizing: border-box; }
.hv2 p { margin: 0; }
.hv2 a { text-decoration: none; }
.hv2 a:hover { text-decoration: none; }

/* ---- type vocabulary ------------------------------------------------ */
.hv2-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hv2-accent);
  line-height: normal;
  margin: 0 0 14px;
}
.hv2-h2 {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 46px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.02;
  color: var(--hv2-ink);
  margin: 0;
}
.hv2-lead {
  color: var(--hv2-muted);
  font-size: 17px;
  line-height: 1.65;
  max-width: 460px;
  margin-top: 20px;
}

/* ---- buttons -------------------------------------------------------- */
.hv2-btn {
  display: inline-block;
  background: var(--hv2-accent);
  color: #fff;
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  padding: 15px 34px;
  border: 1px solid var(--hv2-accent);
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.18s, background 0.2s, border-color 0.2s;
}
.hv2-btn:hover,
.hv2-btn:focus-visible {
  background: var(--hv2-accent-soft);
  border-color: var(--hv2-accent-soft);
  color: #fff;
  transform: translateY(-2px);
}
.hv2-btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.26);
}
.hv2-btn-ghost:hover,
.hv2-btn-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.6);
}
.hv2-btn-sm { padding: 12px 26px; font-size: 14px; }
.hv2-btn-play { padding: 12px 34px; }
.hv2-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

/* ---- scroll reveals (opacity/transform only, composited) ------------- */
.hv2-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.hv2-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hv2-reveal { opacity: 1; transform: none; transition: none; }
}