/* Animations — Keyframes & Scroll-triggered reveals */

/* ============================================
   KEYFRAMES
   ============================================ */

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

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes clipReveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ============================================
   SCROLL-TRIGGERED REVEAL CLASSES
   ============================================ */

/* Base reveal — hidden by default */
.reveal {
  opacity: 0;
  transition: opacity var(--transition-slow),
              transform var(--transition-slow);
  transition-delay: var(--delay, 0ms);
}

/* Revealed state — triggered by IntersectionObserver */
.reveal.revealed {
  opacity: 1;
}

/* Direction variants */
.reveal--up {
  transform: translateY(30px);
}

.reveal--up.revealed {
  transform: translateY(0);
}

.reveal--left {
  transform: translateX(-30px);
}

.reveal--left.revealed {
  transform: translateX(0);
}

.reveal--right {
  transform: translateX(30px);
}

.reveal--right.revealed {
  transform: translateX(0);
}

.reveal--scale {
  transform: scale(0.92);
}

.reveal--scale.revealed {
  transform: scale(1);
}

.reveal--clip {
  clip-path: inset(0 100% 0 0);
}

.reveal--clip.revealed {
  clip-path: inset(0 0 0 0);
}

/* ============================================
   MARQUEE
   ============================================ */

.marquee {
  overflow: hidden;
  white-space: nowrap;
  padding-block: var(--space-md);
  background-color: var(--color-deep-blue);
  color: var(--color-warm-white);
}

.marquee__track {
  display: inline-flex;
  animation: marquee 25s linear infinite;
}

.marquee__item {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding-inline: var(--space-lg);
  flex-shrink: 0;
}

.marquee__separator {
  color: var(--color-terracotta);
  padding-inline: var(--space-sm);
  flex-shrink: 0;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ============================================
   IMAGE HOVER EFFECTS
   ============================================ */

.img-hover {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.img-hover img {
  transition: transform var(--transition-slow);
}

.img-hover:hover img {
  transform: scale(1.05);
}

/* ============================================
   HERO ENTRANCE
   ============================================ */

.hero-enter {
  animation: fadeInUp 1s var(--ease-out) both;
}

.hero-enter--delay-1 {
  animation-delay: 0.2s;
}

.hero-enter--delay-2 {
  animation-delay: 0.4s;
}

.hero-enter--delay-3 {
  animation-delay: 0.6s;
}

.hero-enter--delay-4 {
  animation-delay: 0.8s;
}

/* ============================================
   COUNTER ANIMATION
   ============================================ */

.counter {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--color-deep-blue);
  line-height: 1;
}

.counter__suffix {
  font-size: 0.5em;
  color: var(--color-terracotta);
  margin-left: 0.1em;
}

.counter__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--section-text-muted);
  margin-top: var(--space-xs);
}

/* ============================================
   PAGE TRANSITION
   ============================================ */

.page-transition {
  animation: fadeIn 0.5s var(--ease-out) both;
}