/* Only hidden when JavaScript is running (an inline script in the layouts
   adds .reveal-ready to <html>, and reveal.js then fades each block in) —
   without JS, or for crawlers that don't run it, the content is simply
   shown instead of staying invisible. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-ready [data-reveal="fade"] {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal] {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* Cross-document view transitions (Figma: new page slides down over the
   old on navigation) — real page loads, not an SPA. Pages are never
   stacked in the DOM; the browser just takes a snapshot of the outgoing
   page and the incoming page and animates between them for one frame of
   the real navigation. Chromium-based browsers only for now (Safari/
   Firefox don't support cross-document transitions yet) — everywhere
   else this block is inert and the site just navigates normally, so it's
   safe to ship as pure progressive enhancement. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  /* The outgoing page sits still and fully visible, being covered by the
     incoming page sliding down over it — not the browser's default
     cross-fade. */
  animation: none;
}

::view-transition-new(root) {
  animation: page-slide-down 0.6s cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes page-slide-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root) {
    animation: none;
  }
}