/* Copy Campfire design tokens — verbatim from space/app.py — plus the 1920x1080 video stage. */

:root {
  --fire-50: #FFF2E6; --fire-100: #FFE1C6; --fire-200: #FCC596; --fire-300: #FBA968;
  --fire-400: #F7842F; --fire-500: #F2641B; --fire-600: #DA530F; --fire-700: #B23F08;
  --ember-500: #EE8E1E; --gold-400: #D8A94B; --gold-500: #C0892C; --gold-600: #9A6B1E;
  --parch-50: #FCF8EF; --parch-100: #F8F1DF; --parch-200: #F1E7CF; --parch-300: #E6D6B4; --parch-400: #D6C09A;
  --bark-400: #9B7B55; --bark-500: #7A5C3C; --bark-600: #5E4429; --bark-700: #4A3420;
  --bark-800: #362618; --bark-900: #271A0F;
  --pine-500: #6E7B3E; --pine-600: #5C6E33; --pine-700: #45531F;
  --ink-blue: #2F6CB0; --bad-500: #C24A24;
  --text-strong: var(--bark-900); --text-body: var(--bark-800); --text-muted: #6E5B43;
  --text-faint: #927B5E; --text-accent: var(--pine-600);
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans: 'Nunito', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
}

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

html, body { background: var(--parch-100); }

/* fixed 1920x1080 stage, centered and scaled to the window for preview */
.stage-wrap {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
}
.stage {
  width: 1920px; height: 1080px; position: relative; overflow: hidden;
  background:
    radial-gradient(1200px 700px at 50% -10%, #FFFDF6 0%, var(--parch-50) 55%, var(--parch-100) 100%);
  color: var(--text-body); font-family: var(--font-sans);
  box-shadow: 0 0 0 1px var(--parch-300), 0 26px 70px rgba(54, 38, 24, .16);
  border-radius: 4px;
}
.stage::after { /* parchment grain */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(var(--parch-200) 0.8px, transparent 0.8px);
  background-size: 26px 26px;
}
.stage::before { /* campfire glow from just below frame */
  content: ""; position: absolute; left: -240px; right: -240px; bottom: -540px; height: 900px;
  pointer-events: none; z-index: 0;
  background: radial-gradient(58% 100% at 50% 100%,
    rgba(242, 100, 27, .22), rgba(238, 142, 30, .12) 42%, rgba(216, 169, 75, .06) 62%, transparent 75%);
}

/* ambient embers drifting up the whole stage — pure CSS, deterministic */
.stage-embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.stage-embers i {
  position: absolute; bottom: -16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--fire-200), var(--ember-500) 60%, transparent 75%);
  opacity: 0; animation: rise-far linear infinite;
}
@keyframes rise-far {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  6%   { opacity: .55; }
  55%  { opacity: .3; }
  100% { transform: translateY(-1160px) translateX(var(--drift, 30px)) scale(.35); opacity: 0; }
}
.stage-embers i:nth-child(1)  { left: 6%;  width: 7px;  height: 7px;  animation-duration: 13s; animation-delay: 0s;   --drift: 44px; }
.stage-embers i:nth-child(2)  { left: 14%; width: 5px;  height: 5px;  animation-duration: 17s; animation-delay: 4s;   --drift: -36px; }
.stage-embers i:nth-child(3)  { left: 24%; width: 9px;  height: 9px;  animation-duration: 11s; animation-delay: 7s;   --drift: 24px; }
.stage-embers i:nth-child(4)  { left: 33%; width: 5px;  height: 5px;  animation-duration: 19s; animation-delay: 2s;   --drift: -52px; }
.stage-embers i:nth-child(5)  { left: 45%; width: 8px;  height: 8px;  animation-duration: 12s; animation-delay: 9s;   --drift: 38px; }
.stage-embers i:nth-child(6)  { left: 52%; width: 6px;  height: 6px;  animation-duration: 16s; animation-delay: 1s;   --drift: -20px; }
.stage-embers i:nth-child(7)  { left: 61%; width: 10px; height: 10px; animation-duration: 10s; animation-delay: 5s;   --drift: 56px; }
.stage-embers i:nth-child(8)  { left: 70%; width: 5px;  height: 5px;  animation-duration: 18s; animation-delay: 11s;  --drift: -30px; }
.stage-embers i:nth-child(9)  { left: 79%; width: 7px;  height: 7px;  animation-duration: 14s; animation-delay: 3s;   --drift: 26px; }
.stage-embers i:nth-child(10) { left: 87%; width: 6px;  height: 6px;  animation-duration: 15s; animation-delay: 8s;   --drift: -44px; }
.stage-embers i:nth-child(11) { left: 93%; width: 8px;  height: 8px;  animation-duration: 12s; animation-delay: 6s;   --drift: 20px; }
.stage-embers i:nth-child(12) { left: 39%; width: 4px;  height: 4px;  animation-duration: 21s; animation-delay: 13s;  --drift: 48px; }

/* italic accent word in headlines */
.headline em {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  color: var(--fire-600); letter-spacing: 0;
}

.kicker {
  font-family: var(--font-serif); font-style: italic; font-size: 30px;
  color: var(--text-muted); letter-spacing: .01em;
}
.headline {
  font-family: var(--font-display); font-weight: 900; color: var(--text-strong);
  letter-spacing: -0.015em; line-height: 1.04;
}
.footnote {
  position: absolute; left: 90px; right: 90px; bottom: 34px;
  font-family: var(--font-mono); font-size: 17px; line-height: 1.55;
  color: var(--text-faint); border-top: 1px solid var(--parch-300); padding-top: 16px;
}
.footnote b { color: var(--text-muted); font-weight: 600; }

.brand {
  position: absolute; top: 44px; right: 90px; display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 900; font-size: 26px; color: var(--bark-700);
}
.brand .flame { font-size: 30px; }

/* ember particles */
.ember {
  position: absolute; bottom: -12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--fire-200), var(--ember-500) 60%, transparent 75%);
  opacity: 0; pointer-events: none;
  animation: rise linear infinite;
}
@keyframes rise {
  0%   { transform: translateY(0) translateX(0) scale(1);   opacity: 0; }
  8%   { opacity: .85; }
  60%  { opacity: .5; }
  100% { transform: translateY(-260px) translateX(var(--drift, 24px)) scale(.45); opacity: 0; }
}

.replay-hint {
  position: absolute; top: 54px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 15px; color: var(--text-faint);
  animation: hintfade 6s forwards; /* disappears before any recorded take */
}
@keyframes hintfade { 0%, 70% { opacity: .75; } 100% { opacity: 0; } }

/* home / back-to-gallery control — mirrors the brand pill, top-left. Subtle by
   default so it stays out of clean recordings; full on hover. */
.home-btn {
  position: absolute; top: 40px; left: 90px; z-index: 6;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 900; font-size: 18px;
  color: var(--bark-700); text-decoration: none;
  background: #FFFDF6; border: 1px solid var(--parch-300); border-radius: 999px;
  padding: 8px 17px 8px 14px; box-shadow: 0 6px 16px rgba(54, 38, 24, .12);
  opacity: .62; transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease;
}
.home-btn:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 9px 22px rgba(54, 38, 24, .18); }
.home-btn .flame { font-size: 20px; }