/* Fireworks canvas, floating music button, reduced-motion policy. */

.fireworks {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  display: none;
}
.fireworks.is-on { display: block; }
.fireworks canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s ease;
}
.fireworks.is-on canvas { opacity: 1; }

.music {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: clamp(44px, 12vw, 52px);
  height: clamp(44px, 12vw, 52px);
  border-radius: 50%;
  background: #3a2010;
  border: 1px solid var(--c-gold);
  color: #f4e3c7;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 101;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 0 8px rgba(212, 175, 55, 0.1);
  transition: box-shadow 0.3s ease;
}
.music.is-available { display: flex; }
.music svg { width: 24px; height: 24px; }
.music.is-playing { animation: music-pulse 3s ease-in-out infinite; }
@keyframes music-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 10px rgba(212,175,55,0.4), inset 0 0 10px rgba(212,175,55,0.2); }
  50%  { transform: scale(1.05); box-shadow: 0 0 25px rgba(212,175,55,0.7), inset 0 0 15px rgba(212,175,55,0.4); }
  100% { transform: scale(1);    box-shadow: 0 0 10px rgba(212,175,55,0.4), inset 0 0 10px rgba(212,175,55,0.2); }
}
.music__off { display: block; }
.music__on  { display: none; }
.music.is-playing .music__off { display: none; }
.music.is-playing .music__on  { display: block; }

/* A nudge in the empty space under the card, BEFORE anything is scratched.
   (The reference's equivalent is a post-reveal "scroll on" line; this page
   ends at scene 3, and after the reveal that space is taken by the PSD's own
   copy block, so the hint runs before instead of after and fades on reveal.) */
.reveal-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: 900px;
  z-index: 2;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 26px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--c-brown-mid);
  opacity: 0;
  animation: hint-in 1.5s 0.6s forwards ease-out;
}
@keyframes hint-in { to { opacity: 0.85; } }
.reveal-hint.is-done { opacity: 0; animation: none; transition: opacity 0.6s ease; }

/* ------------------------------------------------------- reduced motion
 * No breathing, no pulsing, no travelling light, no fireworks loops. The
 * reveals still happen — they just arrive instantly (js/main.js reads the
 * same query and hands GSAP duration 0). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .gate__seal,
  .gate__label,
  .card__border-halo,
  .card__border-glow,
  .breathing-heart,
  .hero__cue-label,
  .hero__cue-arrow,
  .music.is-playing { animation: none !important; }
  .card__border-glow { stroke-dashoffset: 0; opacity: 0.5; }
  .card__border-halo { stroke-dashoffset: 0; opacity: 0.2; }
  .fireworks { display: none !important; }
  .reveal-hint { opacity: 0.85; animation: none; }
}