/*
  CarlosSuarezArt — Motion
  Every keyframe on the site lives here, in one place, so
  prefers-reduced-motion can be handled once rather than re-implemented
  per page. Bible §18: slow fades, gentle reveals, nothing bouncy.
*/

/* ===== Sitewide page-load fade (used by body in base.css) =====
   Every page arrives gently rather than popping in — this is what
   makes a static multi-page site not feel like a stack of separate
   documents snapping into place. */
@keyframes page-fade-in{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* ===== Generic reveal keyframe — fade + slight rise.
   Used by both the Home ceremony (home.css) and the scroll-reveal
   utility below. ===== */
@keyframes reveal-up{
  from{
    opacity: 0;
    transform: translateY(10px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Scroll-reveal utility (paired with assets/js/reveal.js) =====
   Elements start hidden and rise into place once they enter the
   viewport. reveal.js adds .is-visible via IntersectionObserver. */
[data-reveal]{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-reveal) var(--ease-gentle),
              transform var(--duration-reveal) var(--ease-gentle);
}

[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ===== Respect prefers-reduced-motion globally =====
   One rule, applied everywhere, rather than per-component overrides.
   Content simply appears in its settled state — no animation plays,
   nothing is ever hidden waiting for motion that won't happen. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal]{
    opacity: 1;
    transform: none;
  }
}