/* ============================================================
   LOTUS TOWING — ANIMATIONS
   animations.css
   ============================================================ */

/* ── KEYFRAMES ── */
@keyframes pulse-bar   { 0%,100%{background:var(--red)} 50%{background:#e83030} }
@keyframes blink-dot   { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes float-wa    { 0%,100%{transform:scale(1);box-shadow:0 8px 28px rgba(37,211,102,0.4)} 50%{transform:scale(1.06);box-shadow:0 12px 40px rgba(37,211,102,0.65)} }
@keyframes slide-up    { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes fade-in     { from{opacity:0} to{opacity:1} }
@keyframes shine       { 0%{background-position:-200% center} 100%{background-position:200% center} }
@keyframes pulse-ring  { 0%{transform:scale(1);opacity:0.6} 100%{transform:scale(1.6);opacity:0} }
@keyframes ticker      { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── APPLY ── */
#emergency-bar { animation: pulse-bar 2.5s ease-in-out infinite; }
.hero-badge-dot { animation: blink-dot 1.5s infinite; }
.float-wa-btn   { animation: float-wa 2.2s ease-in-out infinite; }

/* Scroll-reveal base state */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ── HERO entrance ── */
.hero-text-col > * { animation: slide-up 0.7s ease both; }
.hero-text-col .hero-badge    { animation-delay: 0.1s; }
.hero-text-col .hero-h1       { animation-delay: 0.2s; }
.hero-text-col .hero-tagline  { animation-delay: 0.3s; }
.hero-text-col .hero-desc     { animation-delay: 0.4s; }
.hero-text-col .hero-btn-stack{ animation-delay: 0.5s; }
.hero-text-col .hero-stats    { animation-delay: 0.6s; }
.hero-img-wrap { animation: fade-in 1s ease 0.4s both; }

/* ── Gold shine on big CTA buttons ── */
.qa-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.15) 50%, transparent 100%);
  transition: left 0.5s;
}
.qa-card:hover::after { left: 160%; }

/* ── Pulse ring on call button ── */
.float-call-btn { position: relative; }
.float-call-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  border: 2px solid var(--red);
  animation: pulse-ring 1.8s ease-out infinite;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}