/* ============================================================
   ANIMATIONS — A-Z Tires & Auto Care
   ============================================================ */

.hero-title-line1, .hero-title-line2 {
  display: block;
  overflow: hidden;
}

/* ── Reveal Classes ── */
.reveal-fade {
  opacity: 0;
  transition: opacity 0.7s var(--ease-out-expo);
}

.reveal-fade.is-visible {
  opacity: 1;
}

.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Stagger helpers ── */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* ── Scroll indicator ── */
@keyframes scrollDrop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ── Stat counter pulse ── */
@keyframes statPulse {
  0%, 100% { text-shadow: 0 0 0px transparent; }
  50%       { text-shadow: 0 0 20px var(--color-glow); }
}

.stat-number.counting {
  animation: statPulse 1.6s ease-in-out;
}

/* ── Gallery card hover ── */
@keyframes redPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,30,30,0); }
  50%       { box-shadow: 0 0 20px 4px rgba(220,30,30,0.25); }
}

/* ── Nav logo slide down ── */
.nav-logo-text {
  transform: translateY(-180%);
  opacity: 0;
  transition:
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease;
  will-change: transform, opacity;
}

#nav.scrolled .nav-logo-text {
  transform: translateY(0);
  opacity: 1;
}

/* ── Tag/pill pulse ── */
@keyframes tagPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}