/* ===== ANIMATION CLASSES ===== */

/* Base: hidden before scroll trigger */
.animate-on-scroll {
  opacity: 0;
  will-change: transform, opacity;
}
.animate-on-scroll.visible {
  animation-fill-mode: forwards;
}

/* Fade in + slide up */
.fade-in-up {
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade in from left */
.fade-in-left {
  transform: translateX(-40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade in from right */
.fade-in-right {
  transform: translateX(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale in */
.scale-in {
  transform: scale(0.8);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.stagger-delay-1 { transition-delay: 0.1s; }
.stagger-delay-2 { transition-delay: 0.2s; }
.stagger-delay-3 { transition-delay: 0.3s; }
.stagger-delay-4 { transition-delay: 0.4s; }
.stagger-delay-5 { transition-delay: 0.5s; }
.stagger-delay-6 { transition-delay: 0.6s; }

/* ===== KEYFRAMES ===== */

/* CTA shimmer sweep */
@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 150%; }
}

/* Launch banner live dot */
@keyframes live-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(168, 146, 114, 0.5);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 8px rgba(168, 146, 114, 0);
    opacity: 0.7;
  }
}

/* Phone mockup float */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.hero-mockup .phone-frame {
  animation: float 4s ease-in-out infinite;
}

/* Scroll chevron bounce */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(8px); }
  60% { transform: translateY(4px); }
}

.scroll-chevron {
  animation: bounce 2s ease infinite;
}

/* CTA pulse */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(194, 168, 125, 0.35); }
  70% { box-shadow: 0 0 0 14px rgba(194, 168, 125, 0); }
  100% { box-shadow: 0 0 0 0 rgba(194, 168, 125, 0); }
}

.play-badge-link .play-badge {
  animation: pulse 2.5s ease-in-out infinite;
}

/* Steps line draw */
@keyframes drawLine {
  from { height: 0; }
  to { height: 100%; }
}

.steps-line-progress {
  height: 0;
  transition: height 1.5s ease-out;
}
.steps-line-progress.active {
  height: 100%;
}

/* Navbar slide-down for mobile menu */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero-mockup .phone-frame {
    animation: none;
  }

  .scroll-chevron {
    animation: none;
  }

  .play-badge-link .play-badge {
    animation: none;
  }

  .launch-pulse {
    animation: none;
  }

  .steps-line-progress {
    transition: none;
    height: 100% !important;
  }

  .stagger-delay-1,
  .stagger-delay-2,
  .stagger-delay-3,
  .stagger-delay-4,
  .stagger-delay-5,
  .stagger-delay-6 {
    transition-delay: 0s !important;
  }

  /* Disable new dynamic enhancements */
  .section-underline {
    width: 60px !important;
    transition: none !important;
  }

  .reveal-word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .step-number {
    transform: none !important;
    transition: none !important;
  }

  .btn-accent::after {
    animation: none !important;
    display: none;
  }

  .screenshot-phone,
  .screenshot-phone-center {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .screenshot-phone-center {
    transform: scale(1.1) !important;
  }

  .feature-card {
    transition: box-shadow var(--transition) !important;
  }

  .nav-progress {
    display: none;
  }
}