/* ==========================================
   ANIMATIONS — Premium Finance Theme
   ========================================== */

/* Page fade in */
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Hero name word animation done via GSAP in main.js */
.hero-name .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
}

/* ==========================================
   TICKER MARQUEE
   ========================================== */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================
   SECTION DIVIDER — Center outward
   ========================================== */
.section-divider::after {
  transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
}

/* ==========================================
   SECTION TITLE REVEAL
   ========================================== */
.section-title:not(.post-title) {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.section-title.animated {
  opacity: 1;
  transform: translateY(0);
}
.section-title::after {
  transition: width 0.8s ease 0.3s;
}

/* ==========================================
   SKILL BAR SHIMMER
   ========================================== */
@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ==========================================
   FLOATING ORB
   ========================================== */
@keyframes floatOrb {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* ==========================================
   STATS GLOW PULSE
   ========================================== */
.stat-num.glow {
  text-shadow: 0 0 20px rgba(201,168,76,0.8);
}
.stat-num {
  transition: text-shadow 1.5s ease;
}
.stat-label-val.glow {
  text-shadow: 0 0 20px rgba(201,168,76,0.8);
}
.stat-label-val {
  transition: text-shadow 1.5s ease;
}

/* ==========================================
   NAV LINK UNDERLINE
   ========================================== */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 14px;
  width: 0;
  height: 2px;
  background: var(--accent-gold);
  transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: calc(100% - 28px);
}

/* ==========================================
   CARD ENTRANCE — GSAP handles this,
   but CSS transitions as fallback
   ========================================== */
.card-animate {
  opacity: 0;
  transform: translateY(40px);
}
.card-animate.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ==========================================
   GOLD GLOW EFFECTS
   ========================================== */
.btn-gold:hover { box-shadow: 0 0 20px rgba(201,168,76,0.5); }
.service-card:hover .service-icon { box-shadow: 0 8px 24px rgba(201,168,76,0.3); }

/* Smooth underline links */
a.animated-underline { position: relative; }
a.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--accent-gold);
  transition: width 0.3s;
}
a.animated-underline:hover::after { width: 100%; }