/* ==========================================================================
   Fork Yeah! — Animations
   Keyframes, scroll-triggered reveals, and motion safety.
   ========================================================================== */

/* ==========================================================================
   Sparkle Float
   ========================================================================== */

@keyframes sparkle-float {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-12px) scale(1.2);
    opacity: 1;
  }
}

/* ==========================================================================
   Hero Swipe Card Animation
   ========================================================================== */

/* Card swiping right (Fork Yeah!) */
@keyframes card-swipe-right {
  0% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: translateX(10px) rotate(3deg);
    opacity: 1;
  }
  100% {
    transform: translateX(200px) rotate(15deg);
    opacity: 0;
  }
}

/* Card swiping left (Fork No) */
@keyframes card-swipe-left {
  0% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: translateX(-10px) rotate(-3deg);
    opacity: 1;
  }
  100% {
    transform: translateX(-200px) rotate(-15deg);
    opacity: 0;
  }
}

/* Card promoting from position 2 to position 1 */
@keyframes card-promote-2to1 {
  0% {
    transform: scale(0.95) translateY(8px);
    opacity: 0.7;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* Card promoting from position 3 to position 2 */
@keyframes card-promote-3to2 {
  0% {
    transform: scale(0.9) translateY(16px);
    opacity: 0.4;
  }
  100% {
    transform: scale(0.95) translateY(8px);
    opacity: 0.7;
  }
}

/* New card entering at position 3 */
@keyframes card-enter-back {
  0% {
    transform: scale(0.85) translateY(24px);
    opacity: 0;
  }
  100% {
    transform: scale(0.9) translateY(16px);
    opacity: 0.4;
  }
}

/* JS-applied animation classes */
.demo-card.swiping-right {
  animation: card-swipe-right 0.4s var(--ease-out) forwards;
  z-index: 10;
}

.demo-card.swiping-right .demo-card__overlay--yeah {
  opacity: 1;
}

.demo-card.swiping-left {
  animation: card-swipe-left 0.4s var(--ease-out) forwards;
  z-index: 10;
}

.demo-card.swiping-left .demo-card__overlay--no {
  opacity: 1;
}

.demo-card.promoting-2to1 {
  animation: card-promote-2to1 0.3s var(--ease-smooth) forwards;
}

.demo-card.promoting-3to2 {
  animation: card-promote-3to2 0.3s var(--ease-smooth) forwards;
}

.demo-card.entering-back {
  animation: card-enter-back 0.3s var(--ease-smooth) forwards;
}

/* ==========================================================================
   Step Demo Animations
   ========================================================================== */

@keyframes step-swipe-hint {
  0%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  40% {
    transform: translateX(8px) rotate(2deg);
  }
  60% {
    transform: translateX(8px) rotate(2deg);
  }
}

@keyframes step-arrow-bounce {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.5;
  }
  40% {
    transform: translateX(6px);
    opacity: 1;
  }
  60% {
    transform: translateX(6px);
    opacity: 1;
  }
}

@keyframes step-rate-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(78, 124, 89, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 8px rgba(78, 124, 89, 0);
  }
}

@keyframes step-result-appear {
  0%, 30% {
    opacity: 0;
    transform: translateY(8px);
  }
  50%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Scroll-triggered Fade In
   ========================================================================== */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slower) var(--ease-out),
              transform var(--duration-slower) var(--ease-out);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.features__grid .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.features__grid .animate-on-scroll:nth-child(2) { transition-delay: 80ms; }
.features__grid .animate-on-scroll:nth-child(3) { transition-delay: 160ms; }
.features__grid .animate-on-scroll:nth-child(4) { transition-delay: 240ms; }
.features__grid .animate-on-scroll:nth-child(5) { transition-delay: 320ms; }
.features__grid .animate-on-scroll:nth-child(6) { transition-delay: 400ms; }

.ratings__grid .animate-on-scroll:nth-child(1) { transition-delay: 0ms; }
.ratings__grid .animate-on-scroll:nth-child(2) { transition-delay: 120ms; }
.ratings__grid .animate-on-scroll:nth-child(3) { transition-delay: 240ms; }

/* Hero entrance */
@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__badge {
  animation: hero-fade-up 0.8s var(--ease-out) 0.2s both;
}

.hero__title {
  animation: hero-fade-up 0.8s var(--ease-out) 0.35s both;
}

.hero__subtitle {
  animation: hero-fade-up 0.8s var(--ease-out) 0.5s both;
}

.hero__actions {
  animation: hero-fade-up 0.8s var(--ease-out) 0.65s both;
}

.hero__visual {
  animation: hero-fade-up 1s var(--ease-out) 0.5s both;
}

/* ==========================================================================
   Phone action highlight animation
   ========================================================================== */

@keyframes action-pulse-yeah {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes action-pulse-no {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.phone-action--yeah.pulsing {
  animation: action-pulse-yeah 0.3s var(--ease-bounce);
}

.phone-action--no.pulsing {
  animation: action-pulse-no 0.3s var(--ease-bounce);
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@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;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }

  .hero__badge,
  .hero__title,
  .hero__subtitle,
  .hero__actions,
  .hero__visual {
    animation: none;
    opacity: 1;
    transform: none;
  }
}