/* ─── MARQUEE ─── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── SCROLL REVEAL ─── */
@keyframes reveal-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── WA FAB RING ─── */
@keyframes wa-ring {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ─── CHATBOT TYPING ─── */
@keyframes typing {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* ─── ONLINE DOT ─── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ─── URGENCY BLINK ─── */
@keyframes blink {
  from { opacity: 1; }
  to   { opacity: 0.3; }
}

/* ─── HERO GLOW ─── */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 32px rgba(99,102,241,0.35); }
  50%       { box-shadow: 0 0 64px rgba(99,102,241,0.6); }
}

/* ─── STAGGER HELPERS ─── */
.stagger-1 { animation-delay:  80ms; }
.stagger-2 { animation-delay: 160ms; }
.stagger-3 { animation-delay: 240ms; }
.stagger-4 { animation-delay: 320ms; }
.stagger-5 { animation-delay: 400ms; }
.stagger-6 { animation-delay: 480ms; }

/* ─── HERO FLOAT ─── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-12px); }
}

/* ─── NAV SLIDE ─── */
@keyframes nav-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
nav { animation: nav-in 400ms var(--ease-out) forwards; }

/* ─── PRICING SCALE IN ─── */
@keyframes scale-in {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.pricing-card.featured {
  animation: scale-in 400ms var(--ease-out) 200ms both;
}

/* Fallback canvas animation if needed */
@keyframes subtle-pan {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─── LIQUID GLASS BACKGROUND BLOBS ─── */
@keyframes blob-drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -50px) scale(1.1); }
  66%  { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes blob-drift-2 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-30px, 50px) scale(1.2); }
  66%  { transform: translate(20px, -20px) scale(0.8); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes blob-drift-3 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(50px, 30px) scale(1.1); }
  100% { transform: translate(0, 0) scale(1); }
}