/* ==========================================================================
   FRAMER MOTION SIMULATION ENGINE FOR VISTANUT CASHEWS
   Spring curves, Scroll Stagger, Hover Physics, and Floating Keyframes
   ========================================================================== */

/* 1. Spring-like Easing Curves */
:root {
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2. Scroll Reveal Animations (IntersectionObserver driven with Framer Motion Scale & Opacity) */
.motion-reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.94);
  transition: opacity 0.75s var(--ease-spring), transform 0.75s var(--ease-spring);
  will-change: opacity, transform;
}

.motion-reveal.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.motion-reveal-left {
  opacity: 0;
  transform: translateX(-35px) scale(0.95);
  transition: opacity 0.85s var(--ease-spring), transform 0.85s var(--ease-spring);
  will-change: opacity, transform;
}

.motion-reveal-left.is-revealed {
  opacity: 1 !important;
  transform: translateX(0) scale(1) !important;
}

.motion-reveal-right {
  opacity: 0;
  transform: translateX(35px) scale(0.95);
  transition: opacity 0.85s var(--ease-spring), transform 0.85s var(--ease-spring);
  will-change: opacity, transform;
}

.motion-reveal-right.is-revealed {
  opacity: 1 !important;
  transform: translateX(0) scale(1) !important;
}

.motion-reveal-scale {
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.7s var(--ease-spring), transform 0.7s var(--ease-spring);
  will-change: opacity, transform;
}

.motion-reveal-scale.is-revealed {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* 2b. Ken Burns Background Zoom for Full-Bleed Slider */
@keyframes kenBurnsZoom {
  0% {
    transform: scale(1.02);
  }
  50% {
    transform: scale(1.10);
  }
  100% {
    transform: scale(1.04);
  }
}

.ken-burns-img {
  animation: kenBurnsZoom 14s ease-in-out infinite alternate;
  transform-origin: center center;
  will-change: transform;
}

/* Backward compatibility for animate-on-scroll */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s var(--ease-spring), transform 0.75s var(--ease-spring);
}

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

/* 3. Automatic Staggered Delays for Grid Children */
.motion-stagger > *:nth-child(1) { transition-delay: 0.05s; }
.motion-stagger > *:nth-child(2) { transition-delay: 0.12s; }
.motion-stagger > *:nth-child(3) { transition-delay: 0.19s; }
.motion-stagger > *:nth-child(4) { transition-delay: 0.26s; }
.motion-stagger > *:nth-child(5) { transition-delay: 0.33s; }
.motion-stagger > *:nth-child(6) { transition-delay: 0.40s; }
.motion-stagger > *:nth-child(7) { transition-delay: 0.47s; }
.motion-stagger > *:nth-child(8) { transition-delay: 0.54s; }

/* 4. Interactive Framer-Motion Style Hover Effects */
.motion-card {
  transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-spring), border-color 0.25s ease;
  will-change: transform, box-shadow;
}

.motion-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 20px 35px -10px rgba(139, 0, 0, 0.16), 0 8px 16px -6px rgba(0, 0, 0, 0.08);
  border-color: rgba(139, 0, 0, 0.35) !important;
}

.motion-btn {
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s var(--ease-spring), background-color 0.2s ease;
}

.motion-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 22px rgba(212, 175, 55, 0.45);
}

.motion-btn:active {
  transform: translateY(1px) scale(0.98);
}

/* 5. Floating Keyframes for Cashew Nuts and Packages */
@keyframes floatCashew1 {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-24px) rotate(14deg) scale(1.04);
  }
}

@keyframes floatCashew2 {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-18px) rotate(-16deg) scale(0.97);
  }
}

@keyframes floatCashew3 {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-28px) rotate(10deg) scale(1.05);
  }
}

@keyframes floatCashew4 {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-20px) rotate(-8deg) scale(1.02);
  }
}

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

@keyframes pulseBacklight {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

.animate-cashew-1 {
  animation: floatCashew1 6.5s ease-in-out infinite;
}

.animate-cashew-2 {
  animation: floatCashew2 8s ease-in-out infinite 0.7s;
}

.animate-cashew-3 {
  animation: floatCashew3 7.2s ease-in-out infinite 1.4s;
}

.animate-cashew-4 {
  animation: floatCashew4 9s ease-in-out infinite 2s;
}

.animate-pouch-main {
  animation: floatPouchMain 5.5s ease-in-out infinite;
}

.animate-backlight {
  animation: pulseBacklight 4s ease-in-out infinite;
}