/* ═══════════════════════════════════════════════════════════════════════════
   Public landing page (#787) — the pre-auth front door served by nginx at `/`.

   This file is deliberately STANDALONE: it does not import styles.scss and does
   not reuse Angular components. The landing is a static, SEO-first marketing
   artifact (crawlers and social scrapers must read it without running JS), and
   reusing the app's components would force SSR to stay SEO-valid. The trade-off
   was surfaced and approved on #787.

   Because it is its own palette source, `check-no-hardcoded-colors.mjs` skips
   `src/landing` — the tokens below mirror the game's gold/dark values so the
   marketing page and the game read as one brand.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens (mirror the game's styles.scss) ──────────────────────────────── */
:root {
  --iron-deepest: #090909;
  --iron-raised:  #141212;
  --iron-surface: #1d1a1a;
  --gold:        #b08010;
  --gold-light:  #d4a830;
  --text:        #c8bfa8;
  --text-muted:  #9a8f7a;
  --ink:       rgba(46, 34, 20, 0.96);
  --ink-soft:  rgba(64, 48, 30, 0.86);
  --ink-faint: rgba(88, 70, 46, 0.72);
  --ink-red:   rgba(122, 40, 24, 0.95);
  --ink-line:  rgba(74, 52, 30, 0.30);
  --wax:       #7a2818;
}

/* The self-hosted IM Fell cuts the game already ships (#933). Same files, same
   family names as styles.scss — no external font fetch (CSP `font-src 'self'`). */
@font-face { font-family: 'IM Fell English SC'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/im-fell-english-sc-400.woff2') format('woff2'); }
@font-face { font-family: 'IM Fell English'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/im-fell-english-400.woff2') format('woff2'); }
@font-face { font-family: 'IM Fell English'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/im-fell-english-400-italic.woff2') format('woff2'); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--iron-deepest);
  color: var(--text);
  font-family: Georgia, 'Palatino Linotype', serif;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
/* The countdown/sticker default to hidden and are revealed by landing.js. Their
   own `display` rules would otherwise beat the UA stylesheet's [hidden]. */
[hidden] { display: none !important; }

/* ── sticky top bar ──────────────────────────────────────────────────────── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 22px;
  background: transparent;
  transition: background 240ms ease, box-shadow 240ms ease;
}
.topbar.solid {
  background: rgba(11, 10, 9, 0.94);
  box-shadow: 0 1px 0 rgba(176, 128, 16, 0.55), 0 8px 22px rgba(0,0,0,.55);
}
.topbar .mini-seal { width: 34px; height: 34px; filter: drop-shadow(0 0 6px rgba(176,128,16,.4)); }
.topbar .wordmini {
  font-family: 'IM Fell English SC', serif;
  font-size: 1.05rem; letter-spacing: .08em; color: var(--gold-light);
}
.topbar .grow { flex: 1; }

/* the in-game fire/plate button, re-cut for the marketing page */
.btn-plate {
  display: inline-block;
  font-family: 'IM Fell English SC', serif;
  font-size: 1.02rem; letter-spacing: .1em;
  color: var(--gold-light);
  background: linear-gradient(180deg, #2a2117 0%, #16110b 100%);
  border: 1px solid var(--gold);
  border-radius: 3px;
  padding: 9px 26px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(212,168,48,.28), 0 3px 10px rgba(0,0,0,.6);
  transition: filter 120ms ease, transform 60ms ease, box-shadow 120ms ease;
}
.btn-plate:hover { filter: brightness(1.22); box-shadow: inset 0 1px 0 rgba(212,168,48,.28), 0 0 18px rgba(176,128,16,.35), 0 3px 10px rgba(0,0,0,.6); }
.btn-plate:active { transform: translateY(2px); filter: brightness(.85); }
.topbar .btn-plate { padding: 6px 18px; font-size: .92rem; }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 90px 20px 60px;
  isolation: isolate; overflow: hidden;
  contain: paint;
}
/* Layer order is 0/1/2 for art/scrim/vignette and 3+ for content — never a
   negative z-index here: Chromium fails to clip a negative-z composited
   (animated) layer to the hero's overflow, painting the art's overshoot as a
   bright stripe below the hero.
   The art also needs .hero-clip — a clipping wrapper with its OWN transform, so
   it gets its own render surface: plain ancestor overflow / contain:paint does
   NOT clip the composited Ken Burns layer during smooth scrolling (second
   Chromium quirk; reproduced with the top bar's #play anchor jump).
   Both were found and fixed in the #787 workshop — do not "simplify" away. */
.hero-clip {
  position: absolute; inset: 0; overflow: hidden;
  transform: translateZ(0);
  z-index: 0;
}
.hero-art {
  position: absolute; inset: -6%;
  background: #090909 url('/assets/dungeon/cards/graveyard.jpeg') center 30% / cover no-repeat;
  will-change: transform;
  animation: kenburns 28s ease-in-out infinite alternate;
}
/* pure centre zoom — a translate here drags the art's bright bottom rows up
   into the hero's edge and paints a stripe under the chevron (third rule) */
@keyframes kenburns {
  from { transform: scale(1.03); }
  to   { transform: scale(1.15); }
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(176,128,16,0.16) 0%, transparent 46%),
    linear-gradient(180deg, rgba(9,9,9,.78) 0%, rgba(9,9,9,.55) 34%, rgba(9,9,9,.72) 72%, #090909 100%);
}
.hero-vignette {
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.68) 100%);
}
.crest {
  width: 148px; height: 148px; object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(176, 128, 16, 0.5));
  animation: crest-pulse 4.5s ease-in-out infinite;
}
@keyframes crest-pulse {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(176,128,16,.38)); }
  50%      { filter: drop-shadow(0 0 30px rgba(212,168,48,.62)); }
}
.wordmark {
  margin-top: 18px;
  font-family: 'IM Fell English SC', serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1.02;
  letter-spacing: .05em;
  background: linear-gradient(100deg, #8a6410 0%, #d4a830 22%, #f4dc8a 38%, #d4a830 52%, #8a6410 78%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 34px rgba(176, 96, 16, 0.28);
  animation: shimmer 7s linear infinite;
}
@keyframes shimmer {
  from { background-position: 130% 0; }
  to   { background-position: -110% 0; }
}
.tagline {
  margin-top: 12px;
  font-family: 'IM Fell English', serif; font-style: italic;
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  color: var(--text);
  letter-spacing: .05em;
}
.hero-pitch {
  margin-top: 16px; max-width: 60ch;
  font-size: .98rem; line-height: 1.55; color: var(--text-muted);
}
.hero-cta { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero-cta .btn-plate { font-size: 1.3rem; padding: 13px 44px; }

/* ── 0.2.0 release countdown ─────────────────────────────────────────────── */
.countdown { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.count-label {
  font-family: 'IM Fell English SC', serif; font-size: .95rem;
  letter-spacing: .18em; color: var(--text-muted);
}
.count-row { display: flex; gap: 10px; }
.count-cell {
  min-width: 76px; padding: 11px 8px 9px; text-align: center;
  background: linear-gradient(180deg, #1b1611 0%, #0e0b08 100%);
  border: 1px solid rgba(176, 128, 16, .55);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(212, 168, 48, .22), 0 3px 10px rgba(0, 0, 0, .55);
}
.count-num {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 1.9rem; line-height: 1;
  color: var(--gold-light);
  text-shadow: 0 0 12px rgba(176, 128, 16, .4);
}
.count-unit {
  margin-top: 5px;
  font-family: 'IM Fell English SC', serif;
  font-size: .68rem; letter-spacing: .16em;
  color: var(--text-muted);
}
/* the "Soon" wax sticker over the Play plate */
.play-wrap { position: relative; display: inline-block; }
.soon-sticker {
  position: absolute; top: -17px; right: -36px;
  transform: rotate(7deg);
  padding: 5px 16px 6px;
  font-family: 'IM Fell English SC', serif;
  font-size: .95rem; letter-spacing: .12em;
  color: #f0e5cc;
  background: linear-gradient(160deg, #8e2f1c 0%, #6a1e10 55%, #521408 100%);
  border: 1px solid rgba(240, 229, 204, .28);
  border-radius: 2px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(240, 229, 204, .18);
  z-index: 5;
  pointer-events: none;
}
@media (max-width: 480px) {
  .count-cell { min-width: 60px; padding: 9px 6px 7px; }
  .count-num { font-size: 1.4rem; }
  .soon-sticker { right: -18px; }
}

.micro { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); font-family: 'Segoe UI', system-ui, sans-serif; }
.micro.devices { color: rgba(212, 168, 48, .82); margin-top: -6px; }
.community { display: flex; gap: 22px; margin-top: 4px; }
.community a {
  font-family: 'IM Fell English SC', serif; font-size: .95rem; letter-spacing: .1em;
  color: var(--text-muted); text-decoration: none; transition: color 120ms ease;
}
.community a:hover { color: var(--gold-light); }
.chevron {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: var(--gold); font-size: 1.5rem; opacity: .8;
  animation: chevron-bob 1.8s ease-in-out infinite;
  z-index: 4;
}
/* hero content rides above the art/scrim/vignette layers (0/1/2) */
.hero > .crest, .hero > .wordmark, .hero > .tagline, .hero > .hero-pitch, .hero > .countdown,
.hero > .hero-cta {
  position: relative; z-index: 4;
}
@keyframes chevron-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(9px); }
}
/* embers */
.ember {
  position: absolute; bottom: -8px; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, #f4c26a 0%, #b05010 70%, transparent 100%);
  opacity: 0;
  animation: ember-rise 9s linear infinite;
  z-index: 3;
}
@keyframes ember-rise {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  8%   { opacity: .85; }
  60%  { opacity: .5; }
  100% { transform: translate(var(--drift, 30px), -86vh) scale(.4); opacity: 0; }
}
.ember:nth-child(odd)  { animation-duration: 11s; }
.ember:nth-child(3n)   { width: 3px; height: 3px; }
.ember:nth-child(4n)   { animation-duration: 13s; }

/* ── the wall (feature bands) ────────────────────────────────────────────── */
.wall {
  position: relative;
  background: #0b0a09 url('/assets/ui/scenes/tile-stone-wall.png') repeat center / 254px;
  background-blend-mode: normal;
}
.wall::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, #090909 0%, rgba(9,9,9,.82) 6%, rgba(9,9,9,.78) 94%, #090909 100%),
    radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(0,0,0,.5) 100%);
}
.band {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(28px, 6vw, 90px);
  padding: clamp(70px, 9vh, 120px) 24px;
  max-width: 1240px; margin: 0 auto;
  content-visibility: auto;
  contain-intrinsic-size: auto 620px;
}
.band::before {
  content: ''; position: absolute; top: 8%; bottom: 8%; width: 58%;
  right: 2%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(202, 148, 44, 0.075) 0%, transparent 66%);
}
.band.flip::before { right: auto; left: 2%; }
.band.flip { flex-direction: row-reverse; }
.wall-head { flex: 0 1 380px; }
.band-no {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(176, 128, 16, .75); margin-bottom: 14px;
}
.wall-head h2 {
  font-family: 'IM Fell English SC', serif; font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08;
  color: var(--gold-light);
  text-shadow: 0 2px 14px rgba(0,0,0,.8), 0 0 26px rgba(176,128,16,.18);
}
.kicker {
  margin-top: 12px;
  font-family: 'IM Fell English', serif; font-style: italic;
  font-size: 1.12rem; color: var(--text-muted);
}

/* the pinned writ — the game's own popup language (the shipped
   `parchment.sheet()` recipe: slice 54 / 30px border / stepped edge mask) */
.writ {
  position: relative;
  flex: 0 1 640px;
  transform: rotate(var(--tilt, -1.1deg));
  transition: transform 300ms ease;
}
.writ:hover { transform: rotate(0deg) scale(1.012); }
.sheet {
  position: relative;
  background: linear-gradient(168deg, rgba(240, 229, 204, 1) 0%, rgba(228, 214, 184, 1) 100%);
  background-clip: border-box;
  border: 30px solid transparent;
  border-image: url('/assets/ui/scenes/parchment-frame.png') 54 round;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.62), 0 3px 8px rgba(0, 0, 0, 0.5);
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, transparent 6px, black 8px, black calc(100% - 8px), transparent calc(100% - 6px), transparent 100%),
    linear-gradient(to bottom, transparent 0, transparent 6px, black 8px, black calc(100% - 8px), transparent calc(100% - 6px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, transparent 6px, black 8px, black calc(100% - 8px), transparent calc(100% - 6px), transparent 100%),
    linear-gradient(to bottom, transparent 0, transparent 6px, black 8px, black calc(100% - 8px), transparent calc(100% - 6px), transparent 100%);
  mask-composite: intersect;
  padding: 6px 10px 12px;
}
.sheet .shot {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center;
  border: 1px solid rgba(122, 88, 12, 0.55);
  outline: 1px solid rgba(46, 34, 20, 0.35);
  outline-offset: 2px;
}
.sheet .caption {
  margin-top: 14px;
  font-size: .96rem; line-height: 1.6; color: var(--ink-soft);
}
.sheet .caption strong { color: var(--ink-red); font-weight: 600; }
/* pin + chains + wax live OUTSIDE the masked sheet — the mask clips its whole
   subtree, so anything overhanging the box must be a sibling (CLAUDE.md rule) */
.pin {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 26px; height: auto; z-index: 3;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.6));
}
.wax {
  position: absolute; right: -14px; bottom: -16px; width: 52px; height: auto; z-index: 3;
  transform: rotate(12deg);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.55));
}
.writ .chains { position: absolute; top: -62px; left: 0; right: 0; height: 62px; z-index: -1; }
.writ .chains::before, .writ .chains::after {
  content: ''; position: absolute; top: 0; bottom: -6px; width: 13px;
  background: url('/assets/ui/scenes/chain-strip.png') repeat-y center / 13px auto;
  opacity: .55; filter: brightness(.8);
}
.writ .chains::before { left: 16%; }
.writ .chains::after { right: 16%; }
/* the small overlapping slip (band II's skill web, band III's chart) */
.slip {
  position: absolute; z-index: 4;
  width: 38%; height: auto;
  right: -9%; bottom: 24%;
  transform: rotate(3.6deg);
  border: 6px solid #efe5cb;
  outline: 1px solid rgba(74,52,30,.4);
  box-shadow: 0 10px 26px rgba(0,0,0,.65);
  transition: transform 300ms ease;
}
.writ:hover .slip { transform: rotate(1.4deg) scale(1.03); }
.slip.left {
  right: auto; left: -9%;
  transform: rotate(-3.2deg);
}
.writ:hover .slip.left { transform: rotate(-1.2deg) scale(1.03); }

/* scroll-reveal — only armed once landing.js adds .js-anim, so a no-JS or
   reduced-motion visitor never sees a hidden band */
.js-anim .band { opacity: 0; transform: translateY(26px); transition: opacity 640ms ease, transform 640ms ease; }
.js-anim .band.in { opacity: 1; transform: translateY(0); }

/* ── footer ──────────────────────────────────────────────────────────────── */
.footer {
  position: relative; text-align: center;
  padding: 110px 24px 60px;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(176,128,16,.1) 0%, transparent 55%),
    linear-gradient(180deg, #090909 0%, #0d0b0a 100%);
}
.footer .crest { width: 96px; height: 96px; margin: 0 auto; }
.footer h2 {
  margin-top: 16px;
  font-family: 'IM Fell English SC', serif; font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--gold-light);
}
.footer .kicker { margin-top: 8px; }
.footer .btn-plate { margin-top: 28px; font-size: 1.2rem; padding: 12px 40px; }
.footer .community { justify-content: center; margin-top: 22px; }
.legal {
  margin-top: 44px; font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: .74rem; letter-spacing: .06em; color: #5c5648; line-height: 1.7;
}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .band, .band.flip { flex-direction: column; gap: 34px; padding: 60px 18px; }
  .wall-head { flex-basis: auto; text-align: center; }
  .writ { flex-basis: auto; width: min(640px, 94vw); }
  .slip {
    position: static; width: 72%; margin: 16px auto 0;
    transform: rotate(-1.6deg);
  }
  .writ .chains { display: none; }
}

/* ── reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-art, .crest, .wordmark, .chevron, .ember { animation: none !important; }
  .js-anim .band { opacity: 1; transform: none; transition: none; }
  .writ, .slip, .writ:hover .slip { transition: none; }
}