/* ============================================================
   MAHIR DEEP CLEANING SERVICES — animations.css
   Pure CSS keyframes + transitions only.
   ALL opacity/transform initial states are set by JS (gsap.set)
   BEFORE first paint — no CSS hiding needed, no flash possible.
   ============================================================ */

/* ── KEYFRAMES ── */

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  animation: marquee 22s linear infinite;
  display: flex;
  gap: 80px;
  white-space: nowrap;
}
.marquee-track:hover { animation-play-state: paused; }

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(255,214,0,0.8); }
  70%  { box-shadow: 0 0 0 10px rgba(255,214,0,0);   }
  100% { box-shadow: 0 0 0 0   rgba(255,214,0,0);   }
}
.pulse-dot { animation: pulse-ring 2s ease-out infinite; }

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.hero-cta-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.22) 50%,
    transparent 100%
  );
  background-size: 200% auto;
  animation: shimmer 3.5s linear infinite;
  border-radius: inherit;
  pointer-events: none;
}

@keyframes float-orb {
  0%, 100% { transform: translate(-50%,-50%) scale(1);    opacity: 0.12; }
  50%       { transform: translate(-50%,-50%) scale(1.15); opacity: 0.22; }
}
.hero-glow-orb { animation: float-orb 6s ease-in-out infinite; }

@keyframes typing-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--yellow);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: typing-cursor 0.7s ease infinite;
}

/* ── CSS HOVER TRANSITIONS ── */
.nav-link { transition: color .25s; }
.nav-link::after { transition: width .3s; }

.service-card {
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s;
}
.service-card-top-border { transition: transform .35s cubic-bezier(.4,0,.2,1); }

.btn-primary,
.btn-outline,
.hero-cta-primary,
.hero-cta-secondary,
.nav-cta {
  transition: background .25s, color .25s, box-shadow .25s, transform .2s, border-color .25s;
}

.blog-card,
.why-card,
.value-card,
.team-card {
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
}

.testimonial-card { transition: transform .25s, border-color .25s, box-shadow .25s; }
.stat-block { transition: transform .22s; }
.split-overlay { transition: opacity .4s; }
.split-arrow { transition: transform .3s; }
.blog-card-img-wrap { transition: transform .5s cubic-bezier(.4,0,.2,1); }
.area-tag { transition: border-color .2s, color .2s; }
.faq-chevron { transition: transform .3s cubic-bezier(.4,0,.2,1), background .3s; }

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--yellow);
  z-index: 1002;
  pointer-events: none;
}

/* ── PREFERS-REDUCED-MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}