/* ═══════════════════════════════════════════════════════════════
   TRANSITIONS.CSS — Cinematic scroll-driven section reveals.

   ANIMATION INVENTORY
   ───────────────────
   1. Section heading wipe          .section-wipe
      A horizontal line sweeps left→right revealing the title,
      with the eyebrow label sliding in from the left 80ms before.

   2. Content block slide-reveal     .reveal-block
      Cards, grids, paragraphs slide up from 40px with a
      simultaneous opacity fade. Staggered per child index.

   3. Timeline entry draw            .timeline-entry (augmented)
      The vertical track line "draws" downward as the entry
      enters the viewport, then the node pulses once.

   4. Card cascade                   .cascade-in
      Grid children enter one by one on a diagonal — left
      column first, right column 60ms later per row.

   5. Section divider sweep          .divider
      The 1px horizontal rule "draws" left→right rather than
      just appearing.

   6. Parallax offset                [data-parallax]
      Subtle vertical parallax on decorative elements.
      Applied in JS — CSS just defines the transition.

   MOTION SAFETY — all keyframe animations respect
   prefers-reduced-motion by collapsing to instant opacity.
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   0. GLOBAL TRANSITION DEFAULTS
─────────────────────────────────────────────────────────────── */
:root {
  --reveal-duration:   0.65s;
  --reveal-ease:       cubic-bezier(0.16, 1, 0.3, 1);  /* spring-ish */
  --wipe-duration:     0.72s;
  --wipe-ease:         cubic-bezier(0.77, 0, 0.175, 1); /* sharp ease-in-out */
  --stagger-step:      55ms;
  --draw-duration:     0.6s;
}

/* ──────────────────────────────────────────────────────────────
   1. SECTION HEADING WIPE
   
   Markup pattern (already in index.html):
     <p class="section__eyebrow">Label</p>
     <h2 class="section__title">Title <em>italic</em></h2>
   
   JS wraps each word in a .wipe-word span; this CSS drives the
   clip-path animation that makes them sweep in.
─────────────────────────────────────────────────────────────── */

/* Eyebrow — slides from left + fades */
.section__eyebrow {
  opacity: 0;
  transform: translateX(-18px);
  transition:
    opacity  var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
}
.section__eyebrow.in-view {
  opacity: 1;
  transform: translateX(0);
}

/* Title wrapper — overflow hidden to clip word reveals */
.section__title {
  overflow: visible;  /* words overflow clip individually */
}

/* Each word span injected by transitions.js */
.wipe-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* small gap so descenders aren't clipped */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.wipe-word .wipe-inner {
  display: inline-block;
  transform: translateY(108%);
  transition:
    transform var(--wipe-duration) var(--wipe-ease);
}

.section__title.in-view .wipe-word .wipe-inner {
  transform: translateY(0);
}

/* Stagger: each word 45ms later */
.section__title.in-view .wipe-word:nth-child(1)  .wipe-inner { transition-delay:  0ms; }
.section__title.in-view .wipe-word:nth-child(2)  .wipe-inner { transition-delay: 45ms; }
.section__title.in-view .wipe-word:nth-child(3)  .wipe-inner { transition-delay: 90ms; }
.section__title.in-view .wipe-word:nth-child(4)  .wipe-inner { transition-delay:135ms; }
.section__title.in-view .wipe-word:nth-child(5)  .wipe-inner { transition-delay:180ms; }
.section__title.in-view .wipe-word:nth-child(6)  .wipe-inner { transition-delay:225ms; }
.section__title.in-view .wipe-word:nth-child(7)  .wipe-inner { transition-delay:270ms; }
.section__title.in-view .wipe-word:nth-child(8)  .wipe-inner { transition-delay:315ms; }
.section__title.in-view .wipe-word:nth-child(n+9).wipe-inner { transition-delay:360ms; }

/* Eyebrow fires 80ms before first word */
.section__eyebrow { transition-delay: 0ms; }
.section__title.in-view .wipe-word:nth-child(1) .wipe-inner { transition-delay: 80ms; }

/* Subtitle fades up after title */
.section__subtitle {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity   var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  transition-delay: 360ms;
}
.section__subtitle.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ──────────────────────────────────────────────────────────────
   2. CONTENT BLOCK REVEAL   .reveal-block
   
   Replaces the old .fade-up. Same idea, more precise control.
   Add data-reveal-delay="200" (ms) for manual offset.
─────────────────────────────────────────────────────────────── */
.reveal-block {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity   var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  will-change: transform, opacity;
}
.reveal-block.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ──────────────────────────────────────────────────────────────
   3. CASCADE GRID   .cascade-grid > children auto-stagger
─────────────────────────────────────────────────────────────── */
.cascade-grid {
  /* container — no styles needed beyond layout */
}
.cascade-grid > * {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition:
    opacity   var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  will-change: transform, opacity;
}
.cascade-grid.in-view > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* JS assigns --i on each child; this drives the delay */
.cascade-grid.in-view > * {
  transition-delay: calc(var(--i, 0) * var(--stagger-step));
}

/* ──────────────────────────────────────────────────────────────
   4. TIMELINE DRAW ANIMATION
─────────────────────────────────────────────────────────────── */

/* Track line "draws" downward */
.timeline-line {
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform var(--draw-duration) var(--reveal-ease);
}
.timeline-entry.in-view .timeline-line {
  transform: scaleY(1);
  transition-delay: 220ms;
}

/* Node pops in with a scale bounce */
.timeline-node {
  transform: scale(0);
  transition: transform 0.35s cubic-bezier(0.34, 1.8, 0.64, 1);
}
.timeline-entry.in-view .timeline-node {
  transform: scale(1);
  transition-delay: 80ms;
}

/* Date col and body slide in */
.timeline-date-col {
  opacity: 0;
  transform: translateX(-16px);
  transition:
    opacity   var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  transition-delay: 120ms;
}
.timeline-entry.in-view .timeline-date-col {
  opacity: 1;
  transform: translateX(0);
}

.timeline-body {
  opacity: 0;
  transform: translateX(16px);
  transition:
    opacity   var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  transition-delay: 140ms;
}
.timeline-entry.in-view .timeline-body {
  opacity: 1;
  transform: translateX(0);
}

/* ──────────────────────────────────────────────────────────────
   5. DIVIDER LINE DRAW
─────────────────────────────────────────────────────────────── */
.divider {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.8s var(--wipe-ease);
}
.divider.in-view {
  transform: scaleX(1);
}

/* ──────────────────────────────────────────────────────────────
   6. PARALLAX ELEMENTS   [data-parallax]
─────────────────────────────────────────────────────────────── */
[data-parallax] {
  will-change: transform;
  transition: transform 0.05s linear;
}

/* ──────────────────────────────────────────────────────────────
   7. HERO — upgraded reveal sequence
─────────────────────────────────────────────────────────────── */

/* Hero greeting badge — slide + fade */
.hero-greeting {
  opacity: 0;
  transform: translateY(12px);
  animation: heroItem 0.6s var(--reveal-ease) 0.1s forwards;
}

/* Hero name — line wipe (JS wraps lines) */
.hero-name-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.hero-name-line .hero-name-inner {
  display: block;
  animation: wipeUp var(--wipe-duration) var(--wipe-ease) forwards;
  transform: translateY(110%);
}
.hero-name-line:nth-child(1) .hero-name-inner { animation-delay: 0.2s; }
.hero-name-line:nth-child(2) .hero-name-inner { animation-delay: 0.32s; }

.hero-title-line {
  opacity: 0;
  transform: translateY(10px);
  animation: heroItem 0.55s var(--reveal-ease) 0.48s forwards;
}
.hero-desc {
  opacity: 0;
  transform: translateY(10px);
  animation: heroItem 0.55s var(--reveal-ease) 0.58s forwards;
}
.hero-actions {
  opacity: 0;
  transform: translateY(10px);
  animation: heroItem 0.55s var(--reveal-ease) 0.68s forwards;
}
#hero-stats-row {
  opacity: 0;
  transform: translateY(10px);
  animation: heroItem 0.55s var(--reveal-ease) 0.78s forwards;
}
#hero-contact-strip {
  opacity: 0;
  transform: translateY(10px);
  animation: heroItem 0.55s var(--reveal-ease) 0.86s forwards;
}
.scroll-indicator {
  opacity: 0;
  animation: heroItem 0.55s var(--reveal-ease) 1.1s forwards;
}

@keyframes heroItem {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes wipeUp {
  to { transform: translateY(0); }
}

/* Background text — fade in slowly */
.hero-bg-text {
  opacity: 0;
  animation: heroItem 1.2s var(--reveal-ease) 0.05s forwards;
}

/* ──────────────────────────────────────────────────────────────
   8. SECTION ENTRANCE — the whole <section> gets a subtle
      scroll-driven top-border "wake" line before content loads
─────────────────────────────────────────────────────────────── */
.section::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), transparent);
  transition: width 0.7s var(--wipe-ease);
  pointer-events: none;
  border-radius: 0 var(--r-full) var(--r-full) 0;
}
.section { position: relative; }
.section.section-entered::before {
  width: 100%;
}

/* ──────────────────────────────────────────────────────────────
   9. REDUCED MOTION — collapse all to instant fades
─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wipe-word .wipe-inner,
  .reveal-block,
  .cascade-grid > *,
  .timeline-line,
  .timeline-node,
  .timeline-date-col,
  .timeline-body,
  .section__eyebrow,
  .section__subtitle,
  .divider {
    transition: opacity 0.01ms !important;
    transform: none !important;
  }
  .hero-greeting,
  .hero-name-line .hero-name-inner,
  .hero-title-line,
  .hero-desc,
  .hero-actions,
  #hero-stats-row,
  #hero-contact-strip,
  .scroll-indicator,
  .hero-bg-text {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .wipe-word .wipe-inner {
    transform: none !important;
  }
  /* Instant show everything */
  .section__eyebrow.in-view,
  .section__title.in-view .wipe-word .wipe-inner,
  .section__subtitle.in-view,
  .reveal-block.in-view,
  .cascade-grid.in-view > *,
  .timeline-entry.in-view .timeline-line,
  .timeline-entry.in-view .timeline-node,
  .timeline-entry.in-view .timeline-date-col,
  .timeline-entry.in-view .timeline-body,
  .divider.in-view {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0ms !important;
  }
}