/* =============================================
   ANIMATIONS.CSS — Law Firm Website
   Scroll fade-in, counters, and FAB pulse
   ============================================= */

/* ─── SCROLL FADE-IN BASE STATE ──────────────
   All elements with .fade-in-up start invisible
   and 20px below final position.
   ─────────────────────────────────────────── */
.fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── STAGGERED DELAYS FOR CARD GRIDS ─────── */
.fade-in-up[data-delay="1"] { transition-delay: 0.10s; }
.fade-in-up[data-delay="2"] { transition-delay: 0.20s; }
.fade-in-up[data-delay="3"] { transition-delay: 0.30s; }
.fade-in-up[data-delay="4"] { transition-delay: 0.40s; }
.fade-in-up[data-delay="5"] { transition-delay: 0.50s; }

/* ─── STAT COUNTER ─────────────────────────
   Counter values start at 0 and count up via JS.
   ─────────────────────────────────────────── */
.stat-number[data-target] {
  display: block;
}

/* ─── PAGE HERO REVEAL ─────────────────────── */
.hero-content .hero-label,
.hero-content .hero-title,
.hero-content .hero-subtitle,
.hero-content .hero-actions {
  opacity: 0;
  transform: translateY(20px);
  animation: heroReveal 0.7s ease forwards;
}

.hero-content .hero-label    { animation-delay: 0.1s; }
.hero-content .hero-title    { animation-delay: 0.25s; }
.hero-content .hero-subtitle { animation-delay: 0.4s; }
.hero-content .hero-actions  { animation-delay: 0.55s; }

@keyframes heroReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── GOLD LINE GROW ───────────────────────── */
.gold-line {
  transform: scaleX(0);
  transition: transform 0.6s ease 0.3s;
  transform-origin: left;
}

.gold-line.visible {
  transform: scaleX(1);
}

/* ─── MODAL SCALE-IN ───────────────────────── */
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.93) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-overlay.active .modal {
  animation: modalIn 0.28s ease forwards;
}

/* ─── NAV MENU MOBILE SLIDE ────────────────── */
@keyframes navSlideIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.nav-menu.open {
  animation: navSlideIn 0.25s ease forwards;
}

/* ─── HOVER UNDERLINE FOR LINKS ───────────── */
.underline-hover {
  position: relative;
  display: inline-block;
}

.underline-hover::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--gold);
  transition: width 0.3s ease;
}

.underline-hover:hover::after {
  width: 100%;
}

/* ─── PREFERS REDUCED MOTION ───────────────
   Disable all animations for users who prefer
   reduced motion. Accessibility requirement.
   ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .fade-in-up {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-content .hero-label,
  .hero-content .hero-title,
  .hero-content .hero-subtitle,
  .hero-content .hero-actions {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .gold-line {
    transform: scaleX(1);
    transition: none;
  }

  .fab-whatsapp {
    animation: none;
  }

  .hero-scroll {
    animation: none;
  }
}