/* ============================================
   V KOTE FOODS — Custom Animations
   ============================================ */

/* ---------- Fade Animations ---------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

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

/* ---------- Scale Animations ---------- */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes scaleUp {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

/* ---------- Slide Animations ---------- */
@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

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

/* ---------- Float Animation ---------- */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

/* ---------- Shimmer ---------- */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ---------- Gradient Shift ---------- */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------- Bounce ---------- */
@keyframes bounceGentle {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-12px); }
  60% { transform: translateY(-6px); }
}

/* ---------- Rotate ---------- */
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------- Draw Line ---------- */
@keyframes drawLine {
  from { height: 0; }
  to { height: 100%; }
}

/* ---------- Count Up (text) ---------- */
@keyframes countPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ---------- Ripple ---------- */
@keyframes ripple {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ---------- Text Reveal ---------- */
@keyframes textReveal {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* ---------- Blob Morph ---------- */
@keyframes blobMorph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; }
  75% { border-radius: 60% 40% 60% 30% / 60% 30% 40% 70%; }
}

/* ---------- Utility Animation Classes ---------- */
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-float-slow { animation: floatSlow 6s ease-in-out infinite; }
.animate-bounce { animation: bounceGentle 2s ease infinite; }
.animate-rotate { animation: rotateSlow 20s linear infinite; }
.animate-blob { animation: blobMorph 8s ease-in-out infinite; }
.animate-shimmer {
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}
.animate-gradient {
  background-size: 200% 200%;
  animation: gradientShift 5s ease infinite;
}

/* ---------- Hover Animations ---------- */
.hover-lift { transition: transform var(--transition-base); }
.hover-lift:hover { transform: translateY(-8px); }

.hover-scale { transition: transform var(--transition-base); }
.hover-scale:hover { transform: scale(1.05); }

.hover-glow { transition: box-shadow var(--transition-base); }
.hover-glow:hover { box-shadow: var(--shadow-glow-primary); }

/* ---------- Stagger Delay Classes ---------- */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }

/* ---------- Decorative Elements ---------- */
.deco-circle {
  position: absolute;
  border-radius: var(--radius-full);
  pointer-events: none;
  z-index: 0;
}

.deco-circle-primary {
  background: radial-gradient(circle, rgba(46, 125, 50, 0.08) 0%, transparent 70%);
}

.deco-circle-accent {
  background: radial-gradient(circle, rgba(244, 197, 66, 0.08) 0%, transparent 70%);
}

.deco-dots {
  position: absolute;
  width: 120px;
  height: 120px;
  background-image: radial-gradient(circle, var(--clr-primary) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}