:root {
  --black: #070506;
  --near-black: #0b0709;
  --burgundy: #2a0810;
  --deep-red: #4a0f1c;
  --rose: #b81c3a;
  --rose-bright: #d92c4c;
  --gold: #c9a15a;
  --ink: #f3ece6;
  --muted: rgba(243, 236, 230, 0.58);
  --faint: rgba(243, 236, 230, 0.28);

  --serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --accent-serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", -apple-system, BlinkMacSystemFont, sans-serif;

  --ease: cubic-bezier(0.22, 0.9, 0.32, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --z-bg: 1;
  --z-grain: 3;
  --z-content: 10;
  --z-hud: 40;
  --z-curtain: 90;
  --z-gate: 100;

  --music-level: 0;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--black);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}
body { min-height: 100dvh; }
body.is-story-open { overflow-x: hidden; }

h1, h2, h3, p { margin: 0; }
button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
canvas { display: block; }

::selection { background: var(--rose); color: var(--ink); }

/* -------------------------------------------------------------------
   Focus states — visible, elegant, never suppressed.
   ------------------------------------------------------------------- */
:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

/* -------------------------------------------------------------------
   Fixed atmosphere layers.
   ------------------------------------------------------------------- */
.particle-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: var(--z-bg);
  pointer-events: none;
}
.film-grain {
  position: fixed; inset: -10%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  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)'/%3E%3C/svg%3E");
  animation: grain-shift 8s steps(6) infinite;
}
@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-2%, 1%); }
}
.vignette {
  position: fixed; inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 45%, rgba(0,0,0,0.55) 100%);
}
.light-leak {
  position: fixed; inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.35;
  background:
    radial-gradient(38% 30% at 12% 0%, rgba(184,28,58,0.14), transparent 60%),
    radial-gradient(30% 24% at 100% 100%, rgba(201,161,90,0.08), transparent 60%);
}

/* -------------------------------------------------------------------
   HUD — sound toggle + the almost-invisible progress indicator.
   ------------------------------------------------------------------- */
.hud-btn {
  position: fixed; top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: var(--z-hud);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(10,8,8,0.72);
  color: var(--muted);
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.hud-btn:hover { color: var(--ink); }
.hud-btn svg { width: 18px; height: 18px; }
.hud-btn .icon-sound-off { display: none; }
.hud-btn[aria-pressed="true"] .icon-sound-on { display: none; }
.hud-btn[aria-pressed="true"] .icon-sound-off { display: block; }

.cursor-glow {
  position: fixed; top: 0; left: 0;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(217,44,76,0.5), rgba(217,44,76,0) 70%);
  pointer-events: none;
  z-index: var(--z-hud);
  mix-blend-mode: screen;
  opacity: 0.65;
  transition: width 0.3s var(--ease), height 0.3s var(--ease), margin 0.3s var(--ease), opacity 0.3s var(--ease), background 0.3s var(--ease);
  will-change: transform;
}
.cursor-glow.is-active {
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  opacity: 1;
  background: radial-gradient(circle, rgba(201,161,90,0.5), rgba(201,161,90,0) 70%);
}
@media (hover: none), (pointer: coarse) { .cursor-glow { display: none; } }

.progress-indicator {
  position: fixed; left: max(18px, env(safe-area-inset-left));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: var(--z-hud);
  font-family: var(--accent-serif);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--faint);
  opacity: 0.4;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.progress-indicator.is-hidden { opacity: 0; }
.progress-sep { margin: 0 0.25em; opacity: 0.5; }

/* -------------------------------------------------------------------
   Reduced motion: swap cinematic movement for elegant fades everywhere.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 180ms !important; }
  .film-grain { animation: none; }
}

/* -------------------------------------------------------------------
   Shared reveal primitive — used by every scene's [data-line] text.
   ------------------------------------------------------------------- */
[data-line] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-line].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.accent {
  font-family: var(--accent-serif);
  font-style: italic;
  color: var(--rose-bright);
  text-shadow: 0 0 22px rgba(217, 44, 76, 0.35);
}

.tap-hint {
  font-family: var(--accent-serif);
  font-style: italic;
  font-size: clamp(12px, 3vw, 14px);
  color: var(--faint);
  letter-spacing: 0.04em;
}