/* Calm cinematic reveals. Existing layout, type and frame rotations stay intact. */
:root {
  --reveal-duration: 1000ms;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-distance: 26px;
}
html[data-motion="on"] { scroll-behavior: smooth; }
.scroll-reveal {
  opacity: 0;
  translate: 0 var(--reveal-distance);
  transition: opacity var(--reveal-duration) var(--reveal-ease),
    translate var(--reveal-duration) var(--reveal-ease),
    scale var(--reveal-duration) var(--reveal-ease),
    clip-path var(--reveal-duration) var(--reveal-ease),
    background 300ms ease-out, transform 300ms ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-inline { display: inline-block; }
.reveal-image { scale: 0.97; translate: 0 16px; clip-path: inset(2% 0); }
.hero-image.reveal-image { translate: none; clip-path: none; overflow: hidden; }
.scroll-reveal.is-revealed, .scroll-reveal:focus-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  clip-path: inset(0);
}
.scroll-reveal:focus-visible { transition-delay: 0ms; }
html[data-motion="on"] .parallax-image {
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.07);
  transition: none;
}
.opened .music-button { animation: fadeIn 800ms var(--reveal-ease) both; }
dialog[open], dialog[open]::backdrop { animation: fadeIn 700ms var(--reveal-ease) both; }