/* Scrematrice Premium — motion utilities.
 * CONTENT FIRST: nothing is ever hidden by default.
 * JS progressively enhances with scroll reveals, but CSS never hides content.
 */

/* Default: everything visible. */
.scr-reveal,
.scr-stagger,
.scr-stagger > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 600ms var(--scr-ease-cinematic),
    transform 600ms var(--scr-ease-cinematic);
}

/* Only hidden if JS has both explicitly marked the element AND the user hasn't asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .scr-reveal.js-pre {
    opacity: 0;
    transform: translateY(20px);
  }
  .scr-stagger.js-pre > * {
    opacity: 0;
    transform: translateY(12px);
  }
  .scr-reveal.is-visible,
  .scr-stagger.is-visible > * {
    opacity: 1;
    transform: none;
  }
  .scr-stagger.is-visible > *:nth-child(2) { transition-delay: 70ms; }
  .scr-stagger.is-visible > *:nth-child(3) { transition-delay: 140ms; }
  .scr-stagger.is-visible > *:nth-child(4) { transition-delay: 210ms; }
  .scr-stagger.is-visible > *:nth-child(5) { transition-delay: 280ms; }
  .scr-stagger.is-visible > *:nth-child(6) { transition-delay: 350ms; }
}

/* Kinetic wordmark — variable scale on scroll */
.scr-kinetic-wordmark {
  will-change: transform;
  transition: transform 600ms var(--scr-ease-cinematic);
}

/* View Transitions API */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 300ms;
    animation-timing-function: var(--scr-ease-cinematic);
  }
}