/* =============================================================
   ANIMATIONS.CSS
   Scroll Reveals · Keyframes · Hover Transitions
   ============================================================= */


/* ─── SCROLL REVEAL ─── */

/**
 * Elements with .reveal start hidden and slide up into view
 * when they enter the viewport. The IntersectionObserver in
 * main.js adds the .visible class to trigger the transition.
 *
 * Use transition-delay inline on individual elements to
 * stagger sibling reveals:
 *   <div class="reveal" style="transition-delay: 0.1s">
 */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ─── SCROLL HINT BOB ─── */

/**
 * The scroll-down arrow in the hero bobs gently to draw attention.
 * Centered with translateX(-50%) so the Y keyframe must preserve it.
 */

@keyframes bob {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(5px);
  }
}

.scroll-hint {
  animation: bob 2.4s ease-in-out infinite;
}


/* ─── REDUCED MOTION ─── */

/**
 * Respects the user's OS-level "Reduce Motion" preference.
 * Reveals appear instantly; the scroll-hint bob stops.
 */

@media (prefers-reduced-motion: reduce) {

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .scroll-hint {
    animation: none;
  }
}