/*!
 * Nova Peak Kitchens -- Keyframe animations & animation utility classes.
 * Kept subtle and premium; heavy movement is intentionally avoided.
 */

@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

@keyframes scrollCue {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}

@keyframes pulseRing {
  0% { transform: scale(0.9); opacity: 0.55; }
  80% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes skeletonShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: translateX(0); }
}

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

.anim-fade-in { animation: fadeIn var(--dur-slow) var(--ease) both; }
.anim-fade-in-up { animation: fadeInUp var(--dur-slow) var(--ease) both; }
.anim-fade-in-down { animation: fadeInDown var(--dur-slow) var(--ease) both; }
.anim-slide-in-right { animation: slideInRight var(--dur-slow) var(--ease) both; }

.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.2s; }
.anim-delay-3 { animation-delay: 0.3s; }
.anim-delay-4 { animation-delay: 0.4s; }

.hero-floaters .floater {
  animation: floatY 6s ease-in-out infinite;
}
.hero-floaters .floater:nth-child(2) {
  animation-delay: 1.2s;
  animation-duration: 7.5s;
}
.hero-floaters .floater:nth-child(3) {
  animation-delay: 2.4s;
  animation-duration: 5.5s;
}

.spin {
  animation: spin 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero-media img { animation: none; }
  .hero-floaters .floater { animation: none; }
  .fab-whatsapp::before { animation: none; }
}