/* transitions-lib.css — motion utility library, auto-injected by server.py */
/* ported from transitions.dev — do not link manually, server handles it    */

/* ─── t-modal-backdrop ─────────────────────────────────────────────────── */
/* full-screen overlay: stays display:flex, hidden via opacity+pointer-events */
.t-modal-backdrop {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
  z-index: 1000;
}
.t-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.t-modal-backdrop.is-closing {
  opacity: 0;
  pointer-events: none;
}

/* ─── t-modal ───────────────────────────────────────────────────────────── */
/* modal card: spring-scale enter, fade+shrink exit */
.t-modal {
  transform: scale(0.92);
  opacity: 0;
  transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 120ms ease;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
}
.t-modal.is-closing {
  transform: scale(0.92);
  opacity: 0;
}

/* ─── t-dropdown ────────────────────────────────────────────────────────── */
/* dropdown menu: origin-aware scale + fade */
.t-dropdown {
  transform-origin: top left;
  transform: scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: transform 130ms cubic-bezier(0.34, 1.3, 0.64, 1),
              opacity 100ms ease;
}
.t-dropdown[data-origin="top-right"] { transform-origin: top right; }
.t-dropdown[data-origin="bottom-left"] { transform-origin: bottom left; }
.t-dropdown[data-origin="bottom-right"] { transform-origin: bottom right; }
.t-dropdown[data-origin="top-center"] { transform-origin: top center; }
.t-dropdown[data-origin="bottom-center"] { transform-origin: bottom center; }

.t-dropdown.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-dropdown.is-closing {
  transform: scale(0.9);
  opacity: 0;
  pointer-events: none;
}

/* ─── t-panel-slide ─────────────────────────────────────────────────────── */
/* slide-up panel with blur backdrop */
.t-panel-slide {
  transform: translateY(100%);
  opacity: 0;
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1),
              opacity 150ms ease;
}
.t-panel-slide[data-open="true"] {
  transform: translateY(0);
  opacity: 1;
}
.t-panel-slide[data-open="false"] {
  transform: translateY(100%);
  opacity: 0;
}

/* ─── t-text-swap ───────────────────────────────────────────────────────── */
/* 3-phase text swap: exit → swap content → enter (JS adds classes) */
.t-text-swap {
  transition: opacity 90ms ease, filter 90ms ease;
}
.t-text-swap.is-exit {
  opacity: 0;
  filter: blur(4px);
}
.t-text-swap.is-enter-start {
  opacity: 0;
  filter: blur(4px);
}

/* ─── t-icon-swap ───────────────────────────────────────────────────────── */
/* two-state icon toggle: cross-fade between child [data-icon="a"] and [data-icon="b"] */
.t-icon-swap [data-icon] {
  transition: opacity 120ms ease, transform 120ms ease;
}
.t-icon-swap[data-state="a"] [data-icon="a"] {
  opacity: 1;
  transform: scale(1);
}
.t-icon-swap[data-state="a"] [data-icon="b"] {
  opacity: 0;
  transform: scale(0.7);
  position: absolute;
  pointer-events: none;
}
.t-icon-swap[data-state="b"] [data-icon="b"] {
  opacity: 1;
  transform: scale(1);
}
.t-icon-swap[data-state="b"] [data-icon="a"] {
  opacity: 0;
  transform: scale(0.7);
  position: absolute;
  pointer-events: none;
}

/* ─── t-digit-group ─────────────────────────────────────────────────────── */
/* staggered digit pop-in animation */
.t-digit-group span {
  display: inline-block;
  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.t-digit-group.is-animating span {
  opacity: 0;
  transform: translateY(8px) scale(0.8);
}

/* ─── t-badge ───────────────────────────────────────────────────────────── */
/* notification badge pop: scale + fade */
.t-badge {
  transform: scale(0);
  opacity: 0;
  transition: transform 150ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 100ms ease;
}
.t-badge[data-open="true"] {
  transform: scale(1);
  opacity: 1;
}
.t-badge[data-open="false"] {
  transform: scale(0);
  opacity: 0;
}

/* ─── t-page-slide ──────────────────────────────────────────────────────── */
/* side-by-side page transition */
.t-page-slide {
  overflow: hidden;
  position: relative;
}
.t-page-slide > [data-page] {
  position: absolute;
  inset: 0;
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
              opacity 200ms ease;
}
.t-page-slide[data-page="1"] > [data-page="1"] {
  transform: translateX(0);
  opacity: 1;
}
.t-page-slide[data-page="1"] > [data-page="2"] {
  transform: translateX(100%);
  opacity: 0;
}
.t-page-slide[data-page="2"] > [data-page="1"] {
  transform: translateX(-100%);
  opacity: 0;
}
.t-page-slide[data-page="2"] > [data-page="2"] {
  transform: translateX(0);
  opacity: 1;
}

/* ─── t-resize ──────────────────────────────────────────────────────────── */
/* smooth width/height tween: set dimensions directly, CSS handles the rest */
.t-resize {
  transition: width 200ms ease, height 200ms ease;
  overflow: hidden;
}

/* ─── reduced-motion guard ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .t-modal-backdrop,
  .t-modal,
  .t-dropdown,
  .t-panel-slide,
  .t-text-swap,
  .t-icon-swap [data-icon],
  .t-digit-group span,
  .t-badge,
  .t-page-slide > [data-page],
  .t-resize {
    transition: none !important;
  }
}