/* Theme: Camp Skillen — The Burn (2026).
   Tokens + atmosphere only. Layout lives in /styles.css.
   Cool neon-night palette: indigo and teal with magenta/cyan accents — no brown, per Cabrina.
   Next reskin: copy this file, change the tokens and effects, point event.theme.css at it. */

:root {
  /* palette — overridden at runtime from event.theme.palette */
  --bg: #0E0A1F;
  --surface: #1B1440;
  --cream: #F1ECFF;
  --green: #2FE6C4;
  --red: #FF3D8A;
  --grey: #6E6693;
  --grey-light: #C3BEE8;

  /* derived */
  --bg-rgb: 14, 10, 31;
  --line: rgba(241, 236, 255, .13);
  --line-strong: rgba(241, 236, 255, .30);
  --sign-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(14, 10, 31, .1);

  /* type */
  --font-head: "Oswald";
  --font-body: "IBM Plex Sans";
  --font-mono: "IBM Plex Mono";

  /* worn tile grid, reused for the generic/custom-section fallback */
  --tile-pattern:
    linear-gradient(rgba(241, 236, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241, 236, 255, .05) 1px, transparent 1px);

  /* fine dust grain laid over every scene (the moving grain is body::before) */
  --grain-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.65 0 0 0 0 0.6 0 0 0 0 0.9 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---- drifting dust (fixed overlay, very low opacity, cool rather than warm) ---- */
body::before {
  content: "";
  position: fixed; inset: -20%; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.7 0 0 0 0 0.72 0 0 0 0 0.95 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .09;
  animation: grain 1.6s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -4%); }
  60% { transform: translate(-4%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

/* ---- rising sparks: small neon points drifting up over everything, very sparse ---- */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 91; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 92%, rgba(47, 230, 196, .9), transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 88%, rgba(255, 61, 138, .85), transparent 60%),
    radial-gradient(1px 1px at 41% 95%, rgba(241, 236, 255, .8), transparent 60%),
    radial-gradient(1.5px 1.5px at 63% 90%, rgba(47, 230, 196, .85), transparent 60%),
    radial-gradient(1px 1px at 78% 96%, rgba(255, 61, 138, .75), transparent 60%),
    radial-gradient(1.5px 1.5px at 91% 89%, rgba(241, 236, 255, .75), transparent 60%);
  background-size: 100% 100%;
  animation: embers 14s linear infinite;
  opacity: .8;
}
@keyframes embers {
  0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; opacity: 0; }
  8% { opacity: .8; }
  90% { opacity: .3; }
  100% { background-position: 3% -115%, -4% -130%, 2% -140%, -3% -120%, 4% -135%, -2% -145%; opacity: 0; }
}

/* ---- the opening: a slow push into the desert, neon breathing across it ---- */
.hero-photo img { animation: ken-burns 48s ease-in-out infinite alternate; }
@keyframes ken-burns {
  from { transform: scale(1.04) translate(0, 0); }
  to { transform: scale(1.12) translate(-1.2%, -1.6%); }
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(55% 45% at 50% 82%, rgba(255, 61, 138, .20), transparent 70%),
    radial-gradient(45% 60% at 78% 10%, rgba(47, 230, 196, .14), transparent 70%);
  animation: firelight 7s ease-in-out infinite alternate;
}
@keyframes firelight {
  from { opacity: .75; }
  to { opacity: 1; }
}

/* ---- CRT radio: a slow cool band still rolls, now the colour of a cyan static hum ---- */
.crt::after {
  content: ""; position: absolute; left: 0; right: 0; top: -20%; height: 18%; pointer-events: none; z-index: 2;
  background: linear-gradient(to bottom, rgba(241, 236, 255, 0), rgba(241, 236, 255, .07) 50%, rgba(241, 236, 255, 0));
  animation: crt-roll 9s linear infinite;
}
@keyframes crt-roll { from { top: -20%; } to { top: 110%; } }

/* ---- notice plate: moon-bleached stencil face ---- */
.sign {
  color: rgba(var(--bg-rgb), .92);
  mask-image: repeating-linear-gradient(112deg, #000 0 23px, rgba(0, 0, 0, .9) 23px 25px);
  -webkit-mask-image: repeating-linear-gradient(112deg, #000 0 23px, rgba(0, 0, 0, .9) 23px 25px);
}

/* ---- fluorescent-flicker, repurposed as a live-flame flicker on the status dot ---- */
.fx-flicker { animation: flicker 4s steps(1) infinite; }
.fx-flicker-slow { animation: flicker-slow 11s linear infinite; }
@keyframes flicker {
  0%, 82%, 100% { opacity: 1; }
  84% { opacity: .55; }
  86% { opacity: 1; }
  90% { opacity: .7; }
  93% { opacity: 1; }
}
@keyframes flicker-slow {
  0%, 84%, 100% { opacity: .55; }
  85% { opacity: .2; }
  86% { opacity: .6; }
  88% { opacity: .3; }
  89% { opacity: .55; }
  93% { opacity: .4; }
  94% { opacity: .58; }
}

/* ---- hazard tape divider, now a neon-danger stripe: used once, between the story and the real invitation ---- */
.hazard-divider {
  height: 14px;
  background: repeating-linear-gradient(-45deg, var(--green) 0 18px, var(--bg) 18px 36px);
  opacity: .9;
  border-top: 2px solid var(--bg);
  border-bottom: 2px solid var(--bg);
}

/* ---- worn edges on the icy invitation paper ---- */
.invite-inner {
  background-image:
    radial-gradient(80% 60% at 100% 0%, rgba(var(--bg-rgb), .08), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(255, 61, 138, .12), transparent 60%);
}

/* ---- illustrated scenes: gradient "moments" standing in for photography, one per slug ---- */
.scene { background: linear-gradient(160deg, var(--surface), var(--bg) 75%); }
.scene .scene-glyph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: .16; color: var(--cream); transform: scale(1.35);
}
.scene .scene-glyph svg { width: 46%; height: 46%; }
.scene-sky-hero { background: radial-gradient(120% 90% at 50% 115%, #2A1F5A 0%, #1B1440 32%, var(--bg) 68%); }
.scene-sky-hero .scene-glyph { opacity: .9; transform: scale(1); color: var(--green); }
.scene-when { background: linear-gradient(155deg, #201B4A, var(--bg) 78%); }
.scene-where { background: linear-gradient(155deg, #1E1A42, var(--bg) 78%); }
.scene-hosts { background: linear-gradient(155deg, #201A45, var(--bg) 78%); }
.scene-dress { background: linear-gradient(155deg, #291A4D, var(--bg) 78%); }
.scene-burn { background: radial-gradient(85% 70% at 50% 100%, #3A1440 0%, #1B1440 45%, var(--bg) 80%); }
.scene-pool { background: linear-gradient(155deg, #16233C, var(--bg) 78%); }
.scene-shuttle { background: linear-gradient(155deg, #1B1440, var(--bg) 78%); }
.scene-lamp { background: radial-gradient(60% 55% at 50% 30%, #2A2160, transparent 70%), linear-gradient(180deg, #1B1440, var(--bg)); }
.scene-plastic { background: linear-gradient(200deg, #211A4A, var(--bg) 70%); }
.scene-desk { background: linear-gradient(155deg, #1E1A42, var(--bg) 78%); }
.scene-gurney { background: linear-gradient(155deg, #201A45, var(--bg) 78%); }
.scene-crt { background: radial-gradient(70% 60% at 50% 40%, #26205A, transparent 70%), linear-gradient(180deg, #1B1440, var(--bg)); }
.scene-archive { background: radial-gradient(80% 70% at 50% 100%, #341A4A, transparent 70%), var(--bg); }
.scene-tile { background: linear-gradient(155deg, #1E1A42, var(--bg) 78%); }

@media (prefers-reduced-motion: reduce) {
  body::before, body::after, .hero::before, .fx-flicker, .fx-flicker-slow, .hero-photo img, .crt::after { animation: none; }
  .hero-photo img { transform: scale(1.04); }
  .crt::after { display: none; }
}