/* Animation initial states — ONLY active when JS is running
   Without .js-animations-ready, all content is fully visible (no-JS safety) */

.js-animations-ready [data-animate] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.js-animations-ready .md-typeset h2,
.js-animations-ready .md-typeset h3 {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Phase 2: reveal state — applied by scroll-reveals.js */
.js-animations-ready [data-animate].is-visible,
.js-animations-ready .md-typeset h2.is-visible,
.js-animations-ready .md-typeset h3.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion override — even with JS active, show content immediately */
@media (prefers-reduced-motion: reduce) {
  .js-animations-ready [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js-animations-ready .md-typeset h2,
  .js-animations-ready .md-typeset h3 {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Phase 3: page-specific animation initial states — animated by page-animations.js (anime.js) */

/* Hero section: subtitle and description start hidden, animated by timeline */
.js-animations-ready .hero-subtitle,
.js-animations-ready .hero-description {
  opacity: 0;
}

/* Nav cards: stagger in on page load via anime.js */
.js-animations-ready .md-typeset .nav-card {
  opacity: 0;
  transform: translateY(20px);
}

/* Module cards: cascade on scroll via anime.js stagger (NOT data-animate/scroll-reveals) */
.js-animations-ready .module-card {
  opacity: 0;
  transform: translateY(20px);
}

/* Skill categories: stagger on scroll via anime.js (NOT data-animate/scroll-reveals) */
.js-animations-ready .skill-category {
  opacity: 0;
  transform: translateY(20px);
}

/* Phase 3: reduced motion — show all page-animated elements immediately */
@media (prefers-reduced-motion: reduce) {
  .js-animations-ready .hero-subtitle,
  .js-animations-ready .hero-description {
    opacity: 1;
  }

  .js-animations-ready .md-typeset .nav-card,
  .js-animations-ready .module-card,
  .js-animations-ready .skill-category {
    opacity: 1;
    transform: none;
  }
}