:root {
  --bg: #070605;
  --ink: #f4ede4;
  --ink-dim: #b7ada2;
  --amber: #ff6a1f;
  --font: "Oswald", "Segoe UI", system-ui, sans-serif;
  --ui: "Rajdhani", "Oswald", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

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

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---------- hero (single screen) ---------- */
.hero {
  position: relative;
  height: 100svh; min-height: 600px;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}

/* drone stage (live 3D) — full-height layer so it can fill ~90% of the width */
.stage { position: absolute; inset: 0; z-index: 3; }
#drone {
  width: 100%; height: 100%; display: block;
  touch-action: pan-y; cursor: grab;
  opacity: 0; transition: opacity .6s ease;
}
.stage.ready #drone { opacity: 1; }
.stage .spin-hint { position: absolute; left: 0; right: 0; bottom: 33%; z-index: 4; }
.spin-hint {
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink-dim); opacity: .6; text-align: center;
}

/* cinematic still, graded + biased so the drone stays in frame on portrait */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(7,6,5,.35) 0%, rgba(7,6,5,0) 30%, rgba(7,6,5,.35) 68%, rgba(7,6,5,.85) 100%),
    url("assets/hero.jpg");
  background-size: cover, cover;
  background-position: 68% 42%, 68% 42%;
  filter: saturate(1.22) contrast(1.16) brightness(.98);
}
/* soft central darkening so the logo + copy stay legible over busy art */
.content::before {
  content: ""; position: absolute; z-index: -1;
  inset: -8% -10%;
  background: radial-gradient(58% 52% at 50% 46%, rgba(7,6,5,.55), rgba(7,6,5,.18) 62%, transparent 82%);
}

/* ---------- fx overlays ---------- */
.fx { position: absolute; inset: 0; pointer-events: none; }
.scrim { z-index: 1;
  background: linear-gradient(180deg, rgba(7,6,5,.55) 0%, transparent 30%, transparent 42%, rgba(7,6,5,.86) 90%, var(--bg) 100%); }
.vignette { z-index: 3; box-shadow: inset 0 0 200px 46px rgba(0,0,0,.9), inset 0 0 70px 12px rgba(0,0,0,.7); }
.scanlines { z-index: 3; opacity: .35; mix-blend-mode: multiply;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px); }
.grain { z-index: 3; opacity: .09; mix-blend-mode: overlay; animation: grain .5s steps(2) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
@keyframes grain { 0%{transform:translate(0,0)} 50%{transform:translate(-6px,4px)} 100%{transform:translate(4px,-5px)} }

/* ---------- fire glow rising from the bottom (distant burning) ---------- */
.firelow {
  position: absolute; left: 0; right: 0; bottom: 0; height: 64%; z-index: 2; pointer-events: none;
  mix-blend-mode: screen; transform-origin: bottom; will-change: opacity, transform;
  background:
    radial-gradient(85% 70% at 50% 128%, rgba(255,150,55,.8), rgba(255,85,28,.28) 45%, transparent 72%),
    radial-gradient(120% 95% at 20% 122%, rgba(255,110,35,.6), transparent 60%),
    radial-gradient(110% 92% at 84% 124%, rgba(255,95,28,.58), transparent 60%),
    linear-gradient(0deg, rgba(255,88,26,.52), transparent 82%);
  animation: firelicker 5s ease-in-out infinite;
}
@keyframes firelicker {
  0%,100% { opacity: .85; transform: scaleY(1); }
  22%     { opacity: 1;   transform: scaleY(1.05); }
  48%     { opacity: .76; transform: scaleY(.98); }
  71%     { opacity: .96; transform: scaleY(1.03); }
}

/* ---------- signal glitch (RF tear bar) ---------- */
.glitchbar {
  position: absolute; left: 0; right: 0; top: 30%; height: 16px; z-index: 6; pointer-events: none;
  opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(0,229,255,.28), rgba(255,0,64,.28));
  animation: track 6.5s steps(1) infinite;
}
@keyframes track {
  0%,40%,100% { opacity: 0; }
  41% { top: 25%; opacity: .55; transform: translateX(7px); }
  42% { top: 26%; opacity: 0; }
  66% { opacity: 0; }
  67% { top: 57%; opacity: .6; transform: translateX(-9px); }
  68% { top: 57%; opacity: 0; }
  88% { top: 43%; opacity: 0; }
  89% { top: 43%; opacity: .4; transform: translateX(5px); }
  90% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .firelow, .glitchbar, .grain, .logo { animation: none !important; }
}

/* cinematic bars */
.letterbox { position: absolute; left: 0; right: 0; height: 44px; background: #000; z-index: 4; pointer-events: none; }
.letterbox.top { top: 0; } .letterbox.bottom { bottom: 0; }

/* ---------- content ---------- */
/* TEMP: playtest promo ribbon */
.playtest-ribbon {
  position: absolute; top: 0; left: 0; right: 0; z-index: 7;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 9px 14px; text-decoration: none;
  background: linear-gradient(90deg, #ff5a1f, #ff8f45);
  color: #1a0a02; font-family: var(--ui); font-weight: 700;
  font-size: clamp(11px, 3vw, 14px); letter-spacing: 2px; text-transform: uppercase;
  box-shadow: 0 4px 22px rgba(255,90,20,.5);
}
.playtest-ribbon .dot { width: 8px; height: 8px; border-radius: 50%; background: #1a0a02; animation: pulse 1.2s ease-in-out infinite; }
.playtest-ribbon .arr { transition: transform .15s ease; }
.playtest-ribbon:hover .arr { transform: translateX(3px); }
@keyframes pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .playtest-ribbon .dot { animation: none; } }

.credit {
  margin-top: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
  color: var(--ink-dim); opacity: .85; text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
.credit b { color: var(--amber); font-weight: 500; }
.credit a { color: var(--amber); font-weight: 600; text-decoration: none; }
.credit a:hover { text-decoration: underline; }

.content {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
  width: 100%; max-width: 640px; margin: 0 auto;
  padding: 0 26px 42px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.kicker {
  position: absolute; top: 54px; left: 50%; transform: translateX(-50%); z-index: 6;
  white-space: nowrap; margin: 0;
  font-family: var(--ui); font-weight: 700; font-size: 15px; letter-spacing: 5px;
  color: #1a0a02; text-transform: uppercase;
  padding: 7px 18px 5px; border: none; border-radius: 3px;
  background: var(--amber); box-shadow: 0 5px 20px rgba(255,90,20,.45);
}
.logo {
  width: min(80%, 380px); height: auto;
  filter: drop-shadow(0 6px 30px rgba(255,80,20,.45));
  animation: logoGlitch 5.5s infinite;
}
@keyframes logoGlitch {
  0%, 88%, 100% { transform: none; clip-path: none;
    filter: drop-shadow(0 6px 30px rgba(255,80,20,.45)); }
  89% { transform: translate(-2px, 0);
    filter: drop-shadow(2px 0 0 rgba(255,0,64,.9)) drop-shadow(-2px 0 0 rgba(0,229,255,.9)); }
  90.5% { transform: translate(3px, 0); clip-path: inset(14% 0 56% 0); }
  92% { transform: translate(-3px, 0); clip-path: inset(60% 0 10% 0);
    filter: drop-shadow(-3px 0 0 rgba(255,0,64,.9)) drop-shadow(3px 0 0 rgba(0,229,255,.9)); }
  93.5% { transform: translate(1px, 0); clip-path: inset(36% 0 34% 0); }
  95% { transform: none; clip-path: none; }
}
.pitch {
  margin-top: 18px;
  font-size: clamp(14px, 4vw, 17px);
  line-height: 1.55; color: #e7ddd1; max-width: 46ch;
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
}
.pitch b { color: #fff; font-weight: 600; }

/* ---------- CTAs ---------- */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ui); font-weight: 700; font-size: 16px; letter-spacing: 2px;
  padding: 15px 30px; border-radius: 4px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; text-transform: uppercase;
  transition: transform .12s ease, filter .12s ease, border-color .15s ease, color .15s ease;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn .ico { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }
.btn-primary { background: var(--amber); color: #1a0a02; box-shadow: 0 6px 28px rgba(255,90,20,.5); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { background: rgba(0,0,0,.4); color: var(--ink); border-color: rgba(255,150,80,.55); backdrop-filter: blur(3px); }
.btn-ghost:hover { border-color: var(--amber); color: #fff; }

@media (min-width: 620px) {
  .letterbox { height: 58px; }
}