/*
 * Motion: entrance + scroll-reveal, keyframes, page transitions.
 *
 * Scroll reveal replaces the AOS library. Templates keep their existing
 * data-aos / data-aos-delay attributes; js/main.js adds .is-inview when an
 * element enters the viewport.
 *
 * Content is only ever hidden when <html> carries .reveal-ready, which the
 * inline head script sets ONLY if JavaScript runs, IntersectionObserver exists
 * and the visitor has not asked for reduced motion. Without it, everything is
 * simply visible.
 */

.reveal-ready [data-aos] {
  opacity: 0;
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-ready [data-aos='fade-up'] { transform: translate3d(0, 24px, 0); }
.reveal-ready [data-aos='zoom-in'] { transform: translate3d(0, 16px, 0) scale(0.97); }

.reveal-ready [data-aos].is-inview {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Page-hero content gets a short staggered entrance on load */
@media (prefers-reduced-motion: no-preference) {
  .page-title .heading h1,
  .page-title .heading p,
  .page-title .heading .rating,
  .page-title .heading .animated-button,
  .page-title .course-hero-media,
  .hero-copy > *,
  .hero-visual {
    animation: pm-rise 800ms var(--ease-out) both;
  }

  .page-title .heading p,
  .hero-copy > :nth-child(2) { animation-delay: 80ms; }
  .page-title .heading .rating,
  .hero-copy > :nth-child(3) { animation-delay: 160ms; }
  .page-title .heading .animated-button { animation-delay: 220ms; }
  .page-title .course-hero-media,
  .hero-visual { animation-name: pm-rise-soft; animation-delay: 120ms; animation-duration: 1000ms; }

}

@keyframes pm-rise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: none; }
}

/* Keeps any existing transform (e.g. the hero tilt) by animating opacity only */
@keyframes pm-rise-soft {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pm-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

@keyframes pm-spin {
  to { transform: rotate(360deg); }
}

/* =====================================================================
   Reduced motion: everything works, nothing moves.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-ready [data-aos] { opacity: 1 !important; transform: none !important; }
  .page-title .course-hero-media { transform: none; }
  .card-pm:hover,
  .btn-pm:hover,
  .course-tile:hover { transform: none; }
}