/* ==========================================================================
   MAY & TAP FOOD'S - ADVANCED ANIMATIONS & TRANSITION KEYFRAMES
   ========================================================================== */

/* 1. Marquee Infinite Scroll Ticker */
@keyframes marqueeScroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 2. Cursor Spotlight Effect */
.cursor-spotlight {
  position: fixed;
  top: -150px;
  left: -150px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 77, 117, 0.15) 0%, rgba(0, 77, 117, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: screen;
  transition: opacity 0.3s ease;
}

/* 3. Hero section content: ALWAYS IMMEDIATELY VISIBLE on initial load */
.hero-content,
.hero-content.blur-reveal,
.hero-copy-col,
.hero-copy-col.blur-reveal {
  opacity: 1 !important;
  filter: none !important;
  visibility: visible !important;
  transform: none !important;
}

/* Floating Bottle & Capsules Animation (GCAB Style) */
@keyframes hero-frasco-float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-16px) rotate(-1.5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes hero-badge-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* 4. Reveal Elements on Scroll */
.reveal-element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-element.reveal-active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }
.reveal-delay-4 { transition-delay: 0.6s; }

/* 5. Blur Reveal (Default for other sections) */
.blur-reveal {
  opacity: 0;
  filter: blur(8px);
  transform: scale(0.98);
  transition: opacity 0.8s ease, filter 0.8s ease, transform 0.8s ease;
}

.blur-reveal.reveal-active {
  opacity: 1;
  filter: blur(0px);
  transform: scale(1);
}

/* 6. 3D Card Spotlight Overlay */
.card-spotlight-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.18), transparent 40%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tilt-card:hover .card-spotlight-overlay {
  opacity: 1;
}

/* 7. Stat Progress Filling */
.stat-progress-bar {
  width: 100%;
  height: 5px;
  background: rgba(0, 77, 117, 0.12);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.stat-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  border-radius: 3px;
  transition: width 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 8. Toast Message Notification */
.toast-message {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(50px);
  background: var(--color-primary-dark);
  color: white;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-full);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  z-index: 9999;
  animation: toastSlideUp 0.4s forwards, toastSlideDown 0.4s 2.8s forwards;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes toastSlideUp {
  to {
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes toastSlideDown {
  to {
    transform: translateX(-50%) translateY(80px);
    opacity: 0;
  }
}

/* 9. Pulse Animation for Floating WhatsApp */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-float {
  animation: pulseGlow 2.5s infinite;
}


/* 10. Shimmer Sweep Animation */
@keyframes shimmerSweep {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* 11. Gentle Vertical Floating Animation */
@keyframes floatGentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* 12. Soft Radial Glow Pulse */
@keyframes radialGlowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.04); }
}

/* 13. Dynamic Border Glow Effect */
@keyframes borderGlowPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(0, 180, 216, 0.15); }
  50% { box-shadow: 0 0 25px rgba(0, 180, 216, 0.4); }
}

/* 14. Floating Utility Class */
.animate-float {
  animation: floatGentle 3.5s ease-in-out infinite;
}

/* 15. Button Shine Sweep Effect */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 30%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 70%
  );
  transform: rotate(30deg) translateX(-100%);
  transition: transform 0.8s ease;
}

.btn-primary:hover::after {
  transform: rotate(30deg) translateX(100%);
}