/* ==========================================================================
   Animations — subtle, per README §13. Everything here is either a
   one-shot load-in effect or a scroll-triggered reveal driven by
   assets/js/reveal.js (IntersectionObserver adding `.is-visible`).
   ========================================================================== */

/* ---------------------------------------------------------------------
   Scroll/load reveal — fade + slight upward movement.
   Used on: entry card, polaroids, letter card pieces, chapter headings,
   final section (`reveal` class applied in the relevant templates).
   --------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-base) ease-out, transform var(--duration-base) ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Small stagger so groups of polaroids don't all pop at once. */
.photo-collage .reveal:nth-child(2) {
  transition-delay: 0.08s;
}
.photo-collage .reveal:nth-child(3) {
  transition-delay: 0.16s;
}
.photo-collage .reveal:nth-child(4) {
  transition-delay: 0.24s;
}

/* Letter card cascade — greeting, then body, then memory quote. */
.letter__greeting.reveal {
  transition-delay: 0.1s;
}
.letter__body.reveal {
  transition-delay: 0.2s;
}
.letter__memory.reveal {
  transition-delay: 0.3s;
}

/* Chapter heading fade-in ahead of its body/photos. */
.chapter__title.reveal {
  transition-delay: 0.05s;
}

/* ---------------------------------------------------------------------
   Entry page background — slow one-shot fade on load.
   --------------------------------------------------------------------- */

.entry__scene {
  animation: bg-fade-in var(--duration-slow) ease both;
}

@keyframes bg-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------------------------------------------------------------------
   Button hover — already has a transform transition in global.css;
   this just keeps the timing token consistent with the rest of the
   animation system.
   --------------------------------------------------------------------- */

.btn {
  transition: transform var(--duration-fast) ease, background var(--duration-fast) ease;
}

/* ---------------------------------------------------------------------
   Reduced motion — disable/shorten everything site-wide, and make sure
   `.reveal` elements are simply visible rather than stuck at opacity:0
   (JS still runs, but this is the safety net if it doesn't).
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .entry__scene {
    animation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}