/* Spirefall: Sky Wars — promo site.
   The palette and type are lifted straight from the game's own interface:
   sun-bleached sand, oxblood, gilt on near-black. No web fonts, no external
   anything — a strict CSP would drop them, and the game's UI is Georgia
   anyway, so the site and the game read as one thing. */

:root {
  --ink:        #0a0704;
  --ink-2:      #140d07;
  --ink-3:      #1d140b;
  --gold:       #d9b45b;
  --gold-dim:   #8a713a;
  --parchment:  #e8d9b0;
  --muted:      #a8977a;
  --sand:       #c7a86b;
  --blood:      #a3251f;
  --flame:      #ff8a2a;
  --sky:        #6db4ff;

  --display: Georgia, "Times New Roman", "Droid Serif", serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(20px, 5vw, 64px);
  --wide: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

/* height:auto matters: the CSS width overrides the width attribute, and
   without it the height attribute would stay fixed — a stretched screenshot */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); }

.wrap { width: min(var(--wide), 100%); margin-inline: auto; padding-inline: var(--pad); }

/* ---------------------------------------------------------------- type */
h1, h2, h3 { font-family: var(--display); font-weight: normal; line-height: 1.15; }

.eyebrow {
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold-dim); margin-bottom: 14px;
}

h2 {
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: 0.04em;
  color: var(--parchment);
  margin-bottom: 18px;
}

.lede { font-size: clamp(17px, 2.2vw, 21px); color: var(--parchment); }
p { color: var(--muted); }
p + p { margin-top: 14px; }
strong { color: var(--parchment); font-weight: 600; }

/* a thin gilt rule with the carpet's diamond at its centre */
.rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, rgba(217,180,91,.32) 22%, rgba(217,180,91,.32) 78%, transparent);
  position: relative;
}
.rule::after {
  content: ""; position: absolute; left: 50%; top: -3px;
  width: 7px; height: 7px; background: var(--gold);
  transform: translateX(-50%) rotate(45deg);
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: clamp(15px, 2vw, 18px);
  letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none;
  padding: 16px 34px;
  border: 1px solid var(--gold-dim);
  color: var(--parchment);
  background: rgba(60, 44, 18, 0.45);
  transition: background .22s, border-color .22s, box-shadow .22s, transform .22s;
  white-space: nowrap;
}
.btn:hover, .btn:focus-visible {
  background: rgba(122, 90, 34, 0.62);
  border-color: var(--gold);
  box-shadow: 0 0 28px rgba(217, 180, 91, 0.26);
  transform: translateY(-1px);
}
.btn-primary {
  background: linear-gradient(180deg, #a8791f, #7d5411);
  border-color: var(--gold);
  color: #fff5dc;
  font-size: clamp(16px, 2.3vw, 20px);
  padding: 18px 46px;
  box-shadow: 0 6px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,226,160,.35);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: linear-gradient(180deg, #c08d26, #91620f);
  box-shadow: 0 8px 34px rgba(217,180,91,.36), inset 0 1px 0 rgba(255,226,160,.5);
}
.btns { display: flex; flex-wrap: wrap; gap: 14px; }

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

/* ---------------------------------------------------------------- header */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--pad);
  background: linear-gradient(180deg, rgba(10,7,4,.92), rgba(10,7,4,0));
  backdrop-filter: blur(3px);
}
.top .mark {
  font-family: var(--display); font-size: 17px;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold); text-decoration: none; white-space: nowrap;
}
.top nav { display: flex; align-items: center; gap: 10px; }
.top .btn { padding: 10px 20px; font-size: 12px; letter-spacing: 0.14em; }
.lang {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-dim); text-decoration: none; padding: 10px 12px;
  border: 1px solid transparent;
}
.lang:hover { color: var(--gold); border-color: rgba(217,180,91,.4); }
@media (max-width: 640px) {
  .top .btn.ghost { display: none; }
  .top .mark { font-size: 14px; letter-spacing: 0.24em; }
}

/* ------------------------------------------------------- the 3D stage
   One sticky viewport carries the live scene (or, without WebGL, the poster
   photograph). The hero and the three story beats scroll over it; scroll
   position drives the camera in hero3d.js. */
.stage { position: relative; }
/* No negative margin here: a sticky's travel range includes its own margin
   box, so margin-bottom:-100svh would let the canvas keep covering a full
   viewport BELOW the stage, swallowing the stats strip and the next section.
   The hero pulls itself up over the sticky instead. */
.stage-sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: var(--ink);
}
/* Framed left of centre: the frame's right third carries the game's own
   scoreboard and minimap, which would sit directly under the site header and
   read as clutter. This keeps the rival wizards in shot and pushes the HUD out. */
.stage-poster {
  position: absolute; inset: 0;
  background-image: url("img/hero.jpg");
  background-size: cover; background-position: 34% 46%;
  animation: drift 34s ease-in-out infinite alternate;
  transition: opacity 1.1s ease;
}
/* A portrait viewport crops a narrow vertical slice: centred, that slice is
   mostly empty sky. Drop the framing so the dunes and the rival wizards are
   what the phone actually shows. */
@media (orientation: portrait) {
  .stage-poster { background-position: 42% 68%; }
}
@keyframes drift { from { transform: scale(1.06) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(-1.6%, -1%, 0); } }
@media (prefers-reduced-motion: reduce) { .stage-poster { animation: none; transform: scale(1.06); } }

.stage-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.1s ease;
}
.stage.gl-on .stage-canvas { opacity: 1; }
.stage.gl-on .stage-poster { opacity: 0; animation-play-state: paused; }

/* two washes: one to seat the type, one to warm the whole frame */
.stage-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,7,4,.72) 0%, rgba(10,7,4,.10) 30%, rgba(10,7,4,.16) 78%, rgba(10,7,4,.55) 100%),
    /* seat the type: darkest where the words are, clearing toward the right */
    linear-gradient(90deg, rgba(10,7,4,.55) 0%, rgba(10,7,4,.2) 42%, rgba(10,7,4,.04) 70%),
    radial-gradient(120% 70% at 50% 100%, rgba(10,7,4,.5), transparent 60%);
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; z-index: 2;
  margin-top: -100vh; margin-top: -100svh;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: 120px 0 clamp(40px, 7vw, 84px);
}
.hero .wrap { position: relative; }

/* "DEATHMATCH" is ten wide capitals plus tracking — roughly 8.6em of line.
   Sized off the viewport so it always fits the width it is given, rather than
   being clipped by the hero's own overflow. */
.hero h1 {
  font-size: clamp(32px, 8.4vw, 132px);
  letter-spacing: 0.08em;
  color: #fff3d4;
  text-shadow: 0 2px 0 rgba(0,0,0,.5), 0 0 60px rgba(217,180,91,.28);
  margin-bottom: 6px;
}
@media (min-width: 720px) { .hero h1 { letter-spacing: 0.14em; font-size: clamp(56px, 7.6vw, 132px); } }

.hero .sub {
  font-family: var(--display);
  font-size: clamp(12px, 2.6vw, 17px);
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 26px;
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
}
@media (min-width: 720px) { .hero .sub { letter-spacing: 0.42em; } }
.hero .pitch {
  font-size: clamp(18px, 2.9vw, 27px);
  line-height: 1.45; color: var(--parchment);
  max-width: 22ch;
  text-shadow: 0 2px 12px rgba(0,0,0,.85);
  margin-bottom: 34px;
}
.hero .pitch b { color: #fff; font-weight: 600; }
.hero .btns { margin-bottom: 18px; }
.hero .note { font-size: 14px; color: var(--muted); text-shadow: 0 1px 6px #000; }

/* ---------------------------------------------------------------- beats */
/* Story beats ride over the sticky scene: one card of copy per framing. */
.beat {
  position: relative; z-index: 2;
  min-height: 92vh; min-height: 92svh;
  display: flex; align-items: center;
  padding: 8vh 0;
}
.beat .wrap { display: flex; width: 100%; }
.beat.right .wrap { justify-content: flex-end; }
.beat-card {
  max-width: 46ch;
  background: rgba(12, 8, 4, .62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(217, 180, 91, .24);
  padding: clamp(22px, 4vw, 42px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
.beat-card h2 { font-size: clamp(24px, 3.8vw, 38px); }
.beat-card p { color: var(--parchment); opacity: .92; }

/* ---------------------------------------------------------------- stats */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(217,180,91,.2);
  border-bottom: 1px solid rgba(217,180,91,.2);
  background: var(--ink-2);
}
.stat { padding: clamp(18px, 3vw, 30px) 12px; text-align: center; }
.stat + .stat { border-left: 1px solid rgba(217,180,91,.14); }
.stat b {
  display: block; font-family: var(--display);
  font-size: clamp(28px, 5vw, 46px); color: var(--gold); line-height: 1;
}
.stat span {
  display: block; margin-top: 8px;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid rgba(217,180,91,.14); }
}

/* ---------------------------------------------------------------- sections */
section { padding: clamp(56px, 9vw, 112px) 0; }
.band { background: var(--ink-2); }

.split { display: grid; gap: clamp(28px, 5vw, 60px); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1.15fr; }
  .split.flip .txt { order: 2; }
}

.shot {
  position: relative;
  border: 1px solid rgba(217,180,91,.26);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  background: #000;
}
.shot img { width: 100%; }
.shot figcaption {
  font-size: 13px; color: var(--muted); padding: 10px 14px;
  border-top: 1px solid rgba(217,180,91,.16);
  background: rgba(10,7,4,.7);
}

/* ---------------------------------------------------------------- spells */
.spellbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 10px; margin-top: 30px;
}
.spell {
  border: 1px solid rgba(217,180,91,.3);
  background: rgba(12,9,5,.72);
  padding: 14px 12px; text-align: center;
}
.spell svg { width: 30px; height: 30px; display: block; margin: 0 auto 9px; }
.spell b {
  display: block; font-family: var(--display); font-size: 15px;
  color: var(--parchment); letter-spacing: .02em; font-weight: normal;
}
.spell span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.45; }

/* ---------------------------------------------------------------- steps */
.steps { counter-reset: s; display: grid; gap: 2px; margin-top: 8px; }
.step {
  counter-increment: s;
  display: grid; grid-template-columns: 46px 1fr; gap: 18px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid rgba(217,180,91,.14);
}
.step::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--display); font-size: 20px; color: var(--gold-dim);
}
.step b { display: block; font-family: var(--display); font-size: 19px; color: var(--parchment); font-weight: normal; margin-bottom: 3px; }
.step p { margin: 0; }

/* ---------------------------------------------------------------- keys */
.keys { width: 100%; border-collapse: collapse; margin-top: 8px; }
.keys td { padding: 11px 0; border-bottom: 1px solid rgba(217,180,91,.14); vertical-align: top; }
.keys td:first-child { width: 44%; padding-right: 18px; }
.keys td:last-child { color: var(--muted); }
kbd {
  display: inline-block; font-family: var(--body); font-size: 12.5px;
  padding: 3px 9px; margin: 2px 4px 2px 0;
  border: 1px solid var(--gold-dim); border-bottom-width: 2px;
  background: rgba(60,44,18,.4); color: var(--parchment);
  letter-spacing: .04em; white-space: nowrap;
}

/* ---------------------------------------------------------------- gallery */
.gallery {
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 30px;
}
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr; } }

/* measured paragraphs — CSP forbids inline style attributes */
.measure { max-width: 62ch; }
.measure-s { max-width: 56ch; }

/* ---------------------------------------------------------------- media feed */
#live { display: none; }
#live.on { display: block; }
.feed {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-top: 26px;
}
.feed a {
  display: block; position: relative; overflow: hidden;
  border: 1px solid rgba(217,180,91,.24); background: #000; line-height: 0;
}
.feed img, .feed video { width: 100%; height: 190px; object-fit: cover; }
.feed a::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0);
  transition: box-shadow .2s;
}
.feed a:hover { border-color: var(--gold); }
.feed .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(10,7,4,.66); border: 1px solid var(--gold);
  display: grid; place-items: center; pointer-events: none;
}
.feed .play::before {
  content: ""; border-left: 12px solid var(--gold);
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  margin-left: 3px;
}

/* ---------------------------------------------------------------- cta */
.cta { text-align: center; background: var(--ink-2); }
.cta h2 { margin-bottom: 10px; }
.cta p { max-width: 52ch; margin-inline: auto; }
.cta .btns { justify-content: center; margin-top: 32px; }

/* ---------------------------------------------------------------- reveal */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.rise.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }