/* ============================================
   Choreography — section entrances
   Each section makes an entrance of its own.
   All effects ride transform / opacity /
   clip-path; reduced-motion collapses them
   to instant (see base.css global rule).
   ============================================ */

/* --- Features: media unmasks upward, text lines stagger in --- */

.feature.reveal {
  /* the block itself stays put — its children perform */
  transform: none;
}

.feature.reveal .feature-media {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s var(--ease-out) 0.15s;
}

.feature.reveal.is-visible .feature-media {
  clip-path: inset(0 0 0 0);
}

.feature.reveal .feature-body > * {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
}

.feature.reveal.is-visible .feature-body > * {
  opacity: 1;
  transform: none;
}

.feature.reveal.is-visible .feature-body > *:nth-child(1) { transition-delay: 0.25s; }
.feature.reveal.is-visible .feature-body > *:nth-child(2) { transition-delay: 0.33s; }
.feature.reveal.is-visible .feature-body > *:nth-child(3) { transition-delay: 0.41s; }
.feature.reveal.is-visible .feature-body > *:nth-child(4) { transition-delay: 0.49s; }

/* --- Timeline: rows knife in from alternating sides --- */

.timeline .timeline-row.reveal {
  opacity: 0;
  transform: translateX(-52px);
  filter: blur(5px);
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.55s var(--ease-out),
    filter 0.55s var(--ease-out);
}

.timeline .timeline-row.reveal:nth-child(even) {
  transform: translateX(52px);
}

.timeline .timeline-row.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --- Acting: the four frames develop one after another --- */

.acting-grid.reveal .mosaic-item {
  opacity: 0;
  clip-path: inset(14% round var(--radius-sm));
  transform: scale(1.08);
  transition:
    opacity 0.7s var(--ease-out),
    clip-path 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}

.acting-grid.reveal.is-visible .mosaic-item {
  opacity: 1;
  clip-path: inset(0 round var(--radius-sm));
  transform: none;
}

.acting-grid.reveal.is-visible .mosaic-item:nth-child(1) { transition-delay: 0.05s; }
.acting-grid.reveal.is-visible .mosaic-item:nth-child(2) { transition-delay: 0.18s; }
.acting-grid.reveal.is-visible .mosaic-item:nth-child(3) { transition-delay: 0.31s; }
.acting-grid.reveal.is-visible .mosaic-item:nth-child(4) { transition-delay: 0.44s; }

/* keep the hover lift once revealed (specificity must beat the rule above) */
.acting-grid.reveal.is-visible .mosaic-item:hover {
  transform: scale(1.02);
  transition-delay: 0s;
}

/* --- Contact: the email address draws its underline --- */

.contact-email {
  background-image: linear-gradient(var(--amber), var(--amber));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 3px;
  transition: background-size 0.9s var(--ease-out) 0.4s, color 0.3s;
  padding-bottom: 6px;
}

.reveal.is-visible .contact-email {
  background-size: 100% 3px;
}

/* --- Ticker: leans with your scroll (JS sets --tickerSkew).
   The skew lives on the section — the marquee animation
   owns .ticker's transform. --- */

.ticker-section {
  transform: skewX(var(--tickerSkew, 0deg));
}