/* ============================================================
   PAPYROS — shared motion utilities
   ============================================================ */

.surface-raised { background: var(--surface-raised); }
.surface-sunk { background: var(--surface-sunk); }
.surface-deep { background: var(--surface-deep); }

/* Progressive enhancement: content is visible by default. Only once JS
   has confirmed it will manage the reveal (html.reveal-ready) do we hide
   the pre-reveal state. If JS is absent, slow, errors, or the observer
   never fires, nothing is ever stranded invisible. */
.reveal-ready .chapter-enter {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s var(--ease-out-expo),
    transform 0.55s var(--ease-out-expo);
}
.reveal-ready .chapter-enter.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-ready .reveal-stagger__item {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.45s var(--ease-out-expo),
    transform 0.45s var(--ease-out-expo);
}
.reveal-ready .reveal-stagger__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-ready .hero-line-reveal {
  clip-path: inset(0 100% 0 0);
  opacity: 0.4;
}
.reveal-ready .hero-line-reveal.is-revealed {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition:
    clip-path 0.65s var(--ease-out-expo),
    opacity 0.65s var(--ease-out-expo);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready .chapter-enter,
  .reveal-ready .reveal-stagger__item,
  .reveal-ready .hero-line-reveal {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}

/* Hard fallback: when JS gives up waiting on observers/transitions (e.g. a
   throttled background tab), force everything to its final visible state
   instantly, bypassing any frozen transition. */
html.reveal-done .chapter-enter,
html.reveal-done .reveal-stagger__item,
html.reveal-done .hero-line-reveal,
html.reveal-done .testimonials__bubble {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  transition: none !important;
}