/* ============================================================
   Aiello & DiFalco LLP — Animations & Transitions
   Built by Sovamoon | sovamoon.com
   ============================================================ */

/* ============================================================
   Scroll-Triggered Reveal Animations
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

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

.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

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

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Staggered children delay */
.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: 0.08s; }
.stagger > *:nth-child(3) { transition-delay: 0.16s; }
.stagger > *:nth-child(4) { transition-delay: 0.24s; }
.stagger > *:nth-child(5) { transition-delay: 0.32s; }
.stagger > *:nth-child(6) { transition-delay: 0.40s; }

/* ============================================================
   Number Counter Animation
   ============================================================ */
.count-up {
  display: inline-block;
}

/* ============================================================
   Gold shimmer on text
   ============================================================ */
@keyframes goldShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--gold) 0%,
    var(--gold-light) 40%,
    #e8d4a8 50%,
    var(--gold-light) 60%,
    var(--gold) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 4s linear infinite;
}

/* ============================================================
   Pulse glow — for CTA button emphasis
   ============================================================ */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 4px 16px rgba(194, 168, 123, 0.25);
  }
  50% {
    box-shadow: 0 4px 28px rgba(194, 168, 123, 0.5), 0 0 40px rgba(194, 168, 123, 0.18);
  }
}

.btn-pulse {
  animation: pulseGlow 2.8s ease-in-out infinite;
}

/* ============================================================
   Border trace animation for hero cards
   ============================================================ */
@keyframes borderTrace {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* ============================================================
   Subtle float for decorative elements
   ============================================================ */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.float-element {
  animation: float 5s ease-in-out infinite;
}

/* ============================================================
   Page transition overlay
   ============================================================ */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.page-transition.active {
  opacity: 1;
  pointer-events: all;
}

/* ============================================================
   Navbar scroll state transitions
   ============================================================ */
.navbar {
  transition: padding 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================================
   Card hover ripple
   ============================================================ */
.card-ripple {
  position: relative;
  overflow: hidden;
}

.card-ripple::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(194, 168, 123, 0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.card-ripple:hover::after {
  opacity: 1;
}

/* ============================================================
   Loading spinner (for chatbot)
   ============================================================ */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(194, 168, 123, 0.2);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

/* ============================================================
   Toast notification
   ============================================================ */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--navy-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1.5rem;
  font-size: 0.88rem;
  color: var(--white);
  opacity: 0;
  transition: all 0.35s ease;
  z-index: 10000;
  white-space: nowrap;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.toast.success {
  border-color: rgba(34, 197, 94, 0.3);
  color: #86efac;
}

.toast.error {
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

/* ============================================================
   Mobile menu slide
   ============================================================ */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-menu.open {
  animation: slideDown 0.25s ease;
}

/* ============================================================
   Hero — graceful line slide-in from left
   ============================================================ */
@keyframes lineSlideIn {
  from {
    opacity: 0;
    transform: translateX(-44px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Word-by-word float-in for hero title */
@keyframes wordFloatIn {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-word {
  display: inline-block;
  opacity: 0;
  animation: wordFloatIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-line {
  display: inline-block;
  opacity: 0;
  animation: lineSlideIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

p.hero-line,
div.hero-line {
  display: block;
}

/* ============================================================
   Active nav underline
   ============================================================ */
.navbar-nav a {
  position: relative;
}

.navbar-nav a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--gold);
  border-radius: 1px;
  transition: width 0.25s ease;
}

.navbar-nav a:hover::after,
.navbar-nav a.active::after {
  width: 60%;
}