/* ============================================================
   USTL — About Us Animations  v2.0
   Vanilla CSS + JS Intersection Observer. No external libs.
   To revert: copy animations-backup.css over this file.
   ============================================================ */

:root {
  --anim-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ----------------------------------------------------------
   1. HERO — Page-load fade-up sequence
   ---------------------------------------------------------- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.hero-headline { animation: heroFadeUp 0.6s var(--anim-ease) 0s    both; }
.hero-body     { animation: heroFadeUp 0.6s var(--anim-ease) 0.15s both; }
.hero-image    { animation: heroFadeUp 0.6s var(--anim-ease) 0.3s  both; }
.hero-quote    { animation: heroFadeUp 0.6s var(--anim-ease) 0.9s  both; }

/* ----------------------------------------------------------
   2. SCROLL — Simple fade-up (timeline milestones)
   ---------------------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--anim-ease), transform 0.5s var(--anim-ease);
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------
   3. SCROLL — Slide from left (Mission card, MD quote)
   ---------------------------------------------------------- */
.slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s var(--anim-ease), transform 0.6s var(--anim-ease);
}
.slide-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-left-md {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s var(--anim-ease), transform 0.7s var(--anim-ease);
}
.slide-left-md.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ----------------------------------------------------------
   4. SCROLL — Slide from right (Vision card, MD photo)
   ---------------------------------------------------------- */
.slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.6s var(--anim-ease), transform 0.6s var(--anim-ease);
}
.slide-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.slide-right-md {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.7s var(--anim-ease), transform 0.7s var(--anim-ease);
}
.slide-right-md.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ----------------------------------------------------------
   5. SCROLL — Staggered fade-up (core value icons)
   Delay is set per-element by JS via style.transitionDelay.
   ---------------------------------------------------------- */
.stagger-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--anim-ease), transform 0.5s var(--anim-ease);
}
.stagger-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------------------------------
   6. SCROLL — Staggered scale-fade (credential boxes)
   Delay is set per-element by JS via style.transitionDelay.
   ---------------------------------------------------------- */
.scale-fade {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.5s var(--anim-ease), transform 0.5s var(--anim-ease);
}
.scale-fade.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ----------------------------------------------------------
   7. SCROLL-DRIVEN TIMELINE — line illumination + dot/text states
      Line fill height is set directly via JS (style.height).
      Dots start muted gray, go primary blue when active.
      "Today" dot goes gold (tertiary) when active.
      Text starts at 0.25 opacity, fades to 1 when active.
   ---------------------------------------------------------- */
.timeline-dot {
  background-color: #c4c6d0;           /* muted gray */
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.timeline-dot.active {
  background-color: #00468d;           /* primary blue */
}
.timeline-dot[data-today="true"].active {
  background-color: #7d5260;           /* tertiary / gold-adjacent */
}

.timeline-text {
  opacity: 0.25;
  transition: opacity 0.3s ease;
}
.timeline-text.active {
  opacity: 1;
}

/* Mobile: always show text at full opacity, dots at full colour */
@media (max-width: 767px) {
  .timeline-text {
    opacity: 1;
  }
  .timeline-dot {
    background-color: #00468d;
  }
}

/* ----------------------------------------------------------
   8. MOBILE — strip directional slides on small screens,
      fall back to simple fade-up instead.
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .slide-left,
  .slide-right,
  .slide-left-md,
  .slide-right-md {
    transform: translateY(20px);
    transition: opacity 0.5s var(--anim-ease), transform 0.5s var(--anim-ease);
  }
  .slide-left.is-visible,
  .slide-right.is-visible,
  .slide-left-md.is-visible,
  .slide-right-md.is-visible {
    transform: translateY(0);
  }

  /* Remove translateY on mobile — just fade, no shift */
  .fade-up,
  .stagger-up {
    transform: none;
    transition: opacity 0.5s var(--anim-ease);
  }
  .fade-up.is-visible,
  .stagger-up.is-visible {
    transform: none;
  }

  /* Scale-fade: remove scale on mobile, just fade */
  .scale-fade {
    transform: none;
    transition: opacity 0.5s var(--anim-ease);
  }
  .scale-fade.is-visible {
    transform: none;
  }
}

/* ----------------------------------------------------------
   9. Respect prefers-reduced-motion — disable everything
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-headline, .hero-body, .hero-image, .hero-quote {
    animation: none;
  }
  .fade-up, .slide-left, .slide-right,
  .slide-left-md, .slide-right-md,
  .stagger-up, .scale-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .timeline-text {
    opacity: 1;
    transition: none;
  }
  .timeline-dot {
    background-color: #00468d;
    transition: none;
  }
}