/* Transitions.dev — Texts reveal */
/* https://transitions.dev/detail.html?t=texts-reveal */

/*
  Usage:
    <div class="t-stagger">
      <strong class="t-stagger-line t-stagger-line--1">…</strong>
      <span class="t-stagger-line t-stagger-line--2">…</span>
    </div>

  State:
    - Add `.is-shown` to play the staggered entrance.
    - Add `.is-hiding` (and remove `.is-shown`) to fade
      out in place over a short 200ms — independent of the
      entrance timing so the exit doesn't replay the stagger.

  Add more lines with `.t-stagger-line--N`. The embed snippet
  uses lines 1–8.
*/

:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lines start translated down + blurred + invisible; .is-shown
   on the parent flips them to their resting state. Each later
   line's transition-delay holds it back by --stagger-stagger. */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--1 { transition-delay: calc(var(--stagger-stagger) * 0); }
.t-stagger-line--2 { transition-delay: calc(var(--stagger-stagger) * 1); }
.t-stagger-line--3 { transition-delay: calc(var(--stagger-stagger) * 2); }
.t-stagger-line--4 { transition-delay: calc(var(--stagger-stagger) * 3); }
.t-stagger-line--5 { transition-delay: calc(var(--stagger-stagger) * 4); }
.t-stagger-line--6 { transition-delay: calc(var(--stagger-stagger) * 5); }
.t-stagger-line--7 { transition-delay: calc(var(--stagger-stagger) * 6); }
.t-stagger-line--8 { transition-delay: calc(var(--stagger-stagger) * 7); }

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* Exit decouples from the stagger: same fade for every line,
   no Y return, no blur — so the disappearance reads as a
   single quiet fade instead of a reverse reveal. */
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}

/* Inside a <pre>, lines are already separated by preserved
   newlines. Keep them inline so the reveal does not add a
   blank line between each row, and so copy still includes
   those newlines. */
pre.syntax .t-stagger-line {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .t-stagger-line {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none !important;
  }
}