/* ============================================================
   LIGHT VERSION — theme layer
   Loaded AFTER the page's own style.css, so these rules win.
   The dark original is untouched; "dark" here re-uses the page's
   existing palette. "light" (the default) flips the CONTENT to a
   warm paper palette, while the cinematic hero video stays dark in
   both themes (its overlay text must remain light to read on video).
   Also adds: the theme toggle, and the audio "Sound" arrow hint.
============================================================ */

/* ---------- LIGHT PALETTE (content sections) ---------- */
html[data-theme="light"] {
  --bg:        #f4f1ea;   /* warm bone / gallery wall */
  --bg-soft:   #ece7db;   /* alternating section */
  --ink:       #2F2D2A;   /* warm near-black body ink */
  --ink-dim:   #5F5A55;   /* warm grey muted */
  --gold:      #8a6a22;   /* deep readable gold on cream */
  --gold-soft: #6b5018;
  --line:      rgba(138, 106, 34, 0.28);
  --paper:     #f4f1ea;   /* stable page bg for the hero-to-content fade */
}

/* The hero (and the lightbox) float over dark media in BOTH themes, so
   their overlay text must stay light. Re-assert the dark palette locally
   on those subtrees only. */
html[data-theme="light"] .hero,
html[data-theme="light"] .lightbox {
  --bg:        #050505;
  --bg-soft:   #0c0a08;
  --ink:       #ededeb;
  --ink-dim:   #8a8580;
  --gold:      #d6b269;
  --gold-soft: #b08a3a;
  --line:      rgba(214, 178, 105, 0.18);
}

/* Hero video must look IDENTICAL in light and dark: match the dark filter
   from style.css exactly so the light theme never brightens it. */
html[data-theme="light"] .hero__video {
  filter: brightness(0.65) contrast(1.05) saturate(1.05);
}

/* Keep the hero VIDEO clean and visible in light mode. Only a short, soft
   strip at the very bottom fades into the light page colour for the hand-off
   to the bright body — the earlier long fade washed the lower third of the
   video to white and ate subjects that sit low in frame (e.g. Void's
   performer). Radial darkening is kept light so the title still reads. */

/* ---------- CONTENT FIXES for light mode (hardcoded colours) ---------- */
/* hairline rules were white-on-black; flip to black-on-paper */
html[data-theme="light"] .foot { border-top-color: rgba(0,0,0,0.10); }
html[data-theme="light"] .press__list li { border-top-color: rgba(0,0,0,0.10); }
html[data-theme="light"] .press__list li:last-child { border-bottom-color: rgba(0,0,0,0.10); }

/* full-bleed black section/gallery backers → paper */
html[data-theme="light"] .scrub { background: var(--bg); }
html[data-theme="light"] .inst-media,
html[data-theme="light"] .gallery__item img { background: #e7e1d4; }
/* cutout figures keep TRANSPARENT backgrounds (the beige plate above is only for solid images) */
html[data-theme="light"] .gallery__item--cutout img { background: transparent; }
/* nudge the violet figure so its head lines up with the red figure's head.
   Use margin (NOT transform) so the hover hit-area matches the visual and the head
   is never clipped. Tune this value to align the black heads. */
.gallery__item.is-raised { margin-top: -30px; }
/* FLICKER FIX: Safari flashes the cutout figures on hover — it re-rasterizes the
   drop-shadow and briefly drops the layer. So: (1) promote each cutout to its own
   stable compositing layer, (2) kill the filter transition, and (3) make the hover
   filter IDENTICAL to the resting filter in both themes, so hovering changes nothing
   and triggers no repaint. */
.gallery__item--cutout img { transform: translateZ(0); -webkit-transform: translateZ(0); transition: none; }
html[data-theme="light"] .gallery__item--cutout img:hover { filter: drop-shadow(0 18px 40px rgba(60,50,20,0.22)); }
html[data-theme="dark"]  .gallery__item--cutout img:hover { filter: drop-shadow(0 24px 50px rgba(0,0,0,0.6)); }

/* tool highlight a touch stronger on paper */
html[data-theme="light"] .tool {
  background: linear-gradient(transparent 70%, rgba(132,100,32,0.22) 70%);
}
html[data-theme="light"] .tool:hover {
  background: linear-gradient(transparent 0%, rgba(132,100,32,0.30) 100%);
}

/* soften heavy black shadows that were tuned for a black page */
html[data-theme="light"] .reel__frame {
  box-shadow:
    0 30px 70px -28px rgba(60,50,20,0.45),
    0 0 0 1px rgba(132,100,32,0.12);
}
html[data-theme="light"] .gallery__item--cutout img,
html[data-theme="light"] .collection__feature-fig {
  filter: drop-shadow(0 18px 40px rgba(60,50,20,0.22));
}

/* Shadows: the prose figure backdrop veil darkened the centre for white
   text; in light mode it must LIGHTEN the centre for dark text, and the
   coloured particle figures sit softer on paper. */
html[data-theme="light"] .prose__figbg { opacity: 0.5; }
html[data-theme="light"] .prose__figbg-veil {
  background:
    radial-gradient(ellipse 60% 64% at 50% 47%,
      rgba(244,241,234,0.86) 0%, rgba(244,241,234,0.55) 55%, rgba(244,241,234,0) 100%),
    linear-gradient(to bottom,
      var(--bg) 0%, rgba(244,241,234,0) 14%, rgba(244,241,234,0) 86%, var(--bg) 100%);
}

/* ============================================================
   THEME TOGGLE  (fixed, top-right; legible over hero + content)
============================================================ */
.theme-toggle {
  position: fixed;
  top: clamp(14px, 2.2vw, 26px);
  right: clamp(14px, 2.2vw, 26px);
  z-index: 60;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(214,178,105,0.5);
  background: rgba(8,8,8,0.34);
  color: #ededeb;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  transition: border-color .3s, color .3s, background .3s, transform .2s;
}
.theme-toggle:hover { border-color: #d6b269; color: #d6b269; }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .ico-moon  { display: none; }
.theme-toggle .ico-sun { display: block; }

/* light mode: a translucent paper chip with a dark icon, readable both
   over the dark hero (the chip stays light) and over the light body. */
html[data-theme="light"] .theme-toggle {
  border-color: rgba(132,100,32,0.45);
  background: rgba(255,255,255,0.58);
  color: #211e18;
  box-shadow: 0 2px 12px rgba(60,50,20,0.18);
}
html[data-theme="light"] .theme-toggle:hover { border-color: #846420; color: #846420; }
html[data-theme="light"] .theme-toggle .ico-moon  { display: none; }
html[data-theme="light"] .theme-toggle .ico-sun { display: block; }
/* dark mode shows the sun (click → back to light) */
html[data-theme="dark"] .theme-toggle .ico-moon  { display: block; }
html[data-theme="dark"] .theme-toggle .ico-sun { display: none; }

@media (max-width: 520px) {
  .theme-toggle { width: 36px; height: 36px; top: 12px; right: 12px; }
}

/* ============================================================
   AUDIO ARROW HINT — points at the speaker (volume) icon.
   Same thin-line aesthetic as the "Scroll" indicator. Lives inside
   .hero__audio (so it inherits the hero's light palette), sits above
   the mute button, and fades away after the first user gesture.
============================================================ */
.audio-hint {
  position: absolute;
  left: 15px;                 /* centre of the 30px mute button */
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 7px;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity .7s ease, transform .7s ease;
}
.audio-hint.is-hidden { opacity: 0; transform: translateX(-50%) translateY(8px); }
.audio-hint__label {
  font-family: var(--sans);
  font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
  text-shadow: 0 0 8px rgba(0,0,0,0.75), 0 1px 4px rgba(0,0,0,0.6);
}
.audio-hint__pointer {
  display: flex; flex-direction: column; align-items: center;
  animation: audioHintBob 2.4s ease-in-out infinite;
}
.audio-hint__line {
  width: 1px; height: 22px;
  background: linear-gradient(to bottom, transparent, var(--ink));
  opacity: 0.7;
}
.audio-hint__arrow {
  width: 7px; height: 7px;
  margin-top: -4px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: rotate(45deg);
  opacity: 0.85;
}
@keyframes audioHintBob {
  0%, 100% { transform: translateY(0);   opacity: 0.55; }
  50%      { transform: translateY(3px); opacity: 1;    }
}

@media (prefers-reduced-motion: reduce) {
  .audio-hint__pointer { animation: none; }
}