/**
 * ANIMATIONS.CSS
 * Scroll-triggered reveal animations
 *
 * Elements start hidden and fade in when they enter the viewport.
 * This creates a gentle, progressive disclosure effect.
 *
 * The JavaScript (reveal.js) adds the .visible class when elements
 * scroll into view using IntersectionObserver.
 *
 * Note: These animations are automatically disabled for users who
 * prefer reduced motion (handled in base.css).
 */

/* =============================
   SCROLL REVEAL ANIMATIONS
   Elements fade in and slide up when visible
   ============================= */

/* Initial hidden state */
.section,
.card,
.cta,
.hero {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
}

/* Visible state: Added by JavaScript when element enters viewport */
.section.visible,
.card.visible,
.cta.visible,
.hero.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================
   STAGGERED CARD ANIMATIONS
   Cards within a section animate sequentially
   ============================= */

/* Delay cards within visible sections for staggered effect */
.section.visible .card:nth-child(1) { transition-delay: 0.1s; }
.section.visible .card:nth-child(2) { transition-delay: 0.2s; }
.section.visible .card:nth-child(3) { transition-delay: 0.3s; }
.section.visible .card:nth-child(4) { transition-delay: 0.4s; }

/* =============================
   HOVER ANIMATIONS
   Subtle feedback on interactive elements
   ============================= */

/* Card lift effect is defined in components.css */
/* Button animations are defined in components.css */

/* Image hover zoom (optional, add .img-zoom class) */
.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform 0.3s ease;
}

.img-zoom:hover img {
  transform: scale(1.02);
}