/*
 * Herald — Public Landing Page
 * Ported from herald_hero_mockup.html onto the repo's design-system tokens
 * (tokens.css) and fonts (IM Fell English / Special Elite) — see
 * frontend/templates/landing.html. Self-contained: only this page and
 * splat_picker.html (which shares the frame/background layers) load it.
 *
 * Asset pointers — single point of truth so a higher-res background can be
 * dropped in later without touching layout.
 */
/* Scoped reset — this stylesheet only loads on the self-contained public
   landing/splat-picker pages (they don't extend base.html, so they don't
   inherit Tailwind's Preflight reset from the CDN script other pages get). */
body.herald-landing, body.herald-landing *, body.herald-landing *::before, body.herald-landing *::after {
  box-sizing: border-box;
}

body.herald-landing {
  --bg-image:   url('/static/images/herald-evidence-board.jpg');
  margin: 0;
  background: var(--ink-900);
  color: var(--text);
  font-family: 'Special Elite', 'Courier New', monospace;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* =========================================================================
   BACKGROUND — three fixed layers, back to front
   ========================================================================= */
.hl-bg-base {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 42%,
    color-mix(in srgb, var(--gold-shell) 5%, transparent) 0%,
    rgba(10, 6, 5, .4) 46%, rgba(10, 6, 5, .94) 80%, var(--ink-900) 100%);
}

.hl-bg-image {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--bg-image);
  background-size: cover; background-position: center;
  filter: brightness(.82) saturate(.92);
  will-change: transform; transform-origin: center;
  transform: scale(1.25);
}
.hl-bg-image::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(118% 88% at 50% 46%, rgba(10, 6, 5, .30) 0%, rgba(10, 6, 5, .70) 54%, rgba(10, 6, 5, .93) 100%),
    linear-gradient(rgba(10, 6, 5, .32), rgba(10, 6, 5, .5));
}

/* An "AI layer scanning the documents underneath" — a translucent
   conic-gradient dot-grid with a drifting glow, baked to a seamless
   28s-loop video since live compositing via stacked CSS masks was too
   expensive to run continuously. The video plays at full brightness;
   dimming/lightening happens here exactly like the old masked div did. */
.hl-bg-overlay {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: screen; opacity: .256;
}

/* =========================================================================
   CAMERA-CORNER FRAME
   ========================================================================= */
.hl-frame { position: fixed; inset: 22px; z-index: 5; pointer-events: none; }
.hl-corner { position: absolute; width: 46px; height: 46px; }
.hl-corner::before, .hl-corner::after {
  content: ""; position: absolute; background: var(--gold-shell);
  box-shadow: 0 0 8px color-mix(in srgb, var(--gold-shell) 25%, transparent);
}
.hl-corner::before { width: 100%; height: 1px; }
.hl-corner::after  { width: 1px; height: 100%; }
.hl-corner.tl { top: 0; left: 0; }    .hl-corner.tl::before { top: 0; left: 0; } .hl-corner.tl::after { top: 0; left: 0; }
.hl-corner.tr { top: 0; right: 0; }   .hl-corner.tr::before { top: 0; right: 0; } .hl-corner.tr::after { top: 0; right: 0; }
.hl-corner.bl { bottom: 0; left: 0; } .hl-corner.bl::before { bottom: 0; left: 0; } .hl-corner.bl::after { bottom: 0; left: 0; }
.hl-corner.br { bottom: 0; right: 0; } .hl-corner.br::before { bottom: 0; right: 0; } .hl-corner.br::after { bottom: 0; right: 0; }

.hl-spark { position: absolute; color: var(--gold-shell); font-size: 11px; opacity: .6; }
.hl-spark.s1 { top: 8%; left: 7%; }  .hl-spark.s2 { top: 8%; right: 7%; }
.hl-spark.s3 { bottom: 9%; left: 7%; } .hl-spark.s4 { bottom: 9%; right: 7%; }

/* =========================================================================
   VIEWPORT
   ========================================================================= */
.hl-viewport { min-height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 10; }

/* =========================================================================
   HERO
   ========================================================================= */
.hl-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; }

.hl-reticle { position: absolute; z-index: -1; width: min(560px, 86vw); aspect-ratio: 1; top: 50%; left: 50%; transform: translate(-50%, -54%); }
.hl-reticle .ring { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--gold-shell) 14%, transparent); border-radius: 50%; }
.hl-reticle .ring.r2 { inset: 9%; }
.hl-reticle .diamond { position: absolute; inset: 16%; border: 1px solid color-mix(in srgb, var(--gold-shell) 12%, transparent); transform: rotate(45deg); }

.hl-logo { width: clamp(56px, 9vw, 110px); height: auto; margin-bottom: 18px; filter: drop-shadow(0 0 24px color-mix(in srgb, var(--gold-shell) 30%, transparent)); }

.hl-eyebrow { display: flex; align-items: center; gap: 14px; justify-content: center; font-size: 11px; letter-spacing: .42em; color: var(--gold-shell); }
.hl-eyebrow .dia { color: var(--htr-500); font-size: 9px; }

.hl-wordmark {
  font-family: 'IM Fell English', Georgia, serif;
  font-weight: 500; font-size: clamp(64px, 13vw, 168px); line-height: .9; letter-spacing: .02em;
  color: var(--gold-200);
  text-shadow: 0 0 40px color-mix(in srgb, var(--gold-shell) 18%, transparent);
  margin: 0;
}

/* One sub-header per game line, in the same eyebrow style. */
.hl-splat-lines { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 22px 0; }

.hl-core-dia { width: 20px; height: 20px; margin: 26px 0; animation: hl-pulse 3.4s ease-in-out infinite; }
@keyframes hl-pulse {
  0%, 100% { opacity: .55; filter: drop-shadow(0 0 6px rgba(224, 123, 32, .3)); }
  50%      { opacity: 1;   filter: drop-shadow(0 0 16px rgba(224, 123, 32, .7)); }
}

.hl-subline { font-size: 12px; letter-spacing: .34em; color: var(--text); margin-bottom: 48px; text-transform: uppercase; }

.hl-cta-row { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
/* Primary CTA (View a character) carries the Hunter-orange rule for
   emphasis — the Reckoning is Herald's flagship line, per the eyebrow. */
.hl-cta-row .btn-hex-deco.hl-cta-primary { --btn-rule: var(--htr-500); }

.hl-scroll-cue { text-align: center; padding-bottom: 34px; font-size: 10px; letter-spacing: .4em; color: var(--text-muted); }
.hl-scroll-cue .line { display: block; width: 1px; height: 26px; background: color-mix(in srgb, var(--gold-shell) 42%, transparent); margin: 12px auto 0; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.hl-footer { position: relative; z-index: 10; border-top: 1px solid color-mix(in srgb, var(--gold-shell) 42%, transparent); padding: 56px 52px 40px; }

/* Wraps partials/dark_pack_notice.html on landing.html and splat_picker.html —
   both pages sit their content above the fixed background layers (z-index 0-5)
   via position:relative + z-index:10 (see .hl-viewport, .hl-footer, .sp-main);
   the notice partial needs the same lift or it paints behind those layers. */
.dp-notice-wrap { position: relative; z-index: 10; }
.hl-foot-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 44px; }
.hl-foot-col h4 { font-size: 10px; letter-spacing: .3em; color: var(--text-muted); margin-bottom: 18px; font-weight: 400; }
.hl-foot-col a {
  display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .14em;
  color: var(--text); text-decoration: none; margin-bottom: 12px; opacity: .82;
  transition: color var(--motion-slow, .3s), opacity var(--motion-slow, .3s);
}
.hl-foot-col a:hover, .hl-foot-col a:focus-visible { color: var(--gold-200); opacity: 1; }
.hl-foot-col a svg { fill: currentColor; }
.hl-foot-base {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
  padding-top: 26px; border-top: 1px solid color-mix(in srgb, var(--gold-shell) 14%, transparent);
  font-size: 10px; letter-spacing: .28em; color: var(--text-muted);
}
.hl-foot-base .sig { color: var(--gold-shell); }
.hl-foot-base .sig .dia { color: var(--htr-500); }

a:focus-visible, button:focus-visible { outline: 2px solid var(--htr-500); outline-offset: 3px; }

@media (max-width: 720px) {
  .hl-frame { inset: 12px; }
  .hl-eyebrow { letter-spacing: .28em; font-size: 10px; }
  .hl-cta-row { flex-direction: column; width: 100%; max-width: 320px; margin: 0 auto; }
  .hl-cta-row .btn-hex { width: calc(100% - var(--btn-cap) * 1.1); margin-left: auto; margin-right: auto; }
  .hl-footer { padding: 44px 24px 32px; }
  .hl-foot-grid { flex-direction: column; gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .hl-core-dia { animation: none; opacity: .9; }
  .hl-bg-image { transform: none; }
}