/* =============================================
   SMSONE — Keyframe Animations
   ============================================= */

/* ——— Entrance Animations ——— */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

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

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ——— Hero Typewriter ——— */
@keyframes typewriterBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes typewriterReveal {
  from { width: 0; }
  to   { width: 100%; }
}

/* ——— Floating hero badges ——— */
@keyframes floatBadge {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25%       { transform: translateY(-10px) rotate(1deg); }
  75%       { transform: translateY(-5px) rotate(-1deg); }
}

@keyframes floatBadge2 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-14px) rotate(-1.5deg); }
  66%       { transform: translateY(-7px) rotate(1deg); }
}

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

/* ——— CTA button pulse glow ——— */
@keyframes pulsePrimary {
  0%   { box-shadow: 0 0 0 0 var(--color-primary-glow); }
  70%  { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes pulseAccent {
  0%   { box-shadow: 0 0 0 0 rgba(243, 187, 18, 0.3); }
  70%  { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ——— Nav transition to solid ——— */
@keyframes navSolid {
  from { background: transparent; backdrop-filter: blur(0px); }
  to   { background: rgba(13, 13, 13, 0.95); backdrop-filter: blur(20px); }
}

/* ——— Service card icon spin on load ——— */
@keyframes iconSpin {
  from { transform: rotate(-15deg) scale(0.8); opacity: 0; }
  to   { transform: rotate(0deg) scale(1); opacity: 1; }
}

/* ——— Stat counter number roll ——— */
@keyframes countUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ——— Testimonial slide ——— */
@keyframes testimonialIn {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

/* ——— Chatbot widget ——— */
@keyframes chatbotBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  20%       { transform: translateY(-8px) scale(1.05); }
  40%       { transform: translateY(-4px) scale(1.02); }
  60%       { transform: translateY(-6px) scale(1.04); }
}

@keyframes chatbotPanelIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transform-origin: bottom right;
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    transform-origin: bottom right;
  }
}

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

@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%            { transform: translateY(-6px); opacity: 1; }
}

/* ——— FAQ accordion ——— */
@keyframes accordionOpen {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ——— Form success ——— */
@keyframes successPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ——— Background shimmer for hero ——— */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ——— Orbit ring for service icons ——— */
@keyframes orbitRing {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ——— Scroll indicator ——— */
@keyframes scrollIndicator {
  0%   { opacity: 0; transform: translateY(0); }
  40%  { opacity: 1; }
  80%  { opacity: 0; transform: translateY(12px); }
  100% { opacity: 0; }
}

/* ——— Reveal utility classes (controlled by IntersectionObserver) ——— */
[data-reveal] {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.7s var(--ease-out-cubic), transform 0.7s var(--ease-out-cubic);
}

[data-reveal="left"] {
  transform: translateX(-60px);
}

[data-reveal="right"] {
  transform: translateX(60px);
}

[data-reveal="scale"] {
  transform: scale(0.85);
  opacity: 0;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ——— Stagger delays for child elements ——— */
[data-reveal-stagger] > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-stagger] > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-stagger] > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-stagger] > *:nth-child(4) { transition-delay: 0.24s; }
[data-reveal-stagger] > *:nth-child(5) { transition-delay: 0.32s; }
[data-reveal-stagger] > *:nth-child(6) { transition-delay: 0.40s; }

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-out-cubic), transform 0.6s var(--ease-out-cubic);
}

[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}