/* ============================================================
   MOBILE AUTO DETAILING — Animations
   ============================================================ */

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes shimmerBg {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

@keyframes floatOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(20px, -30px) scale(1.05); }
  66%       { transform: translate(-15px, 15px) scale(0.97); }
}

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

@keyframes pulseBtn {
  0%, 90%, 100% { box-shadow: 0 4px 24px rgba(0,0,0,.5); }
  95%            { box-shadow: 0 4px 24px rgba(0,0,0,.5), 0 0 0 6px rgba(201,168,76,.2); }
}

@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,.4); }
  50%       { box-shadow: 0 0 0 12px rgba(201,168,76,0); }
}

@keyframes fadeInUp {
  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(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

@keyframes countUp {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmerSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

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

@keyframes lightbeam {
  0%   { opacity: 0; transform: rotate(-45deg) translateX(-200px); }
  50%  { opacity: 0.15; }
  100% { opacity: 0; transform: rotate(-45deg) translateX(400px); }
}

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

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

@keyframes stickyBounce {
  0%   { transform: translateY(100px); opacity: 0; }
  70%  { transform: translateY(-6px); }
  100% { transform: translateY(0); opacity: 1; }
}

/* ── Entrance animation helpers ──────────────────────────── */
.anim-fade-up   { animation: fadeInUp 0.7s ease both; }
.anim-fade-in   { animation: fadeIn 0.6s ease both; }
.anim-slide-left  { animation: slideInLeft 0.7s ease both; }
.anim-slide-right { animation: slideInRight 0.7s ease both; }
.anim-scale-in  { animation: scaleIn 0.5s ease both; }

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }

/* ── Shimmer shine on buttons ────────────────────────────── */
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: translateX(-100%);
  transition: none;
}
.btn-primary:hover::before {
  animation: shimmerSweep 0.6s ease forwards;
}

/* ── Floating card effect ────────────────────────────────── */
.float-card {
  animation: floatOrb 6s ease-in-out infinite;
}

/* ── Pulsing circle for step numbers ─────────────────────── */
.step-number.pulse {
  animation: pulseGold 2s ease-in-out infinite;
}

/* ── Hero entrance sequence ──────────────────────────────── */
.hero-label   { animation: fadeInUp 0.8s ease 0.3s both; }
.hero-title   { animation: fadeInUp 0.8s ease 0.5s both; }
.hero-sub     { animation: fadeInUp 0.8s ease 0.7s both; }
.hero-ctas    { animation: fadeInUp 0.8s ease 0.9s both; }
.hero-scroll  { animation: bounce 2s ease-in-out infinite 1.2s; }

/* ── Sticky mobile buttons entrance ─────────────────────── */
.sticky-mobile-btns { animation: stickyBounce 0.6s ease 1.5s both; }

/* ── Mobile nav link stagger ─────────────────────────────── */
.nav-mobile-overlay.open a:nth-child(1) { animation: mobileNavLink 0.4s ease 0.05s both; }
.nav-mobile-overlay.open a:nth-child(2) { animation: mobileNavLink 0.4s ease 0.10s both; }
.nav-mobile-overlay.open a:nth-child(3) { animation: mobileNavLink 0.4s ease 0.15s both; }
.nav-mobile-overlay.open a:nth-child(4) { animation: mobileNavLink 0.4s ease 0.20s both; }
.nav-mobile-overlay.open a:nth-child(5) { animation: mobileNavLink 0.4s ease 0.25s both; }
.nav-mobile-overlay.open a:nth-child(6) { animation: mobileNavLink 0.4s ease 0.30s both; }
.nav-mobile-overlay.open a:nth-child(7) { animation: mobileNavLink 0.4s ease 0.35s both; }
.nav-mobile-overlay.open a:nth-child(8) { animation: mobileNavLink 0.4s ease 0.40s both; }

/* ── Tab transition ──────────────────────────────────────── */
.review-panel.active { animation: fadeIn 0.4s ease both; }

/* ── Lightbeam on hero ───────────────────────────────────── */
.hero-lightbeam {
  position: absolute;
  top: 0; left: -50%;
  width: 60%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,.04), transparent);
  transform: rotate(-45deg);
  pointer-events: none;
  animation: lightbeam 8s ease-in-out infinite;
}

/* ── Gold glow ring ──────────────────────────────────────── */
.glow-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,.15);
  animation: rotateSlow 20s linear infinite;
  pointer-events: none;
}

/* ── Prefers reduced motion override ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-label, .hero-title, .hero-sub, .hero-ctas,
  .hero-scroll, .sticky-mobile-btns,
  .nav-mobile-overlay.open a,
  .anim-fade-up, .anim-fade-in, .anim-slide-left,
  .anim-slide-right, .anim-scale-in,
  .float-card, .step-number.pulse,
  .btn-primary::before, .hero-lightbeam,
  .glow-ring, .trust-track {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}