/* ══════════════════════════════════════════════════════
   Dunwoody Barber Shop — Animations
   ══════════════════════════════════════════════════════ */

/* ── Base keyframes ───────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  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);
  }
}

/* ── Scroll Reveal Classes ────────────────────────── */

/* reveal-fade: opacity 0 → 1 */
.reveal-fade {
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
}

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

/* reveal-up: translateY 40px → 0 + fade */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
  transition-delay: var(--delay, 0s);
}

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

/* reveal-left: translateX(-40px) → 0 + fade */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.75s var(--ease-out),
              transform 0.75s var(--ease-out);
}

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

/* reveal-right: translateX(40px) → 0 + fade */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.75s var(--ease-out),
              transform 0.75s var(--ease-out);
}

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

/* ── Respect reduced motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal-fade,
  .reveal-up,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-title-line1,
  .hero-title-line2,
  .hero-eyebrow,
  .hero-sub,
  .hero-ctas {
    opacity: 1;
    animation: none;
  }

  .hero-bg {
    animation: none;
    transform: none;
  }

  .scroll-line {
    animation: none;
  }
}

/* ── Tab panel fade-in ────────────────────────────── */
@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-panel.active {
  animation: tabFadeIn 0.45s var(--ease-out) forwards;
}

/* ── Gallery track ────────────────────────────────── */
.gallery-track {
  will-change: transform;
}

/* ── Stat number counter ──────────────────────────── */
.stat-number {
  display: inline-block;
  transition: color var(--duration-normal) ease;
}

/* ── Hover pulse on accent elements ──────────────── */
@keyframes accentPulse {
  0%, 100% { box-shadow: var(--glow-accent-sm); }
  50%       { box-shadow: var(--glow-accent); }
}

.about-badge {
  animation: accentPulse 3.5s ease-in-out infinite;
}