/* ================================================================
   SBGMUN 2026 — THE CLOSING ARGUMENT
   style.css

   Redacted-dossier / interrogation-punk stylesheet.
   Palette: void black · deep crimson · blood red · ancient gold ·
   hazard yellow · parchment. Xerox grain, torn-page dividers,
   evidence tape, declassification wipes, scramble-decode text.
   Pairs with the existing index.html and script.js.

   CONTENTS
   01. Reset & base
   02. Design tokens
   03. Typography & utilities
   04. Progressive-enhancement (.js) hook
   05. Custom cursor
   06. Ambient layers — grain, vignette, fog
   07. Particle canvas
   08. HUD — seal + sound toggle · scroll progress
   09. Scroll-reveal system
   10. Seal / rune motif (reusable)
   11. Hero
   12. Prologue
   13. Demon sections — shared
   14. Demon sections — per-theme tint
   15. Sigils
   16. Trilogy / timeline
   17. Mid-page reveal + title lockup
   18. Closing / footer
   19. Stamp component
   20. Hidden prophecy overlay (easter egg)
   21. Bottom toast
   22. Keyframe library
   23. Accessibility & fallbacks
   24. Scrollbar & selection
   ================================================================ */

/* ---------------------------------------------------------------
   01. RESET & BASE
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  font-size: 16px;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  font-family: var(--font-body);
  font-weight: 380;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(51, 9, 14, .38), transparent 60%),
    radial-gradient(ellipse 60% 40% at 92% 92%, rgba(77, 134, 201, .05), transparent 60%),
    var(--void);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, blockquote, ul, ol { margin: 0; }
ul, ol { list-style: none; }

main { position: relative; z-index: var(--z-content); }
.section { position: relative; width: 100%; padding-inline: var(--space-md); }

/* Every section boundary is torn, not cut — the signature motif of
   a case file ripped apart and reassembled. Pure geometry, no image
   asset required. */
[data-section]:not(.hero)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 18px;
  z-index: 2;
  pointer-events: none;
  background: var(--void);
  clip-path: polygon(
    0% 0%, 4% 100%, 8% 15%, 12% 100%, 16% 5%, 20% 100%, 24% 20%, 28% 100%,
    32% 0%, 36% 100%, 40% 10%, 44% 100%, 48% 0%, 52% 100%, 56% 15%, 60% 100%,
    64% 5%, 68% 100%, 72% 0%, 76% 100%, 80% 20%, 84% 100%, 88% 0%, 92% 100%,
    96% 10%, 100% 100%, 100% 0%
  );
}

/* ---------------------------------------------------------------
   02. DESIGN TOKENS
   --------------------------------------------------------------- */
:root {
  /* ---- palette: black ---- */
  --void: #030203;
  --black-900: #0a0807;
  --black-800: #120e0b;
  --black-700: #1c1611;
  --black-600: #281f18;

  /* ---- palette: deep blue / ink ---- */
  --crimson-950: #050b1a;
  --crimson-900: #08152e;
  --crimson-800: #0d2245;
  --crimson-700: #143564;
  --blood-600: #1c4a86;
  --blood-500: #2f66ad;

  /* ---- palette: steel blue ---- */
  --gold-800: #16223f;
  --gold-700: #1f3a6e;
  --gold-500: #2f5590;
  --gold-400: #4d86c9;
  --gold-300: #7fb0e0;
  --gold-200: #bcdcf5;

  /* ---- palette: parchment white ---- */
  --parchment: #ede6d6;
  --parchment-70: rgba(237, 230, 214, .72);
  --parchment-40: rgba(237, 230, 214, .42);
  --parchment-15: rgba(237, 230, 214, .15);

  /* ---- palette: hazard (evidence tape / redaction) ---- */
  --hazard-400: #4da6f0;
  --hazard-500: #2f8ad9;
  --hazard-15: rgba(77, 166, 240, .15);

  /* ---- semantic ---- */
  --text: var(--parchment);
  --text-muted: var(--parchment-70);

  /* ---- type ----
     Display: brutalist/geometric, not the fantasy-epic serif default.
     Blackletter: heavy metal-flyer gothic for the two names that need
     to hit hardest. Body: a grotesk with real character, not a
     templated humanist sans. Mono: an actual typewriter face — this
     is a case file, not a terminal. */
  --font-display: 'Unbounded', sans-serif;
  --font-blackletter: 'UnifrakturCook', 'Unbounded', sans-serif;
  --font-body: 'Bricolage Grotesque', sans-serif;
  --font-mono: 'Courier Prime', monospace;

  /* ---- motion ---- */
  --ease-cinematic: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-stamp: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .4s;
  --dur-medium: .9s;
  --dur-slow: 1.5s;

  /* ---- spacing ---- */
  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;
  --space-2xl: 10rem;

  /* ---- z-index ---- */
  --z-fog: 1;
  --z-canvas: 2;
  --z-content: 10;
  --z-grain: 40;
  --z-vignette: 45;
  --z-progress: 90;
  --z-hud: 95;
  --z-toast: 200;
  --z-overlay: 500;
  --z-cursor: 9999;

  /* ---- runtime (updated by script.js) ---- */
  --spotlight-x: 50vw;
  --spotlight-y: 40vh;
}

/* ---------------------------------------------------------------
   03. TYPOGRAPHY & UTILITIES
   --------------------------------------------------------------- */
.mono { font-family: var(--font-mono); letter-spacing: .08em; }

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-400);
  opacity: .9;
  margin-bottom: var(--space-sm);
}

.skip-link {
  position: fixed;
  top: -60px;
  left: var(--space-sm);
  z-index: 1000;
  background: var(--black-900);
  color: var(--gold-300);
  padding: .8em 1.2em;
  border: 1px solid var(--gold-700);
  font-family: var(--font-mono);
  font-size: .8rem;
  transition: top var(--dur-fast) var(--ease-soft);
}
.skip-link:focus {
  top: calc(var(--space-sm) + env(safe-area-inset-top, 0px));
}

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

/* ---------------------------------------------------------------
   04. PROGRESSIVE-ENHANCEMENT HOOK
   script.js adds `.js` to <html> as its first act. Anything that
   depends on JS to reveal itself only hides itself under `.js`,
   so a no-script visit still shows all real content.
   --------------------------------------------------------------- */
html.js .hud { opacity: 0; pointer-events: none; }
html.js .hud.is-visible { opacity: 1; pointer-events: auto; }

html.js .relic-frame img { opacity: 0; }
html.js .relic-frame img.is-loaded { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  html.js body, html.js a, html.js button { cursor: none; }
}

/* ---------------------------------------------------------------
   05. CUSTOM CURSOR
   --------------------------------------------------------------- */
#cursor-rune, #cursor-dot {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) ease, transform .15s ease-out;
  will-change: transform;
}
#cursor-rune.is-active, #cursor-dot.is-active { opacity: 1; }

#cursor-rune { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
#cursor-rune svg { width: 100%; height: 100%; animation: rune-rotate 14s linear infinite; }
.rune-ring { fill: none; stroke: var(--hazard-400); stroke-width: 1; opacity: .8; }
.rune-mark { fill: none; stroke: var(--blood-500); stroke-width: 1.4; stroke-linecap: square; }
.rune-dot { fill: var(--hazard-400); }
#cursor-rune.is-hovering svg { transform: scale(1.6) rotate(45deg); }
#cursor-rune svg { transition: transform var(--dur-fast) var(--ease-soft); filter: drop-shadow(0 0 5px rgba(77, 166, 240, .4)); }

#cursor-dot {
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  background: var(--blood-500);
  box-shadow: 0 0 8px rgba(165, 29, 38, .8);
}

/* ---------------------------------------------------------------
   06. AMBIENT LAYERS — grain, vignette, fog
   --------------------------------------------------------------- */
.grain {
  position: fixed; inset: -10%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: grain-shift 1.4s steps(8) infinite;
}

/* Scanlines + a periodic CRT-interference jolt — the archive's
   copy machine glitching mid-scan. Purely ambient, never covers
   content long enough to hurt legibility. */
.interference {
  position: fixed; inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: overlay;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, .05) 0px,
    rgba(255, 255, 255, .05) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: interference-jolt 9s steps(1, end) infinite;
}

.vignette {
  position: fixed; inset: 0;
  z-index: var(--z-vignette);
  pointer-events: none;
  background:
    radial-gradient(circle 380px at var(--spotlight-x) var(--spotlight-y), rgba(77, 134, 201, .05), transparent 60%),
    radial-gradient(ellipse at center, transparent 32%, rgba(3, 2, 3, .92) 100%);
}

.fog { position: fixed; inset: 0; z-index: var(--z-fog); pointer-events: none; overflow: hidden; }
.fog-layer { position: absolute; inset: -25%; filter: blur(70px); mix-blend-mode: screen; opacity: .5; }
.fog-a { background: radial-gradient(ellipse 45% 35% at 20% 30%, rgba(28, 74, 134, .22), transparent 65%); animation: drift-a 72s ease-in-out infinite; }
.fog-b { background: radial-gradient(ellipse 40% 30% at 80% 60%, rgba(77, 134, 201, .12), transparent 65%); animation: drift-b 94s ease-in-out infinite; }
.fog-c { background: radial-gradient(ellipse 50% 40% at 50% 88%, rgba(0, 0, 0, .55), transparent 70%); animation: drift-c 112s ease-in-out infinite; }

@media (max-width: 640px) {
  .fog-layer { filter: blur(38px); }
  .grain { opacity: .04; }
}

/* ---------------------------------------------------------------
   07. PARTICLE CANVAS
   --------------------------------------------------------------- */
#particle-canvas {
  position: fixed; inset: 0;
  z-index: var(--z-canvas);
  pointer-events: none;
  width: 100%; height: 100%;
}

/* ---------------------------------------------------------------
   08. HUD + SCROLL PROGRESS
   --------------------------------------------------------------- */
.hud {
  position: fixed;
  top: calc(var(--space-sm) + env(safe-area-inset-top, 0px));
  right: calc(var(--space-sm) + env(safe-area-inset-right, 0px));
  z-index: var(--z-hud);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  transform: translateY(-10px);
  transition: opacity var(--dur-medium) var(--ease-cinematic), transform var(--dur-medium) var(--ease-cinematic);
}
.hud.is-visible { transform: translateY(0); }

.hud-seal {
  width: 38px; height: 38px;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 35% 30%, rgba(77, 134, 201, .15), var(--black-900) 70%);
  border: 1px solid var(--gold-700);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .6);
}
.hud-seal::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  background: conic-gradient(var(--gold-400) calc(var(--progress, 0) * 360deg), transparent 0deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  transition: background 1s var(--ease-soft);
}
.hud-seal::after {
  content: '';
  position: absolute; inset: 34%;
  border-radius: 50%;
  background: var(--gold-400);
  opacity: .7;
  box-shadow: 0 0 8px var(--gold-400);
}

#sound-toggle {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold-700);
  background: rgba(6, 5, 4, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--dur-fast) ease;
  overflow: hidden;
}
#sound-toggle:hover, #sound-toggle:focus-visible { border-color: var(--gold-400); }
#sound-toggle::before {
  content: '';
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle 40px at var(--hx, 50%) var(--hy, 50%), rgba(77, 134, 201, .35), transparent 70%);
  opacity: 0; transition: opacity var(--dur-fast) ease;
  pointer-events: none;
}
#sound-toggle:hover::before { opacity: 1; }

.sound-icon { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.sound-icon span {
  width: 3px; height: 5px;
  background: var(--gold-400);
  border-radius: 1px;
}
#sound-toggle[aria-pressed="true"] .sound-icon span { animation: eq-bounce .9s ease-in-out infinite; }
.sound-icon span:nth-child(1) { animation-delay: 0s; }
.sound-icon span:nth-child(2) { animation-delay: .15s; }
.sound-icon span:nth-child(3) { animation-delay: .3s; }

@supports not (backdrop-filter: blur(1px)) {
  #sound-toggle, .hud-seal, .hidden-overlay { background-color: rgba(6, 5, 4, .92); }
}

.scroll-progress {
  position: fixed; top: 0; left: 0;
  width: 3px; height: 100vh;
  z-index: var(--z-progress);
  background: rgba(255, 255, 255, .03);
  pointer-events: none;
}
.scroll-progress-bar {
  width: 100%; height: 100%;
  transform-origin: top;
  transform: scaleY(0);
  background: linear-gradient(to bottom, var(--gold-400), var(--blood-600));
  box-shadow: 0 0 12px rgba(77, 134, 201, .5);
}

/* ---------------------------------------------------------------
   09. SCROLL-REVEAL SYSTEM
   Keyed off [data-reveal] rather than .reveal — the reveal
   section's own wrapper reuses the class "reveal" for identity,
   not animation, so the attribute is the only safe hook.
   --------------------------------------------------------------- */
[data-reveal] {
  opacity: 1;
  transition:
    opacity var(--dur-slow) var(--ease-cinematic),
    transform var(--dur-slow) var(--ease-cinematic),
    filter var(--dur-slow) var(--ease-cinematic);
  transition-delay: var(--reveal-delay, 0s);
}

html.js [data-reveal] { opacity: 0; }
html.js [data-reveal="fade-up"] { transform: translateY(42px); }
html.js [data-reveal="mark"] { transform: scale(.82); filter: blur(6px); }
html.js [data-reveal="art"] { transform: translateY(30px) scale(.94); filter: blur(4px); }
html.js [data-reveal="stamp"] { transform: scale(1.6) rotate(-18deg); }
/* "fade" type: opacity only, covered by the base hide rule above */

html.js [data-reveal].is-visible { opacity: 1; transform: none; filter: none; }

/* ---------------------------------------------------------------
   10. SEAL / RUNE MOTIF (reusable, hero + final + hud)
   --------------------------------------------------------------- */
.seal-mount { position: relative; border-radius: 50%; }
.seal-mount::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--gold-500);
  box-shadow: 0 0 0 6px rgba(0, 0, 0, .35) inset, 0 0 24px rgba(77, 134, 201, .18);
  opacity: .8;
}
.seal-mount::after {
  content: '';
  position: absolute; inset: 12%;
  border-radius: 50%;
  border: 1px dashed rgba(77, 134, 201, .35);
  animation: seal-rotate 46s linear infinite;
}

.seal-mount--hero { position: absolute; inset: -8%; z-index: 1; }
.seal-mount--final {
  width: clamp(140px, 24vw, 220px); aspect-ratio: 1; margin-inline: auto; margin-bottom: var(--space-md);
  display: flex; align-items: center; justify-content: center;
}
.emblem-align--final { width: 68%; height: 68%; }

.seal-final-logo {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  filter: saturate(.85) contrast(1.05) drop-shadow(0 0 24px rgba(77, 134, 201, .3));
  animation: logo-breathe 6s ease-in-out infinite;
}

/* ---------------------------------------------------------------
   11. HERO
   --------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  padding-block: var(--space-2xl);
}
.hero-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 35%, rgba(13, 34, 69, .28), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero-content { position: relative; z-index: 1; max-width: 720px; padding-inline: var(--space-md); }

.hero-mark {
  position: relative;
  width: clamp(180px, 42vw, 320px);
  aspect-ratio: 1;
  margin-inline: auto;
  margin-bottom: var(--space-md);
}
.heartbeat-glow {
  position: absolute; inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28, 74, 134, .35), rgba(77, 134, 201, .12) 45%, transparent 70%);
  filter: blur(26px);
  animation: heartbeat 4.2s ease-in-out infinite;
  z-index: 0;
}
/* .emblem-align corrects for the emblem artwork sitting slightly
   off-centre within its source canvas, so the visible mark locks
   onto the centre of the rotating seal ring behind it. This offset
   lives on the wrapper (not the image) so it doesn't get clobbered
   by the logo-breathe scale animation on the img itself. */
.emblem-align { position: relative; z-index: 2; transform: translate(-0.93%, -4.39%); }
.emblem-align--hero { width: 100%; height: 100%; }

.hero-logo {
  display: block;
  width: 100%; height: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: saturate(.9) contrast(1.05) drop-shadow(0 0 30px rgba(77, 134, 201, .25)) drop-shadow(0 0 70px rgba(28, 74, 134, .22));
  animation: logo-breathe 6s ease-in-out infinite;
}

.hero-wordmark {
  font-family: var(--font-blackletter);
  font-weight: 700;
  font-size: clamp(3.4rem, 15vw, 8.5rem);
  letter-spacing: .01em;
  color: var(--parchment);
  text-shadow: 0 0 40px rgba(28, 74, 134, .4), 0 2px 0 rgba(0, 0, 0, .6);
  margin-bottom: .35em;
  animation: text-glitch 7s ease-in-out infinite;
}

.hero-case-no {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: .78rem;
  letter-spacing: .22em;
  color: var(--gold-400);
  overflow: hidden;
  padding: .25em .1em;
}
.hero-case-no::after {
  content: '';
  width: .5em; height: 1.1em;
  background: var(--gold-400);
  animation: blink 1.1s step-end infinite;
}
.hero-case-no::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--void);
  transform-origin: right center;
  z-index: 1;
}
html.js .hero-case-no.is-visible::before {
  animation: redact-wipe .7s var(--ease-cinematic) .35s forwards;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.btn-register {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--void);
  background: #f2c200;
  padding: .85em 1.8em;
  border: 1px solid var(--void);
  box-shadow: 4px 4px 0 0 #8a1620;
  transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft), background var(--dur-fast) ease;
}
.btn-register:hover, .btn-register:focus-visible {
  background: var(--parchment);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 #8a1620;
}
.btn-register:active { transform: translate(0, 0); box-shadow: 2px 2px 0 0 #8a1620; }

.btn-instagram {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .08em;
  color: #dbba4c;
  background: rgba(0, 0, 0, .3);
  padding: .78em 1.4em;
  border: 1px solid #6e5518;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-soft);
}
.btn-instagram svg { flex-shrink: 0; }
.btn-instagram:hover, .btn-instagram:focus-visible {
  border-color: #f2c200;
  color: #f2c200;
  transform: translate(-1px, -1px);
}

.scroll-cue {
  position: absolute;
  bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: .5em;
  color: var(--text-muted);
  font-size: .72rem;
  letter-spacing: .16em;
  transform: translate(-50%, 0);
  animation: cue-bob 2.6s ease-in-out infinite;
}
.scroll-cue svg { stroke: var(--gold-400); }

/* ---------------------------------------------------------------
   12. PROLOGUE
   --------------------------------------------------------------- */
.prologue {
  min-height: 80vh;
  display: flex;
  align-items: center;
  padding-block: var(--space-2xl);
}
.prologue-content { max-width: 700px; margin-inline: auto; padding-inline: var(--space-md); text-align: center; }
.prologue-line {
  font-size: clamp(1.05rem, 2.5vw, 1.55rem);
  line-height: 1.7;
  font-weight: 380;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}
.prologue-line--accent { color: var(--parchment); font-style: italic; }
.prologue-cta { margin-top: var(--space-lg); color: var(--gold-400); font-size: .82rem; letter-spacing: .14em; }

/* ---------------------------------------------------------------
   13. DEMON SECTIONS — SHARED
   --------------------------------------------------------------- */
.demon { position: relative; overflow: hidden; padding-block: var(--space-2xl); }
.demon-layout {
  position: relative; z-index: 1;
  max-width: 1280px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 8vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .demon-layout { grid-template-columns: 1fr 1fr; }
}

/* --- art / relic frame --- */
.demon-art { position: relative; }
.demon-art::before, .demon-art::after { /* evidence tape at top corners */
  content: '';
  position: absolute;
  top: -6px;
  width: 64px; height: 22px;
  background: linear-gradient(100deg, rgba(237, 230, 214, .55), rgba(237, 230, 214, .3) 60%, rgba(237, 230, 214, .5));
  border: 1px solid rgba(0, 0, 0, .2);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .35);
  z-index: 4;
  pointer-events: none;
}
.demon-art::before { left: 8%; transform: rotate(-7deg); }
.demon-art::after  { right: 8%; transform: rotate(6deg); }

.demon[data-theme="egotism"] .relic-frame,
.demon[data-theme="ignorance"] .relic-frame { rotate: -1.3deg; }
.demon[data-theme="escalation"] .relic-frame,
.demon[data-theme="silence"] .relic-frame { rotate: 1.1deg; }

.relic-frame {
  position: relative;
  aspect-ratio: 1200 / 1620;
  max-width: 400px;
  margin-inline: auto;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, var(--black-800), var(--black-900));
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  box-shadow:
    0 0 0 2px var(--black-900),
    0 0 0 3px var(--blood-600),
    4px 4px 0 0 var(--hazard-400),
    0 30px 60px -20px rgba(0, 0, 0, .85);
  transition: box-shadow var(--dur-fast) var(--ease-soft);
}
.relic-frame picture, .relic-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(55%) brightness(.8) contrast(1.25) saturate(1.05);
  transition: opacity .8s ease, filter .3s ease;
}
.relic-frame:hover, .relic-frame:focus-within {
  box-shadow:
    0 0 0 2px var(--black-900),
    0 0 0 3px var(--hazard-400),
    -4px 4px 0 0 var(--blood-600),
    0 30px 60px -20px rgba(0, 0, 0, .85);
}
.relic-frame:hover img, .relic-frame:focus-within img {
  filter: grayscale(20%) brightness(.92) contrast(1.2) saturate(1.15);
  animation: rgb-split .35s steps(2, end);
}

.relic-frame::before { /* two corner marks, evidence-tag style, not a full gallery frame */
  content: '';
  position: absolute; inset: 9px;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(var(--hazard-400), var(--hazard-400)) top left / 26px 3px no-repeat,
    linear-gradient(var(--hazard-400), var(--hazard-400)) top left / 3px 26px no-repeat,
    linear-gradient(var(--hazard-400), var(--hazard-400)) bottom right / 26px 3px no-repeat,
    linear-gradient(var(--hazard-400), var(--hazard-400)) bottom right / 3px 26px no-repeat;
  opacity: .9;
}
.relic-frame::after { /* copy-machine vignette */
  content: '';
  position: absolute; inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(3, 2, 3, .62) 100%);
  mix-blend-mode: multiply;
}

.relic-spotlight {
  position: absolute; inset: 0;
  z-index: 2;
  background: radial-gradient(circle 220px at var(--hx, 50%) var(--hy, 28%), rgba(77, 134, 201, .22), transparent 60%);
  mix-blend-mode: screen;
  opacity: .55;
  animation: torch-flicker 5.5s ease-in-out infinite;
  pointer-events: none;
}

.relic-plate {
  position: absolute;
  bottom: 14px; left: 50%;
  z-index: 4;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(6, 5, 4, .82);
  border: 2px solid var(--blood-500);
  outline: 1px solid var(--blood-500);
  outline-offset: 2px;
  color: var(--blood-500);
  font-weight: 700;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .4em .9em;
  white-space: nowrap;
  max-width: 88%;
  overflow: hidden;
  text-overflow: ellipsis;
  mix-blend-mode: screen;
}

/* --- text column --- */
.demon-text { position: relative; z-index: 1; }
.case-file-no {
  position: relative;
  display: inline-block;
  color: var(--gold-400);
  letter-spacing: .2em;
  font-size: .72rem;
  margin-bottom: var(--space-xs);
  opacity: .85;
  overflow: hidden;
  padding: .15em .05em;
}
.case-file-no::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--void);
  z-index: 1;
}
html.js .case-file-no.is-visible::before {
  animation: redact-wipe .65s var(--ease-cinematic) .2s forwards;
}
.demon-name {
  position: relative;
  font-family: var(--font-blackletter);
  font-size: clamp(3.2rem, 7.5vw, 6rem);
  line-height: .95;
  color: var(--parchment);
  text-shadow: 0 0 32px rgba(13, 34, 69, .55), 0 0 60px rgba(77, 134, 201, .12);
  margin-bottom: .22em;
  animation: text-glitch 8s ease-in-out infinite;
  animation-delay: calc(var(--reveal-delay, 0s) * -1);
}
.demon-epithet {
  font-style: italic;
  font-weight: 380;
  color: var(--gold-300);
  font-size: 1.08rem;
  letter-spacing: .03em;
  margin-bottom: var(--space-md);
  opacity: .9;
}
.demon-myth {
  font-size: 1.03rem;
  line-height: 1.85;
  font-weight: 380;
  color: var(--text-muted);
  max-width: 54ch;
  margin-bottom: var(--space-md);
}
.demon-philosophy {
  font-style: italic;
  font-weight: 380;
  color: var(--parchment);
  font-size: 1.02rem;
  line-height: 1.6;
  padding-left: var(--space-sm);
  border-left: 2px solid var(--gold-700);
  margin-block: var(--space-md);
}
.demon-philosophy span {
  display: block;
  font-style: normal;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--gold-400);
  font-size: .68rem;
  letter-spacing: .16em;
  margin-bottom: .4em;
}

.whisper {
  position: relative;
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 400;
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--gold-200);
  background: rgba(0, 0, 0, .28);
  padding: var(--space-sm) var(--space-md);
  margin-block: var(--space-lg);
  margin-left: var(--space-xs);
  max-width: 46ch;
  border: 1px dashed rgba(127, 176, 224, .3);
  transform: rotate(-.6deg);
  animation: whisper-flicker 6s ease-in-out infinite;
}
.whisper::before {
  content: '';
  position: absolute;
  top: -10px; left: 22px;
  width: 46px; height: 16px;
  background: rgba(77, 166, 240, .28);
  border: 1px solid rgba(77, 166, 240, .35);
  transform: rotate(-3deg);
}

.the-tell { font-size: .92rem; line-height: 1.6; color: var(--text-muted); }
.the-tell span {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--void);
  background: var(--hazard-400);
  border-radius: 0;
  padding: .2em .5em;
  margin-right: .6em;
  vertical-align: middle;
  transform: rotate(-1.2deg);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .5);
}

/* ---------------------------------------------------------------
   14. DEMON SECTIONS — PER-THEME TINT
   --------------------------------------------------------------- */
.demon[data-theme="egotism"]    { background: radial-gradient(ellipse 60% 50% at 80% 18%, rgba(77, 134, 201, .08), transparent 60%); }
.demon[data-theme="escalation"] { background: radial-gradient(ellipse 55% 45% at 18% 30%, rgba(28, 74, 134, .15), transparent 60%); }
.demon[data-theme="ignorance"]  { background: radial-gradient(ellipse 60% 50% at 82% 72%, rgba(237, 230, 214, .05), transparent 60%); }
.demon[data-theme="silence"]    { background: radial-gradient(ellipse 50% 40% at 18% 82%, rgba(0, 0, 0, .55), transparent 60%); }

/* ---------------------------------------------------------------
   15. SIGILS
   --------------------------------------------------------------- */
.sigil-mount {
  width: 60px; height: 60px;
  margin-top: var(--space-md);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(0 0 6px rgba(77, 134, 201, .3));
  animation: sigil-pulse 4.5s ease-in-out infinite;
}
.sigil-mount[data-demon="egotism"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='52' fill='none' stroke='%23c9a227' stroke-width='1.2' opacity='0.55'/%3E%3Cpath d='M60 32 L84 84 L36 84 Z' fill='none' stroke='%23c9a227' stroke-width='1.8'/%3E%3Cline x1='40' y1='68' x2='80' y2='68' stroke='%23c9a227' stroke-width='1.8'/%3E%3C/svg%3E");
}
.sigil-mount[data-demon="escalation"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='52' fill='none' stroke='%23c9a227' stroke-width='1.2' opacity='0.55'/%3E%3Cpath d='M30 82 L52 82 L52 64 L74 64 L74 46 L90 46' fill='none' stroke='%23c9a227' stroke-width='1.8' stroke-linecap='square'/%3E%3C/svg%3E");
}
.sigil-mount[data-demon="ignorance"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='52' fill='none' stroke='%23c9a227' stroke-width='1.2' opacity='0.55'/%3E%3Ccircle cx='60' cy='60' r='27' fill='none' stroke='%23c9a227' stroke-width='1.8' stroke-dasharray='5 8'/%3E%3C/svg%3E");
}
.sigil-mount[data-demon="silence"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Ccircle cx='60' cy='60' r='52' fill='none' stroke='%23c9a227' stroke-width='1.2' opacity='0.55'/%3E%3Cline x1='28' y1='60' x2='92' y2='60' stroke='%23c9a227' stroke-width='1.8'/%3E%3Ccircle cx='60' cy='60' r='4.5' fill='%23c9a227'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
   16. TRILOGY / TIMELINE
   --------------------------------------------------------------- */
.trilogy { padding-block: var(--space-2xl); text-align: center; }
.trilogy-title {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.01em;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  color: var(--parchment);
  margin-bottom: var(--space-xl);
}

.timeline {
  position: relative;
  max-width: 980px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
@media (min-width: 900px) {
  .timeline { flex-direction: row; justify-content: space-between; padding-top: var(--space-lg); }
}

.timeline-line {
  position: absolute;
  left: 10px; top: 0; bottom: 0;
  width: 2px;
  background: rgba(77, 134, 201, .15);
  mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
}
@media (min-width: 900px) {
  .timeline-line {
    left: 0; right: 0; top: 14px; bottom: auto;
    width: auto; height: 2px;
    mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
  }
}
.timeline-line-fill {
  position: absolute; inset: 0;
  transform-origin: 0 0;
  transform: scale(0, 1);
  background: linear-gradient(var(--gold-400), var(--blood-600));
}
@media (min-width: 900px) {
  .timeline-line-fill { background: linear-gradient(90deg, var(--gold-400), var(--blood-600)); }
}

.timeline-node { position: relative; padding-left: var(--space-lg); }
@media (min-width: 900px) {
  .timeline-node { flex: 1; padding-left: 0; padding-top: var(--space-lg); text-align: center; }
}
.timeline-node::before {
  content: '';
  position: absolute; left: 2px; top: 4px;
  width: 16px; height: 16px;
  border-radius: 0;
  background: var(--black-900);
  border: 2px solid var(--gold-400);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(77, 134, 201, .4);
}
@media (min-width: 900px) {
  .timeline-node::before { left: 50%; top: 6px; transform: translate(-50%, -50%) rotate(45deg); }
}
.timeline-node::after {
  content: '';
  position: absolute; inset: -14px -18px;
  z-index: -1;
  background: radial-gradient(circle 140px at var(--hx, 50%) var(--hy, 50%), rgba(77, 134, 201, .08), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
  pointer-events: none;
}
.timeline-node:hover::after { opacity: 1; }

.timeline-year { display: block; color: var(--gold-400); font-size: 1rem; margin-bottom: .3em; }
.timeline-status {
  display: block;
  font-family: var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--parchment);
  font-size: .82rem;
  margin-bottom: .6em;
}
.timeline-desc { color: var(--text-muted); font-size: .9rem; line-height: 1.6; max-width: 26ch; }
@media (min-width: 900px) { .timeline-desc { margin-inline: auto; } }

.timeline-node--current::before {
  width: 24px; height: 24px;
  border-color: var(--blood-600);
  animation: beacon-pulse 2.4s ease-out infinite;
}
.timeline-node--current .timeline-status { color: var(--blood-600); }

/* ---------------------------------------------------------------
   17. MID-PAGE REVEAL + TITLE LOCKUP
   --------------------------------------------------------------- */
#reveal.section { padding-block: var(--space-2xl); text-align: center; }
.reveal-content { max-width: 780px; margin-inline: auto; padding-inline: var(--space-md); }

.prophecy {
  font-size: clamp(1.08rem, 2.4vw, 1.5rem);
  line-height: 1.8;
  font-weight: 380;
  color: var(--text-muted);
  margin-bottom: var(--space-md);
}
.prophecy--accent { color: var(--parchment); font-style: italic; }

.title-lockup { margin-top: var(--space-xl); }
.title-lockup-eyebrow { color: var(--gold-400); letter-spacing: .22em; margin-bottom: .6em; }
.title-lockup-main {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.3rem, 7vw, 4.6rem);
  letter-spacing: -.01em;
  background: linear-gradient(180deg, var(--hazard-400), var(--gold-500) 55%, var(--blood-600));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 24px rgba(13, 34, 69, .35));
  margin-bottom: .3em;
}
.title-lockup-tag { color: var(--text-muted); font-size: 1rem; letter-spacing: .02em; }

/* ---------------------------------------------------------------
   18. CLOSING / FOOTER
   --------------------------------------------------------------- */
.closing {
  padding-block: var(--space-2xl) var(--space-xl);
  text-align: center;
  border-top: 1px solid rgba(77, 134, 201, .12);
}
.closing-content {
  max-width: 640px;
  margin-inline: auto;
  padding-inline: var(--space-md);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-sm);
}
.closing-dates { font-family: var(--font-display); letter-spacing: .12em; color: var(--gold-400); font-size: 1rem; }
.closing-venue { font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2rem); color: var(--parchment); margin-bottom: var(--space-sm); }
.closing-line { font-style: italic; font-size: 1.12rem; color: var(--text-muted); margin-block: var(--space-md); }
.closing-tags { color: var(--text-muted); font-size: .78rem; letter-spacing: .1em; }
.closing-fineprint { color: rgba(237, 230, 214, .35); font-size: .7rem; letter-spacing: .08em; margin-top: var(--space-md); }
.site-credit {
  color: rgba(237, 230, 214, .3);
  font-size: .66rem;
  letter-spacing: .06em;
  margin-top: var(--space-xl);
}
.site-credit a {
  color: rgba(237, 230, 214, .55);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(242, 194, 0, .4);
  transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}
.site-credit a:hover, .site-credit a:focus-visible {
  color: #f2c200;
  text-decoration-color: #f2c200;
}

/* ---------------------------------------------------------------
   19. STAMP COMPONENT
   --------------------------------------------------------------- */
.closing-stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 128px; height: 128px;
  margin-block: var(--space-lg);
  border-radius: 50%;
  border: 3px double var(--blood-600);
  color: var(--blood-600);
  font-family: var(--font-mono);
  position: relative;
  text-shadow: .5px .5px 0 currentColor, -.5px -.5px 0 currentColor;
}
html.js [data-reveal="stamp"].is-visible { transform: rotate(-8deg); }
.closing-stamp::before {
  content: '';
  position: absolute; inset: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: .5;
}
.stamp-label { font-size: .58rem; letter-spacing: .18em; margin-bottom: .3em; }
.stamp-word { font-size: 1.15rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.closing-stamp.is-closed {
  border-color: var(--hazard-400);
  color: var(--hazard-400);
  animation: stamp-slam .5s var(--ease-stamp);
}

/* ---------------------------------------------------------------
   20. HIDDEN PROPHECY OVERLAY (Konami easter egg)
   --------------------------------------------------------------- */
.hidden-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-overlay);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-md);
  background: rgba(3, 2, 3, .88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease-cinematic);
}
.hidden-overlay.is-open { opacity: 1; pointer-events: auto; }
.hidden-overlay-panel {
  max-width: 480px;
  width: 100%;
  background: var(--black-900);
  border: 2px solid var(--blood-700);
  outline: 1px dashed var(--hazard-400);
  outline-offset: -8px;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(28, 74, 134, .25);
  transform: scale(.92) rotate(-.6deg);
  transition: transform .5s var(--ease-cinematic);
}
.hidden-overlay.is-open .hidden-overlay-panel { transform: scale(1) rotate(0deg); }

.hidden-file-no { font-family: var(--font-mono); color: var(--hazard-400); letter-spacing: .16em; font-size: .72rem; margin-bottom: var(--space-sm); }
.hidden-text { font-family: var(--font-mono); color: var(--text-muted); line-height: 1.8; margin-bottom: var(--space-sm); }
.hidden-text--small { font-size: .74rem; opacity: .6; font-style: italic; }
#close-prophecy {
  position: relative;
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-weight: 700;
  border: 1px solid var(--blood-600);
  color: var(--hazard-400);
  padding: .6em 1.4em;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .72rem;
  overflow: hidden;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
#close-prophecy::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle 60px at var(--hx, 50%) var(--hy, 50%), rgba(77, 166, 240, .3), transparent 70%);
  opacity: 0; transition: opacity var(--dur-fast) ease;
}
#close-prophecy:hover, #close-prophecy:focus-visible { border-color: var(--hazard-400); }
#close-prophecy:hover::before { opacity: 1; }

/* ---------------------------------------------------------------
   21. BOTTOM TOAST
   --------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  max-width: min(90vw, 420px);
  background: var(--black-900);
  border: 1px solid var(--hazard-500);
  color: var(--parchment);
  padding: .8em 1.4em;
  font-size: .74rem;
  letter-spacing: .06em;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  display: flex; gap: .5em; flex-wrap: wrap; justify-content: center; text-align: center;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity .6s var(--ease-cinematic), transform .6s var(--ease-cinematic);
}
.toast span { color: var(--text-muted); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------
   22. KEYFRAME LIBRARY
   --------------------------------------------------------------- */
@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-2%, -3%); }
  20% { transform: translate(1%, 2%); }
  30% { transform: translate(3%, -1%); }
  40% { transform: translate(-1%, 3%); }
  50% { transform: translate(2%, -2%); }
  60% { transform: translate(-3%, 1%); }
  70% { transform: translate(1%, -3%); }
  80% { transform: translate(-2%, 2%); }
  90% { transform: translate(3%, 1%); }
}
@keyframes drift-a { 0% { transform: translate(-5%, -2%) scale(1); } 50% { transform: translate(4%, 3%) scale(1.08); } 100% { transform: translate(-5%, -2%) scale(1); } }
@keyframes drift-b { 0% { transform: translate(3%, 4%) scale(1.05); } 50% { transform: translate(-4%, -3%) scale(1); } 100% { transform: translate(3%, 4%) scale(1.05); } }
@keyframes drift-c { 0% { transform: translate(-2%, 3%) scale(1); } 50% { transform: translate(5%, -4%) scale(1.1); } 100% { transform: translate(-2%, 3%) scale(1); } }

@keyframes seal-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rune-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@keyframes heartbeat { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes logo-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes cue-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

@keyframes torch-flicker { 0%, 100% { opacity: .48; } 30% { opacity: .62; } 50% { opacity: .38; } 70% { opacity: .68; } }
@keyframes whisper-flicker {
  0%, 100% { text-shadow: 0 0 12px rgba(127, 176, 224, .25); }
  45% { text-shadow: 0 0 18px rgba(127, 176, 224, .4); }
  50% { text-shadow: 0 0 6px rgba(127, 176, 224, .15); }
  55% { text-shadow: 0 0 18px rgba(127, 176, 224, .4); }
}
@keyframes sigil-pulse {
  0%, 100% { opacity: .55; filter: drop-shadow(0 0 4px rgba(77, 134, 201, .25)); transform: scale(1); }
  50% { opacity: .9; filter: drop-shadow(0 0 13px rgba(77, 134, 201, .55)); transform: scale(1.06); }
}
@keyframes beacon-pulse { 0% { box-shadow: 0 0 0 0 rgba(28, 74, 134, .5); } 100% { box-shadow: 0 0 0 16px rgba(28, 74, 134, 0); } }
@keyframes stamp-flash { 0% { filter: brightness(1); } 30% { filter: brightness(1.8); } 100% { filter: brightness(1); } }
@keyframes eq-bounce { 0%, 100% { height: 5px; } 50% { height: 15px; } }

/* Copy-machine interference — a brief vertical shudder every few
   seconds, like the scanner catching on a bent page. */
@keyframes interference-jolt {
  0%, 92%, 100% { transform: translateY(0); opacity: .5; }
  93% { transform: translateY(-6px); opacity: .8; }
  94% { transform: translateY(4px); opacity: .3; }
  95% { transform: translateY(-2px); opacity: .7; }
  96% { transform: translateY(0); opacity: .5; }
}

/* Periodic RGB-split text glitch — long calm stretches, one hard
   jolt. Respects prefers-reduced-motion via the global override below. */
@keyframes text-glitch {
  0%, 91%, 100% { text-shadow: 0 0 40px rgba(28, 74, 134, .4), 0 2px 0 rgba(0, 0, 0, .6); transform: translate(0, 0); }
  92% { text-shadow: -3px 0 var(--blood-500), 3px 0 var(--hazard-400); transform: translate(-2px, 1px); }
  93% { text-shadow: 3px 0 var(--hazard-400), -3px 0 var(--blood-500); transform: translate(2px, -1px) skewX(2deg); }
  94% { text-shadow: -2px 0 var(--blood-500), 2px 0 var(--hazard-400); transform: translate(-1px, 0); }
  95% { text-shadow: 0 0 40px rgba(28, 74, 134, .4), 0 2px 0 rgba(0, 0, 0, .6); transform: translate(0, 0); }
}

/* A redaction bar wiping away to declassify a line of text. */
@keyframes redact-wipe {
  to { transform: scaleX(0); }
}
.hero-case-no::before, .case-file-no::before { transform-origin: right center; }

/* Rubber stamp slamming down — overshoot then settle, not a fade. */
@keyframes stamp-slam {
  0% { transform: scale(1.9) rotate(2deg); filter: brightness(2.4); }
  55% { transform: scale(.94) rotate(-9deg); filter: brightness(1.3); }
  75% { transform: scale(1.04) rotate(-7deg); }
  100% { transform: scale(1) rotate(-8deg); filter: brightness(1); }
}

/* Chromatic-aberration flicker on relic image hover — the copy
   machine catching a bad exposure. */
@keyframes rgb-split {
  0%, 100% { filter: grayscale(20%) brightness(.92) contrast(1.2) saturate(1.15); }
  50% {
    filter: grayscale(20%) brightness(1) contrast(1.3) saturate(1.3);
    -webkit-filter: grayscale(20%) brightness(1) contrast(1.3) saturate(1.3);
    box-shadow: -2px 0 var(--blood-500), 2px 0 var(--hazard-400);
  }
}

/* ---------------------------------------------------------------
   23. ACCESSIBILITY & FALLBACKS
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .fog-layer, .grain, .interference, .heartbeat-glow, .hero-logo, .sigil-mount, .relic-spotlight, .whisper,
  .hero-wordmark, .demon-name { animation: none !important; }
}

/* ---------------------------------------------------------------
   24. SCROLLBAR & SELECTION
   --------------------------------------------------------------- */
::selection { background: var(--hazard-500); color: var(--void); }
html { scrollbar-color: var(--blood-600) var(--black-900); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--black-900); }
::-webkit-scrollbar-thumb { background: var(--blood-600); border: 2px solid var(--black-900); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--hazard-400); }