/* animations.css */

/* ─── KEYFRAMES ─────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.35; }
  50%       { opacity: 1; }
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes wavePulse {
  from { height: 4px;  opacity: 0.3; }
  to   { height: var(--wave-h, 20px); opacity: 0.85; }
}

@keyframes glitchH {
  0%,100% { clip-path: none; transform: none; }
  10%     { clip-path: inset(30% 0 50% 0); transform: translateX(-4px); }
  20%     { clip-path: inset(70% 0 10% 0); transform: translateX(4px); }
  30%     { clip-path: none; }
}

/* ─── HERO ENTRANCE ─────────────────────────────────────────────────────── */
.hero__eyebrow { animation: fadeUp 0.8s 0.2s both; }
.hero__title   { animation: fadeUp 0.9s 0.4s both; }
.hero__sub     { animation: fadeUp 0.8s 0.7s both; }
.hero__actions { animation: fadeUp 0.8s 0.9s both; }
.hero__scroll  { animation: fadeUp 1.0s 1.3s both; }

/* ─── SCROLL REVEAL ─────────────────────────────────────────────────────── */
.reveal {
  opacity:    0;
  transform:  translateY(38px);
  transition: opacity 0.9s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal.is-visible {
  opacity:   1;
  transform: translateY(0);
}
.reveal--d1 { transition-delay: 0.10s; }
.reveal--d2 { transition-delay: 0.22s; }
.reveal--d3 { transition-delay: 0.34s; }
.reveal--d4 { transition-delay: 0.46s; }
.reveal--d5 { transition-delay: 0.58s; }

/* ─── SCROLL HINT ────────────────────────────────────────────────────────── */
.scroll-line {
  width:      0.5px;
  height:     40px;
  background: linear-gradient(to bottom, rgba(124, 111, 255, 0.7), transparent);
  animation:  scrollPulse 2s ease-in-out infinite;
}

/* ─── MARQUEE ────────────────────────────────────────────────────────────── */
.marquee__inner {
  display:        flex;
  gap:            3rem;
  white-space:    nowrap;
  animation:      marqueeScroll 20s linear infinite;
}
.marquee__inner:hover { animation-play-state: paused; }

/* ─── WAVE BARS ─────────────────────────────────────────────────────────── */
.wave-bar {
  width:         3px;
  background:    rgba(124, 111, 255, 0.45);
  border-radius: 2px;
  animation:     wavePulse var(--wave-d, 1s) ease-in-out infinite alternate;
}

/* ─── REDUCE MOTION ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    transition-duration:  0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal { opacity: 1; transform: none; }
}