/* ============================================
   FACULTY — Animations
   All keyframes and animation classes
   ============================================ */

/* ══════════════════════════════════════════
   HERO TEXT — slide in from left + opacity
   Triggered by JS adding .is-visible on load
   ══════════════════════════════════════════ */
.hero__headline {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 1s ease, transform 1s ease;
}

.hero__headline.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ══════════════════════════════════════════
   WE ARE — text swap animation
   No fade — instant swap every 2s
   ══════════════════════════════════════════ */
.we-are-animated {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.we-are-animated__word {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: inherit;
  text-transform: uppercase;
  color: var(--color-white);
  transition: none; /* instant swap */
}

.we-are-animated__word.is-active {
  opacity: 1;
  position: relative;
}

/* ══════════════════════════════════════════
   SCROLL REVEAL — generic
   Elements animate in when entering viewport
   JS adds .is-visible via IntersectionObserver
   ══════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Stagger delay helpers */
.reveal--delay-1 { transition-delay: 0.05s; }
.reveal--delay-2 { transition-delay: 0.1s; }
.reveal--delay-3 { transition-delay: 0.15s; }
.reveal--delay-4 { transition-delay: 0.2s; }
.reveal--delay-5 { transition-delay: 0.25s; }
.reveal--delay-6 { transition-delay: 0.3s; }
.reveal--delay-7 { transition-delay: 0.35s; }
.reveal--delay-8 { transition-delay: 0.4s; }
.reveal--delay-9 { transition-delay: 0.45s; }
.reveal--delay-10 { transition-delay: 0.5s; }
.reveal--delay-11 { transition-delay: 0.55s; }
.reveal--delay-12 { transition-delay: 0.6s; }
/* ══════════════════════════════════════════
   IMAGE ROLLOVER OVERLAY (future use)
   ══════════════════════════════════════════ */
.img-rollover {
  position: relative;
  overflow: hidden;
}

.img-rollover__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity var(--transition-med);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-content);
}

.img-rollover:hover .img-rollover__overlay {
  opacity: 1;
}

/* ══════════════════════════════════════════
   BUCKET SECTIONS — static background
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   MARQUEE — pause on hover
   ══════════════════════════════════════════ */
/*.marquee:hover .marquee__track {
  animation-play-state: paused;
}*/

/* ══════════════════════════════════════════
   REDUCED MOTION — already in reset.css
   Redundant safety net for animation props
   ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .hero__headline,
  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .marquee__track {
    animation: none;
  }
}