/* transitions.css — motion recipes for the editors.
 *
 * Values and mechanics come from the FREE recipes of transitions.dev
 * (`npx transitions-dev add --free`; their terms allow modifying them and
 * shipping them in a commercial product, no attribution needed). Each block
 * names its source recipe. The variable names are the recipes' own, so an
 * updated or additional recipe drops in as another block.
 *
 * Rules every block follows (from the recipes):
 *   - animate only transform / opacity / filter (they composite, no relayout);
 *   - one @media (prefers-reduced-motion: reduce) guard per block;
 *   - defaults live in :root so JS (motion.js) reads the same numbers.
 */

:root {
  /* Policy tokens (MOTION.md). Controls use these; the recipe variables below
     are for the bigger, recipe-shaped moments. */
  --dur-micro: 150ms;   /* hover, press, colour */
  --dur-state: 200ms;   /* a control changing state: a selection, a check */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* card-resize — a container changing size */
  --resize-dur: 300ms;
  --resize-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* page-side-by-side — one view leaving, the next arriving */
  --page-slide-dur: 250ms;
  --page-fade-dur: 250ms;
  --page-slide-distance: 8px;
  --page-blur: 3px;
  --page-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-fade-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* panel-reveal — content rising into an existing container */
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* tabs-sliding — the active pill follows the selected tab */
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* leaf-flip — a page of the LIVE PREVIEW booklet turning on the spine.
     Not a transitions.dev recipe: their free tier has no 3D turn, so this uses
     the same house curve (--ease-out) and a duration between card-resize (300)
     and panel-open (400). live-preview.js reads both. */
  --flip-dur: 450ms;
  --flip-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* tooltip — delayed in, instant out */
  --tt-in-dur: 150ms;
  --tt-out-dur: 50ms;
  --tt-scale: 0.98;
  --tt-delay: 80ms;
  --tt-in-ease: ease-out;
  --tt-out-ease: ease-out;
}

/* ---- panel-reveal (keyframe form) ----------------------------------------
   Used for things that are inserted or removed, where there is no "closed"
   state to transition from: a rebuilt edit panel, a new sidebar thumb. Same
   translate + opacity + blur as the recipe, but a short 8px travel and the
   page-slide duration: a full 100px travel suits a big sheet, not a thumbnail. */
@keyframes t-enter {
  from { opacity: 0; transform: translateY(var(--enter-y, 8px)); filter: blur(var(--panel-blur)); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes t-exit {
  from { opacity: 1; transform: none; filter: blur(0); }
  to   { opacity: 0; transform: scale(0.96); filter: blur(var(--panel-blur)); }
}
.t-enter { animation: t-enter var(--page-slide-dur) var(--panel-ease) both; }
.t-exit  { animation: t-exit 180ms var(--panel-ease) both; pointer-events: none; }

/* ---- tabs-sliding --------------------------------------------------------
   The pill's width + transform are written by JS (motion.js: slidingPill) so
   this transition tweens between the previous and next measured positions. */
.t-tabs-pill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  transform: translateX(0);
  transition:
    transform var(--tabs-dur) var(--tabs-ease),
    width     var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
  pointer-events: none;
}

/* ---- canvas morph (card-resize + page-side-by-side) ----------------------
   motion.js animates a snapshot of the old canvas out and the live canvas in
   with the WAAPI; this is only the snapshot's box. */
.t-snapshot {
  position: fixed;
  z-index: 5;
  pointer-events: none;
  transform-origin: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .t-enter, .t-exit { animation: none !important; }
  .t-tabs-pill { transition: none !important; }
  .t-snapshot { display: none !important; }
}