/* ============================================================
   MBY CONSULTING — ANIMATIONS
   Scroll-triggered fade-ins, transitions, subtle motion
   ============================================================ */

/* ---- Fade-up (default) ---- */
.fade-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

/* ---- Fade-left (photo panels) ---- */
.fade-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.85s ease, transform 0.85s ease;
}

/* ---- Fade-right (content panels) ---- */
.fade-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.85s ease, transform 0.85s ease;
}

/* ---- Visible state (added by IntersectionObserver) ---- */
.fade-up.visible,
.fade-left.visible,
.fade-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ---- Staggered delay via data-delay attr ---- */
[data-delay="0"]  { transition-delay: 0ms; }
[data-delay="150"]{ transition-delay: 150ms; }
[data-delay="300"]{ transition-delay: 300ms; }
[data-delay="450"]{ transition-delay: 450ms; }
[data-delay="600"]{ transition-delay: 600ms; }

/* ---- Gold shimmer on headings (subtle) ---- */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ---- Gold shimmer sweep on buttons — M1 (5s medium) ---- */
@keyframes goldShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}

/* ---- Subtle ambient glow on CTA button (no pulse) ---- */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(200,151,28,0.15); }
  50%       { box-shadow: 0 4px 28px rgba(200,151,28,0.3); }
}

.btn--gold {
  animation: goldShimmer 5s ease-in-out infinite;
}
.btn--gold:hover {
  animation: none;
}

/* ---- Nav link underline slide ---- */
.nav__link:not(.nav__link--cta) {
  position: relative;
}
.nav__link:not(.nav__link--cta)::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}
.nav__link:not(.nav__link--cta):hover::after { width: 100%; }

/* ---- Stat number count-up appearance ---- */
.stat__number {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stats.visible .stat__number {
  opacity: 1;
  transform: translateY(0);
}
.stats.visible .stat:nth-child(1) .stat__number { transition-delay: 0ms; }
.stats.visible .stat:nth-child(2) .stat__number { transition-delay: 150ms; }
.stats.visible .stat:nth-child(3) .stat__number { transition-delay: 300ms; }

/* ---- Pillar hover line ---- */
.pillar {
  position: relative;
  overflow: hidden;
}
.pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.4s ease;
}
.pillar:hover::before { width: 100%; }

/* ---- Service card left accent ---- */
.service-card {
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--gold);
  opacity: 0.08;
  transition: width 0.4s ease;
}
.service-card:hover::before { width: 100%; }

/* ---- How step — circle fill on scroll ---- */
.how__step.visible .how__step-num {
  background: rgba(201,160,64,0.08);
  box-shadow: 0 0 20px rgba(201,160,64,0.15);
}

/* ---- Hero title word-by-word entrance ---- */
.hero__content.visible .hero__title {
  animation: heroTitleIn 1s ease forwards;
}

@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Reduced motion support ---- */
@media (prefers-reduced-motion: reduce) {
  .fade-up, .fade-left, .fade-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn--gold { animation: none; }
  .hero__scroll-hint span { animation: none; }
}