/* ============================================================
   JOSEPH BOBAY — ANIMATIONS
   All keyframes, transitions, motion components.
   Respects prefers-reduced-motion throughout.
   ============================================================ */

/* --- FADE-UP (scroll-triggered) ----------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: none;
}

/* --- HERO WORD REVEAL --------------------------------------- */
/* Words appear sequentially (opacity only — no fly-in) */
@keyframes wordReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-headline span {
  opacity: 0;
  animation: wordReveal 0.5s ease forwards;
}
.hero-headline span:nth-child(1) { animation-delay: 0.08s; }
.hero-headline span:nth-child(2) { animation-delay: 0.22s; }
.hero-headline span:nth-child(3) { animation-delay: 0.36s; }
.hero-headline span:nth-child(4) { animation-delay: 0.50s; }

/* Hero support text fades in after headline */
.hero-body,
.hero-sub,
.hero-actions {
  opacity: 0;
  animation: wordReveal 0.5s ease forwards;
}
.hero-body    { animation-delay: 0.72s; }
.hero-sub     { animation-delay: 0.88s; }
.hero-actions { animation-delay: 1.0s; }

/* --- INTERACTIVE WAVE (Phase 1 audio visual) ---------------- */
@keyframes wavePulse {
  0%, 100% { height: 3px;  opacity: 0.25; }
  50%       { height: 20px; opacity: 0.8;  }
}

.exp-wave span {
  animation: wavePulse 1.15s ease-in-out infinite;
  animation-play-state: paused;
}
.exp-wave.playing span { animation-play-state: running; }

.exp-wave span:nth-child(1) { animation-delay: 0s; }
.exp-wave span:nth-child(2) { animation-delay: 0.12s; }
.exp-wave span:nth-child(3) { animation-delay: 0.24s; }
.exp-wave span:nth-child(4) { animation-delay: 0.36s; }
.exp-wave span:nth-child(5) { animation-delay: 0.48s; }

/* --- CONTOUR DOTS (Phase 2 reveal) -------------------------- */
/* Slight spring — feels like placing a finger on the string */
.cdot {
  opacity: 0;
  transform: scale(0.2);
  transition:
    opacity  0.35s ease,
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
  transform-box: fill-box;
}
.cdot.revealed {
  opacity: 1;
  transform: scale(1);
}

/* --- REPLAY FADE -------------------------------------------- */
.exp-replay-wrap {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.exp-replay-wrap.visible {
  opacity: 1;
  pointer-events: auto;
}

/* --- INTERACTIVE PHASE TRANSITIONS -------------------------- */
.exp-phase {
  transition: opacity 0.45s ease;
}

/* --- NAV SCROLL FILL --------------------------------------- */
.nav {
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.nav.scrolled {
  border-bottom-color: var(--border-md);
}

/* ============================================================
   REDUCED MOTION
   All animation stripped. Content remains fully accessible.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-headline span,
  .hero-body,
  .hero-sub,
  .hero-actions {
    opacity: 1;
    animation: none;
  }

  .exp-wave span {
    animation: none;
    height: 8px;
    opacity: 0.4;
  }

  .cdot {
    transition: opacity 0.15s ease;
    transform: scale(1);
  }

  .exp-replay-wrap {
    transition: none;
  }

  .exp-phase {
    transition: none;
  }
}