/* ─── transitions.dev ───
   transitions.dev is a library of small, tuned interface transitions
   published as CSS snippets (a rise, a fade, a cross-blur), each one reading
   its timing from semantic `:root` variables rather than from literals. The
   copy in this repo is the agent skill under `.agents/skills/transitions-dev`,
   pinned by `skills-lock.json`.

   This sheet is the library's half of that install, and it carries exactly
   two things: the library's `:root` motion variables MAPPED ONTO THE HOUSE
   TOKENS (tokens.css owns the ramp and the easing, so a snippet never brings
   its own 400ms in), and only the `t-*` snippets the product actually uses.
   Nothing here is invented: a value that is not a var() is the snippet's own
   distance or blur, tuned for the surface that reads it.

   Adding one: when a snippet is used for the first time, copy it here
   VERBATIM from `.agents/skills/transitions-dev/NN-*.md`, map its `:root`
   variables onto the house tokens in the block below, and keep its own
   `prefers-reduced-motion` guard with it. The guard travels with the snippet
   because it is part of the snippet, not a global sweep somebody remembers
   to widen.

   In use: the panel reveal (07), which the review card enters and leaves on
   (COT-494). */

:root {
  /* Panel reveal (07). The library's defaults are 400ms/350ms and a 100px
     travel; the house ramp says a large surface opens on --t-panel and
     settles on --t-slow, and 24px is a card's own rise rather than a full
     panel's height. */
  --panel-open-dur: var(--t-panel);
  --panel-close-dur: var(--t-slow);
  --panel-translate-y: 24px;
  --panel-blur: 2px;
  --panel-ease: var(--ease-out);
}

.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity   var(--panel-close-dur) var(--panel-ease),
    filter    var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}

.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity   var(--panel-open-dur) var(--panel-ease),
    filter    var(--panel-open-dur) var(--panel-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-panel-slide { transition: none !important; }
}