/* animations.css — Scroll-triggered animations */

/* ========================================
   Animation Systems
   ========================================
   System 1: .animate-on-scroll → .is-visible (section content)
   System 2: .reveal → .visible (hero elements)
   Both systems are activated by IntersectionObserver in main.js.
   ======================================== */

/* Base state — hidden, shifted down */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

/* Visible state — fade in, slide up */
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for sequential elements */
.animate-on-scroll[data-delay="1"] { transition-delay: 100ms; }
.animate-on-scroll[data-delay="2"] { transition-delay: 200ms; }
.animate-on-scroll[data-delay="3"] { transition-delay: 300ms; }
.animate-on-scroll[data-delay="4"] { transition-delay: 400ms; }
.animate-on-scroll[data-delay="5"] { transition-delay: 500ms; }
.animate-on-scroll[data-delay="6"] { transition-delay: 600ms; }

/* ── Mockup v2 Reveal System ──────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

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

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .animate-on-scroll[data-delay="1"],
  .animate-on-scroll[data-delay="2"],
  .animate-on-scroll[data-delay="3"],
  .animate-on-scroll[data-delay="4"],
  .animate-on-scroll[data-delay="5"],
  .animate-on-scroll[data-delay="6"],
  .reveal-delay-1,
  .reveal-delay-2,
  .reveal-delay-3,
  .reveal-delay-4 {
    transition-delay: 0ms;
  }
}