/* Pocket Orchestra: theme tokens (owned by T7).
   The ONLY place theme colors are defined. Everyone else uses var(--x);
   canvases read them with getComputedStyle(document.documentElement) on load and on `orch:theme`.
   Evening (dark): velvet, deep shadows, warm gold. Matinee (light): ivory parchment, warm wood, burgundy velvet, gold.
   Instrument color = hsl(<hue> var(--hue-s) var(--hue-l)): text-safe (>= 4.5:1) on --bg/--surface/--surface-2 for every hue.
   Fills/glows that are not text may use --hue-l-fill instead of --hue-l.
   Text ON an instrument-colored fill hsl(<hue> var(--hue-s) var(--hue-l)): color: var(--on-hue).
   Extras beyond the contract: --accent-hi/--accent-lo (non-text gilt), --velvet-hi/--velvet-lo, --hue-l-fill, --on-hue, --font-display/--font-body. */

:root {
  color-scheme: light dark;
  --font-display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --font-body: 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;
  --theme-ease: cubic-bezier(.65, 0, .35, 1);
  --theme-fade: 560ms;

  /* Matinee (light) is the no-JS, no-preference default */
  --bg: #f4ecdc;
  --surface: #fbf6ec;
  --surface-2: #ece0c8;
  --ink: #2a1a12;
  --ink-muted: #654c3c;
  --line: rgb(122 84 40 / 0.24);
  --accent: #805a1a;
  --accent-hi: #c99a3e;
  --accent-lo: #5e400f;
  --accent-ink: #fffaf0;
  --velvet: #8c1d2e;
  --velvet-hi: #b8384a;
  --velvet-lo: #4f0b17;
  --glow: rgb(214 150 40 / 0.38);
  --stage-bg: #e8d9bd;
  --stage-floor: #a4703f;
  --shadow: rgb(84 52 22 / 0.22);
  --hue-s: 66%;
  --hue-l: 24%;
  --hue-l-fill: 42%;
  --on-hue: #fffaf0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d0709;
    --surface: #170c10;
    --surface-2: #22131a;
    --ink: #f3e9d6;
    --ink-muted: #b9a594;
    --line: rgb(214 178 108 / 0.22);
    --accent: #d6b26c;
    --accent-hi: #f2d99c;
    --accent-lo: #8c6a36;
    --accent-ink: #1a0e07;
    --velvet: #6a0f22;
    --velvet-hi: #9b1c33;
    --velvet-lo: #2e0610;
    --glow: rgb(255 196 104 / 0.55);
    --stage-bg: #0a0609;
    --stage-floor: #3b2415;
    --shadow: rgb(0 0 0 / 0.62);
    --hue-s: 72%;
    --hue-l: 70%;
    --hue-l-fill: 52%;
    --on-hue: #1a0e07;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4ecdc;
  --surface: #fbf6ec;
  --surface-2: #ece0c8;
  --ink: #2a1a12;
  --ink-muted: #654c3c;
  --line: rgb(122 84 40 / 0.24);
  --accent: #805a1a;
  --accent-hi: #c99a3e;
  --accent-lo: #5e400f;
  --accent-ink: #fffaf0;
  --velvet: #8c1d2e;
  --velvet-hi: #b8384a;
  --velvet-lo: #4f0b17;
  --glow: rgb(214 150 40 / 0.38);
  --stage-bg: #e8d9bd;
  --stage-floor: #a4703f;
  --shadow: rgb(84 52 22 / 0.22);
  --hue-s: 66%;
  --hue-l: 24%;
  --hue-l-fill: 42%;
  --on-hue: #fffaf0;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0709;
  --surface: #170c10;
  --surface-2: #22131a;
  --ink: #f3e9d6;
  --ink-muted: #b9a594;
  --line: rgb(214 178 108 / 0.22);
  --accent: #d6b26c;
  --accent-hi: #f2d99c;
  --accent-lo: #8c6a36;
  --accent-ink: #1a0e07;
  --velvet: #6a0f22;
  --velvet-hi: #9b1c33;
  --velvet-lo: #2e0610;
  --glow: rgb(255 196 104 / 0.55);
  --stage-bg: #0a0609;
  --stage-floor: #3b2415;
  --shadow: rgb(0 0 0 / 0.62);
  --hue-s: 72%;
  --hue-l: 70%;
  --hue-l-fill: 52%;
  --on-hue: #1a0e07;
}

html { background-color: var(--bg); color: var(--ink); }

/* ---------- theme switch: spotlight iris (View Transitions) ---------- */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }
::view-transition-old(root) { z-index: 1; }

/* fallback cross-fade where View Transitions are missing (theme.js adds the class for one fade) */
html.theme-fading,
html.theme-fading *,
html.theme-fading *::before,
html.theme-fading *::after {
  transition-property: background-color, color, border-color, outline-color, fill, stroke, box-shadow, text-decoration-color;
  transition-duration: var(--theme-fade);
  transition-timing-function: var(--theme-ease);
}

/* ---------- the toggle: "Matinée | Evening" with a sun that sets into a moon ---------- */
.orch-theme {
  --tt-w: 64px;
  --tt-h: 32px;
  --tt-knob: 24px;
  --tt-travel: calc(var(--tt-w) - var(--tt-knob) - 8px);
  --tt-spring: cubic-bezier(.5, -0.45, .3, 1.45);
  position: fixed;
  z-index: var(--theme-toggle-z, 60);
  right: max(16px, env(safe-area-inset-right)); /* top-right: the keys HUD owns the bottom edge */
  top: max(16px, env(safe-area-inset-top));
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
          backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 10px 30px -12px var(--shadow), inset 0 1px 0 rgb(255 255 255 / 0.06);
  color: var(--ink-muted);
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 200ms ease, box-shadow 300ms ease, border-color 300ms ease;
}
.orch-theme:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 12px 34px -12px var(--shadow), 0 0 0 4px color-mix(in srgb, var(--glow) 35%, transparent); }
.orch-theme:active { transform: scale(0.97); }
.orch-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.orch-theme .tt-word { position: relative; transition: color 400ms ease, opacity 400ms ease; }
.orch-theme .tt-word::after { /* gilt underline that draws in under the active word */
  content: ''; position: absolute; left: 0; right: 0.16em; bottom: -5px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 500ms cubic-bezier(.16, 1, .3, 1);
}
.orch-theme .tt-matinee::after { transform-origin: right; }
.orch-theme[aria-pressed="false"] .tt-matinee,
.orch-theme[aria-pressed="true"] .tt-evening { color: var(--accent); }
.orch-theme[aria-pressed="false"] .tt-matinee::after,
.orch-theme[aria-pressed="true"] .tt-evening::after { transform: scaleX(1); }

/* the sky */
.orch-theme .tt-track {
  position: relative; flex: none;
  width: var(--tt-w); height: var(--tt-h);
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffe7a8 0%, #f6c66f 55%, #e99b4c 100%);
  box-shadow: inset 0 1px 3px rgb(80 40 0 / 0.35), inset 0 -1px 0 rgb(255 255 255 / 0.35);
}
.orch-theme .tt-track::before { /* night sky, cross-faded in */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 80% 10%, #3a1c4a 0%, #1a0d26 45%, #0a0610 100%);
  opacity: 0; transition: opacity 600ms var(--theme-ease);
}
.orch-theme .tt-track::after { /* hall horizon: velvet seats silhouette */
  content: ''; position: absolute; left: -2px; right: -2px; bottom: -2px; height: 9px;
  background: radial-gradient(5px 5px at 4px 9px, var(--velvet) 98%, transparent) 0 0 / 8px 9px repeat-x;
  opacity: 0.85;
}

/* clouds drift across the matinee sky */
.orch-theme .tt-cloud {
  position: absolute; height: 6px; border-radius: 6px; background: rgb(255 255 255 / 0.85);
  box-shadow: 4px -3px 0 1px rgb(255 255 255 / 0.85);
  transition: transform 700ms var(--tt-spring), opacity 500ms ease;
}
.orch-theme .tt-cloud.c1 { width: 14px; top: 6px; right: 7px; }
.orch-theme .tt-cloud.c2 { width: 10px; top: 15px; right: 17px; opacity: 0.7; }

/* stars pop in, staggered, then twinkle */
.orch-theme .tt-star {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff6dc; box-shadow: 0 0 4px 1px rgb(255 236 190 / 0.8);
  opacity: 0; transform: scale(0);
  transition: opacity 300ms ease, transform 500ms var(--tt-spring);
}
.orch-theme .tt-star.s1 { left: 9px;  top: 7px; }
.orch-theme .tt-star.s2 { left: 17px; top: 15px; width: 2px; height: 2px; }
.orch-theme .tt-star.s3 { left: 25px; top: 5px;  width: 2px; height: 2px; }
.orch-theme .tt-star.s4 { left: 6px;  top: 17px; width: 2px; height: 2px; }
.orch-theme .tt-star.s5 { left: 31px; top: 13px; }

/* the sun / moon: .tt-orb travels, .tt-rays spin, .tt-knob is the disc; a masked "bite" carves the crescent */
@property --tt-bite { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
.orch-theme .tt-orb {
  position: absolute; top: calc((var(--tt-h) - var(--tt-knob)) / 2); left: 4px;
  width: var(--tt-knob); height: var(--tt-knob);
  filter: drop-shadow(0 0 4px rgb(255 186 64 / 0.9)) drop-shadow(0 1px 1px rgb(90 40 0 / 0.35));
  transform: translateX(0);
  transition: transform 720ms var(--tt-spring), filter 600ms ease;
}
.orch-theme .tt-rays {
  position: absolute; inset: -6px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(255 206 96 / 0.95) 0 8deg, transparent 8deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 55%, #000 70%, transparent 74%);
          mask: radial-gradient(circle, transparent 52%, #000 55%, #000 70%, transparent 74%);
  animation: tt-spin 14s linear infinite;
  transition: opacity 360ms ease, scale 600ms var(--tt-spring);
}
.orch-theme .tt-knob {
  --tt-bite: 0%;
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fffbe6 0%, #ffd766 38%, #f0a832 72%, #d9801f 100%);
  -webkit-mask: radial-gradient(circle at 80% 22%, transparent var(--tt-bite), #000 calc(var(--tt-bite) + 1%));
          mask: radial-gradient(circle at 80% 22%, transparent var(--tt-bite), #000 calc(var(--tt-bite) + 1%));
  transition: --tt-bite 760ms cubic-bezier(.16, 1, .3, 1) 120ms;
}
.orch-theme .tt-knob::before, .orch-theme .tt-knob::after { content: ''; position: absolute; inset: 0; border-radius: 50%; transition: opacity 500ms ease; }
.orch-theme .tt-knob::before { /* moonlight */
  background: radial-gradient(circle at 38% 40%, #fffdf4 0%, #f1e7cc 55%, #cdbd9a 100%);
  opacity: 0;
}
.orch-theme .tt-knob::after { /* craters */
  background:
    radial-gradient(circle at 30% 58%, rgb(140 118 86 / 0.55) 0 2.2px, transparent 2.7px),
    radial-gradient(circle at 50% 30%, rgb(140 118 86 / 0.45) 0 1.5px, transparent 2px),
    radial-gradient(circle at 46% 78%, rgb(140 118 86 / 0.4) 0 1.2px, transparent 1.7px);
  opacity: 0; transition-delay: 200ms;
}

/* ---- evening state ---- */
.orch-theme[aria-pressed="true"] .tt-track::before { opacity: 1; }
.orch-theme[aria-pressed="true"] .tt-cloud { transform: translate(14px, 18px); opacity: 0; }
.orch-theme[aria-pressed="true"] .tt-star { opacity: 1; transform: scale(1); animation: tt-twinkle 2.8s ease-in-out infinite; }
.orch-theme[aria-pressed="true"] .tt-star.s1 { transition-delay: 220ms; animation-delay: 0.9s; }
.orch-theme[aria-pressed="true"] .tt-star.s2 { transition-delay: 300ms; animation-delay: 1.6s; }
.orch-theme[aria-pressed="true"] .tt-star.s3 { transition-delay: 380ms; animation-delay: 0.4s; }
.orch-theme[aria-pressed="true"] .tt-star.s4 { transition-delay: 460ms; animation-delay: 2.1s; }
.orch-theme[aria-pressed="true"] .tt-star.s5 { transition-delay: 540ms; animation-delay: 1.2s; }
.orch-theme[aria-pressed="true"] .tt-orb {
  transform: translateX(var(--tt-travel));
  filter: drop-shadow(0 0 5px rgb(255 240 200 / 0.55)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.5));
}
.orch-theme[aria-pressed="true"] .tt-rays { opacity: 0; scale: 0.4; }
.orch-theme[aria-pressed="true"] .tt-knob { --tt-bite: 42%; }
.orch-theme[aria-pressed="true"] .tt-knob::before,
.orch-theme[aria-pressed="true"] .tt-knob::after { opacity: 1; }
.orch-theme:hover .tt-orb { translate: 2px 0; }
.orch-theme[aria-pressed="true"]:hover .tt-orb { translate: -2px 0; }

/* gold "house lights" flash that blooms from the switch on every change */
.orch-theme .tt-flash {
  position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 var(--glow); opacity: 0;
}
.orch-theme.is-flipping .tt-flash { animation: tt-flash 900ms cubic-bezier(.16, 1, .3, 1); }

@keyframes tt-spin { to { transform: rotate(1turn); } }
@keyframes tt-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes tt-flash {
  0% { opacity: 1; box-shadow: 0 0 0 0 var(--glow); }
  100% { opacity: 0; box-shadow: 0 0 0 18px transparent; }
}

.orch-theme .tt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 520px) {
  .orch-theme { padding: 5px; gap: 0; }
  .orch-theme .tt-word { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .orch-theme, .orch-theme *, .orch-theme *::before, .orch-theme *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation: none !important; }
  html.theme-fading, html.theme-fading * { transition: none !important; }
}

@media print { .orch-theme { display: none; } }