/* =========================================================================
   animations.css — Keyframes and transition classes. JS toggles these.
   ========================================================================= */

/* ---------------------------------------------------------------------
   Reveal-on-scroll — [data-reveal] starts hidden, JS adds .is-visible
   --------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-standard),
    transform var(--duration-slow) var(--ease-standard);
  will-change: opacity, transform;
}

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

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="slide-left"] {
  transform: translateX(-32px);
}

[data-reveal="slide-left"].is-visible {
  transform: translateX(0);
}

[data-reveal="slide-right"] {
  transform: translateX(32px);
}

[data-reveal="slide-right"].is-visible {
  transform: translateX(0);
}

[data-reveal="scale"] {
  transform: scale(0.96);
}

[data-reveal="scale"].is-visible {
  transform: scale(1);
}

/* Stagger via --reveal-delay custom property set by JS */
[data-reveal] {
  transition-delay: var(--reveal-delay, 0ms);
}

/* ---------------------------------------------------------------------
   Timeline reveal — clip-path line-draw effect
   --------------------------------------------------------------------- */
.timeline__item {
  opacity: 0;
  clip-path: inset(0 0 100% -120px);
  transition: opacity var(--duration-slow) var(--ease-standard),
    clip-path var(--duration-slow) var(--ease-standard);
}

.timeline__item.is-visible {
  opacity: 1;
  clip-path: inset(0 0 0 -120px);
}

.timeline__marker {
  transform: var(--timeline-marker-position, translateX(0)) scale(0.4);
  opacity: 0;
  transition: transform var(--duration-base) var(--ease-standard) 0.15s,
    opacity var(--duration-base) var(--ease-standard) 0.15s;
}

.timeline__item.is-visible .timeline__marker {
  transform: var(--timeline-marker-position, translateX(0)) scale(1);
  opacity: 1;
}

/* ---------------------------------------------------------------------
   Hero entrance (loads immediately, not scroll-triggered)
   --------------------------------------------------------------------- */
@keyframes heroRise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__eyebrow,
.hero__title,
.hero__lead,
.hero__actions {
  animation: heroRise var(--duration-slow) var(--ease-standard) both;
}

.hero__title {
  animation-delay: 0.05s;
}

.hero__lead {
  animation-delay: 0.15s;
}

.hero__actions {
  animation-delay: 0.25s;
}

.hero__portrait {
  animation: heroRise var(--duration-slow) var(--ease-standard) both;
  animation-delay: 0.2s;
}

/* ---------------------------------------------------------------------
   Parallax — JS sets --parallax-y via scroll listener
   --------------------------------------------------------------------- */
.hero__bg {
  transform: translateY(var(--parallax-y, 0px));
}

/* ---------------------------------------------------------------------
   Counter number pulse when animation completes
   --------------------------------------------------------------------- */
@keyframes counterPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

.stat__number.is-done {
  animation: counterPop 0.4s var(--ease-standard);
}

/* ---------------------------------------------------------------------
   Leadership cards — border-color shift + lift
   --------------------------------------------------------------------- */
.leadership-card {
  transition: transform var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}

.leadership-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
}