/* === KEYFRAMES === */

/* Mesh gradient background — Hero and CTA sections */
@keyframes mesh-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Badge float vertical — Hero badge */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

/* WhatsApp pulse ring — FAB and CTA button */
@keyframes pulse-ring {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.85); opacity: 0; }
}

/* Split-text character entry — Hero headline */
@keyframes char-reveal {
  from { opacity: 0; transform: translateY(28px) rotate(4deg); }
  to   { opacity: 1; transform: translateY(0)    rotate(0deg); }
}

/* Generic scroll reveal — fade up */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(44px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pain point cards — slide from left */
@keyframes slide-left {
  from { opacity: 0; transform: translateX(-64px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Pain point cards — slide from right */
@keyframes slide-right {
  from { opacity: 0; transform: translateX(64px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* CTA section entry — scale fade */
@keyframes scale-fade {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Google dot orbit around badge */
@keyframes orbit {
  from { transform: rotate(0deg)   translateX(44px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(44px) rotate(-360deg); }
}

/* Google search bar cursor blink */
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* SVG timeline draw is handled via JS stroke-dashoffset */

/* === REVEAL UTILITY CLASSES === */

/* Elements start hidden; JS adds .is-visible to trigger animation */
[data-animate] { opacity: 0; }
[data-animate].is-visible { opacity: 1; }

[data-animate="fade-up"].is-visible {
  animation: fade-up 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
}
[data-animate="slide-left"].is-visible {
  animation: slide-left 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
}
[data-animate="slide-right"].is-visible {
  animation: slide-right 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
}
[data-animate="scale-fade"].is-visible {
  animation: scale-fade 0.8s cubic-bezier(0.22,1,0.36,1) forwards;
}

/* Stagger delays — applied alongside data-animate */
[data-delay="1"] { animation-delay: 150ms !important; }
[data-delay="2"] { animation-delay: 300ms !important; }
[data-delay="3"] { animation-delay: 450ms !important; }
[data-delay="4"] { animation-delay: 600ms !important; }

/* Split-text character spans — injected by JS */
.split-char {
  display: inline-block;
  opacity: 0;
  animation: char-reveal 0.5s cubic-bezier(0.22,1,0.36,1) forwards;
}

/* Looping helpers */
.animate-float { animation: float 4s ease-in-out infinite; }
.pulse-ring     { animation: pulse-ring 2s ease-out infinite; }

/* === REDUCED MOTION OVERRIDE === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
  [data-animate]  { opacity: 1 !important; }
  .split-char     { opacity: 1 !important; }
}