/* ==========================================================================
   MOTION - sistema de movimiento de FuelApp. Se carga después de atelier.css y manda sobre el resto.

   Principios
     · Respuesta inmediata: micro-acciones 100-180 ms, entradas 240-320 ms. Nada pesado.
     · Peso e inercia: las cosas aterrizan con frenada suave (expo) y los controles pequeños rebotan (spring).
     · Solo se anima lo que compone la GPU: transform (translate/scale/rotate), opacity y filter: blur().
       Excepciones deliberadas, de un solo elemento y sin recalcular el diseño: el anillo de foco (box-shadow, 320 ms)
       y el desenfoque del telón de modales (backdrop-filter, 400 ms).
     · prefers-reduced-motion: sin desplazamientos, escalas ni desenfoques; solo cambios de color y opacidad casi instantáneos.

   Las mismas curvas están registradas en GSAP (assets/js/ui/motion-system.js) como fuelOut, fuelSpring, fuelInOut y fuelSheet.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --ease-out-expo: var(--ease-smooth-out);                 /* alias: todo el CSS de entrada/salida usa la curva smooth-out de transitions.dev */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);        /* micro-rebotes: interruptores, checks, recuperación al soltar */
  --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.35, 1);    /* morphing y cambios de posición de contenedores */
  --ease-sheet: cubic-bezier(0.16, 1, 0.3, 1.025);         /* hoja inferior: llega y roza el tope magnético */
  /* Escala de movimiento de transitions.dev (duraciones, curvas, distancias, escalas, blur) */
  --duration-stagger: 40ms; --duration-micro: 80ms; --duration-quick: 150ms; --duration-fast: 250ms; --duration-medium: 350ms; --duration-slow: 400ms; --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  --distance-micro: 4px; --distance-base: 8px; --distance-medium: 12px;
  --scale-large: 0.96; --scale-medium: 0.97; --scale-small: 0.98; --scale-tiny: 0.99;
  --blur-small: 2px; --blur-medium: 3px;
  --ease: var(--ease-smooth-out);
  --ease-out: var(--ease-smooth-out);

  --t-press: 100ms;
  --t-micro: var(--duration-quick);
  --t-ui: 180ms;
  --t-enter: var(--duration-fast);
  --t-sheet: 420ms;
  --stagger: var(--duration-stagger);

  --lift-glow: 14 30 22;           /* tinte de la sombra de elevación (claro) */
  --lift-edge: 255 255 255;
}
.dark { --lift-glow: 0 0 0; }

/* Utilidades de Tailwind: mismas curvas y duraciones más cortas que las de plantilla */
.transition, .transition-all, .transition-colors, .transition-opacity, .transition-shadow, .transition-transform { transition-timing-function: var(--ease-out-expo); }
.ease-in-out, .ease-in { transition-timing-function: var(--ease-in-out-smooth); }
.ease-out { transition-timing-function: var(--ease-out-expo); }
.duration-150 { transition-duration: 120ms; }
.duration-200 { transition-duration: 160ms; }
.duration-300 { transition-duration: 240ms; }
.duration-500 { transition-duration: 320ms; }
.duration-700 { transition-duration: 400ms; }

/* ---------- 2. Entrada de página sin GSAP (con GSAP lo hace motion.js): desenfoque óptico + subida milimétrica ---------- */
@keyframes pageEnter {
  from { opacity: 0; translate: 0 8px; scale: 0.98; filter: blur(4px); }
  to   { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
}
.animate-in { animation: pageEnter var(--t-enter) var(--ease-out-expo) backwards; }
.animate-in > * { animation: pageEnter 320ms var(--ease-out-expo) backwards; }
.animate-in > *:nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
.animate-in > *:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.animate-in > *:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.animate-in > *:nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.animate-in > *:nth-child(n+6) { animation-delay: calc(var(--stagger) * 5); }
.animate-in > .admin-bulk-bar { animation: none; }
.js-motion .animate-in, .js-motion .animate-in > * { animation: none; }

/* ---------- 3. Pulsación: compresión instantánea y recuperación con rebote ----------
   (sin opacity ni filter en la lista: GSAP anima esas propiedades en entradas y una transición CSS las retrasaría) */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .icon-action-btn, .sidebar-mini-link, .pub-cta, .pw-secondary, .pw-back, .pw-close,
.dash-act, .dash-pill, .dash-tool, .dash-fuel-pills button, .dash-fuel-tag, .dash-st-nav, .dash-bell, .an-pill, .an-export, .an-apply,
.rail-link, .rail-add, .rail-search, .bottom-nav-link, .bottom-nav-add span, .more-tile, .quick-add-item, .user-trigger, .mobile-bar-btn,
.section-tabs a, .calc-tabs a, .rutas-tabs a, .seg-opt span, .stepper button, .acct-logout, .acct-danger-btn, .acct-avatar, .rf-add, .app-modal-close {
  transition: scale 220ms var(--ease-spring), translate 220ms var(--ease-spring),
              background-color var(--t-micro) var(--ease-out-expo), border-color var(--t-micro) var(--ease-out-expo),
              color var(--t-micro) var(--ease-out-expo), box-shadow var(--t-ui) var(--ease-out-expo);
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:active:not(:disabled), .btn-secondary:active:not(:disabled), .btn-ghost:active:not(:disabled), .btn-danger:active:not(:disabled),
.icon-action-btn:active, .sidebar-mini-link:active, .pub-cta:active, .pw-secondary:active, .pw-back:active, .pw-close:active,
.dash-act:active, .dash-pill:active, .dash-tool:active, .dash-fuel-pills button:active, .dash-fuel-tag:active, .dash-st-nav:active, .dash-bell:active,
.an-pill:active, .an-export:active, .an-apply:active, .rail-link:active, .rail-add:active, .rail-search:active, .bottom-nav-link:active,
.bottom-nav-add:active span, .more-tile:active, .quick-add-item:active, .user-trigger:active, .mobile-bar-btn:active,
.section-tabs a:active, .calc-tabs a:active, .rutas-tabs a:active, .seg-opt:active span, .stepper button:active, .acct-logout:active, .acct-danger-btn:not(:disabled):active,
.acct-avatar:active, .rf-add:active, .app-modal-close:active {
  scale: 0.96; transform: none;
  transition-duration: var(--t-press), var(--t-press), var(--t-micro), var(--t-micro), var(--t-micro), var(--t-press);
  transition-timing-function: var(--ease-out-expo);
}
/* Botones con "tecla": bajan 1 px y pierden el filo inferior mientras se mantienen */
.btn-primary:active:not(:disabled), .btn-secondary:active:not(:disabled), .btn-danger:active:not(:disabled), .rail-add:active, .dash-act.is-primary:active, .pub-cta-block:active { translate: 0 1px; }
.dash-act.is-primary:active { scale: 0.96; }
.bottom-nav-link:active, .rail-link:active { scale: 0.94; }
.bottom-nav-link:active svg { transform: none; }

/* ---------- 4. Tarjetas y bento: elevación táctil con reflejo de cristal (la sombra vive en un pseudo-elemento: solo opacity) ---------- */
.card:is(a, .record-card, .vehicle-shell-card), .dash-tile, .dash-card, .compact-kpi-card, .acct-stat, .an-kpi, .spec-card, .public-vehicle-card, .rf-kpi, .quick-add-item, .more-tile {
  position: relative;
  transition: translate 280ms var(--ease-out-expo), scale 220ms var(--ease-spring), background-color var(--t-micro) var(--ease-out-expo), border-color var(--t-micro) var(--ease-out-expo);
}
.card:is(a, .record-card, .vehicle-shell-card)::before, .dash-tile::before, .dash-card::before, .compact-kpi-card::before, .acct-stat::before, .an-kpi::before,
.spec-card::before, .public-vehicle-card::before, .rf-kpi::before, .quick-add-item::before {
  display: block; content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgb(var(--lift-edge) / 0.1), transparent 38%);
  box-shadow: inset 0 1px 0 rgb(var(--lift-edge) / 0.55), inset 0 0 0 1px rgb(var(--lift-edge) / 0.14), 0 24px 38px -20px rgb(var(--lift-glow) / 0.42);
  transition: opacity 280ms var(--ease-out-expo);
}
.dark .card:is(a, .record-card, .vehicle-shell-card)::before, .dark .dash-tile::before, .dark .dash-card::before, .dark .compact-kpi-card::before, .dark .acct-stat::before,
.dark .an-kpi::before, .dark .spec-card::before, .dark .public-vehicle-card::before, .dark .rf-kpi::before, .dark .quick-add-item::before {
  box-shadow: inset 0 1px 0 rgb(var(--lift-edge) / 0.14), inset 0 0 0 1px rgb(var(--lift-edge) / 0.05), 0 26px 40px -20px rgb(0 0 0 / 0.85);
}
@media (hover: hover) and (pointer: fine) {
  .card:is(a, .record-card, .vehicle-shell-card):hover, .dash-tile:hover, .dash-card:hover, .compact-kpi-card:hover, .acct-stat:hover, .an-kpi:hover,
  .spec-card:hover, .public-vehicle-card:hover, .rf-kpi:hover, .quick-add-item:hover, .more-tile:hover { translate: 0 -2px; }
  .card:is(a, .record-card, .vehicle-shell-card):hover::before, .dash-tile:hover::before, .dash-card:hover::before, .compact-kpi-card:hover::before, .acct-stat:hover::before,
  .an-kpi:hover::before, .spec-card:hover::before, .public-vehicle-card:hover::before, .rf-kpi:hover::before, .quick-add-item:hover::before { opacity: 1; }
  .vehicle-shell-card:hover, .spec-card:hover, .public-vehicle-card:hover { transform: none; }
}
.card:is(a, .record-card):active, .dash-tile:active, .vehicle-shell-card:active { scale: 0.985; transition-duration: var(--t-press); }

/* Filas de lista: respuesta táctil sin saltos de diseño */
.record-card, .dashboard-list-row, .dash-tx-row, .dash-st-row, .search-result-item, .ui-select-option, .user-menu-item, .acct-row {
  transition: background-color var(--t-micro) var(--ease-out-expo), scale 200ms var(--ease-spring);
}
.record-card:active, .dashboard-list-row:active, .search-result-item:active { scale: 0.99; transition-duration: var(--t-press); }

/* ---------- 5. Campos: el foco florece con un rebote elástico ---------- */
.input-field, .acct-input, .calc-input input, .stepper input, .ui-select-button, .auth-pass {
  transition: border-color var(--t-micro) var(--ease-out-expo), background-color var(--t-micro) var(--ease-out-expo), box-shadow 320ms var(--ease-spring);
}
.input-field:focus, .acct-input:focus, .calc-input input:focus, .ui-select-button[aria-expanded="true"] { box-shadow: 0 0 0 4px rgb(var(--a-500) / 0.2); }
.input-field:not(:focus):not(:hover), .acct-input:not(:focus) { box-shadow: 0 0 0 0 rgb(var(--a-500) / 0); }
.ui-select-chevron, .dash-pill-chevron, .an-chev, .dash-fold summary svg { transition: rotate 260ms var(--ease-spring), transform 260ms var(--ease-spring); }

/* ---------- 6. Interruptores, casillas y segmentos: palanca mecánica ---------- */
.ios-switch i { transition: background-color var(--t-ui) var(--ease-out-expo); }
.ios-switch i::after {
  width: 1.55rem; transform-origin: 0% 50%;
  transition: transform 340ms var(--ease-spring), scale 200ms var(--ease-in-out-smooth);
}
.ios-switch input:checked + i::after { transform-origin: 100% 50%; }
.ios-switch input:active + i::after, .ios-switch input:checked:active + i::after { width: 1.55rem; scale: 1.18 1; }
.ios-switch input:checked:active + i::after { transform: translateX(1.25rem); }
.ios-switch.is-pop i::after { animation: knob-stretch 340ms var(--ease-in-out-smooth); }
.admin-switch-track { transition: background-color var(--t-ui) var(--ease-out-expo); }
.admin-switch-track::after { transform-origin: 0% 50%; transition: transform 340ms var(--ease-spring), scale 200ms var(--ease-in-out-smooth); }
.admin-switch input:checked + .admin-switch-track::after { transform-origin: 100% 50%; }
.admin-switch.is-pop .admin-switch-track::after { animation: knob-stretch 340ms var(--ease-in-out-smooth); }
@keyframes knob-stretch { 0% { scale: 1 1; } 38% { scale: 1.2 0.94; } 100% { scale: 1 1; } }

input[type='checkbox'], input[type='radio'] { transition: background-color var(--t-micro) var(--ease-out-expo), border-color var(--t-micro) var(--ease-out-expo), box-shadow 280ms var(--ease-spring); }
input.is-pop:checked { animation: check-pop 280ms var(--ease-spring); }
@keyframes check-pop { 0% { scale: 0.72; } 55% { scale: 1.14; } 100% { scale: 1; } }
.seg-opt.is-pop input:checked + span { animation: seg-pop 300ms var(--ease-spring); }
@keyframes seg-pop { 0% { scale: 0.94; } 60% { scale: 1.04; } 100% { scale: 1; } }
.swatch input:checked + i { transition: box-shadow 280ms var(--ease-spring), scale 280ms var(--ease-spring); }
.swatch.is-pop i { animation: check-pop 300ms var(--ease-spring); }

/* ---------- 7. Menús y desplegables: se abren desde su ancla, desenfocados, y encajan ---------- */
.an-menu, .dash-menu { filter: blur(var(--blur-small)); transition: opacity var(--t-ui) var(--ease-out-expo), scale 280ms var(--ease-out-expo), translate 280ms var(--ease-out-expo), filter 240ms var(--ease-out-expo); }
.an-menu.is-open, .dash-menu.is-open { filter: blur(0); }
.dash-menu { transform-origin: top left; }
.an-menu { transform-origin: top right; }
.ui-select-popover {
  filter: blur(4px); transform: translateY(-6px) scale(0.96);
  transition: opacity var(--t-ui) var(--ease-out-expo), transform 280ms var(--ease-out-expo), filter 240ms var(--ease-out-expo);
}
.ui-select-popover.opens-up { transform: translateY(6px) scale(0.96); }
.ui-select-popover.is-open { filter: blur(0); transform: none; }
.ui-select-option { transition: background-color var(--t-micro) var(--ease-out-expo), scale 200ms var(--ease-spring); }
.ui-select-check { transition: opacity var(--t-micro) var(--ease-out-expo), transform 300ms var(--ease-spring); }

/* Hojas inferiores: subida con inercia, tope magnético y telón que se desenfoca de forma no lineal */
.ui-select-sheet { transition: transform var(--t-sheet) var(--ease-sheet); }
.ui-select-sheet-overlay { transition: opacity 320ms var(--ease-out-expo); }
.ui-select-sheet-overlay.is-open { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: backdrop-bloom 420ms var(--ease-out-expo) backwards; }
.app-modal-overlay { transition-timing-function: var(--ease-out-expo); transition-duration: 260ms; }
.app-modal-overlay:not(.opacity-0) .app-modal-backdrop { animation: backdrop-bloom 420ms var(--ease-out-expo) backwards; }
.more-sheet-backdrop { animation: backdrop-bloom 420ms var(--ease-out-expo) backwards; }
@keyframes backdrop-bloom {
  0%   { -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); }
  35%  { -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); }
  100% { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
}
.ui-dialog { transition: transform 340ms var(--ease-spring); }
.ui-dialog-overlay { transition: opacity 220ms var(--ease-out-expo); }

/* Avisos: llegan con un pequeño rebote desde donde nacen */
@keyframes toast-in { 0% { opacity: 0; translate: 0 14px; scale: 0.95; filter: blur(4px); } 100% { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); } }
@keyframes toast-in-top { 0% { opacity: 0; translate: 0 -14px; scale: 0.95; filter: blur(4px); } 100% { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); } }
.toast { animation: toast-in 380ms var(--ease-spring) both; transition: opacity var(--t-ui) var(--ease-out-expo), transform var(--t-ui) var(--ease-in-out-smooth); }
@media (max-width: 767.98px) { .toast { animation-name: toast-in-top; } }

/* ---------- 8. Datos reactivos: el cálculo se confirma con un destello cromático ---------- */
@keyframes calc-bloom {
  0%   { filter: brightness(1.35) saturate(1.5); scale: 1.015; }
  100% { filter: brightness(1) saturate(1); scale: 1; }
}
.calc-field.is-calculated { animation: calc-bloom 720ms var(--ease-out-expo); }
.calc-field .num-field { transition: color 700ms var(--ease-out-expo); }
@keyframes stat-tick { 0% { filter: brightness(1.5); translate: 0 -2px; } 100% { filter: brightness(1); translate: 0 0; } }
.is-updated { animation: stat-tick 480ms var(--ease-out-expo); }

/* Cargas y esqueletos */
.an-body { transition: opacity var(--t-ui) var(--ease-out-expo), filter var(--t-ui) var(--ease-out-expo); }
.an-body.is-loading { filter: blur(1.5px); }
.is-busy { transition: opacity var(--t-ui) var(--ease-out-expo); }

/* ---------- 9. Movimiento reducido: sin desplazamientos, escalas ni desenfoques; solo color y opacidad casi instantáneos ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-property: opacity, color, background-color, border-color, fill, stroke !important;
    transition-duration: 160ms !important;
    transition-delay: 0s !important;
  }
  .btn-primary:active, .btn-secondary:active, .btn-ghost:active, .btn-danger:active, [class]:active { scale: none !important; translate: none !important; }
  .card:hover, .dash-tile:hover, .dash-card:hover, .record-card:hover, [class]:hover { translate: none !important; }
  .an-menu, .dash-menu, .ui-select-popover { filter: none !important; }
  .toast { opacity: 1; }
  .ui-select-sheet { transition: opacity 60ms linear !important; }
}

/* ---------- 10. Transición nativa entre páginas (Cross-Document View Transitions): 0 KB de JS, solo opacity (GPU) ----------
   Fundido corto de TODO el documento. Las barras (.bottom-nav, .mobile-bar, .sidebar) NO llevan view-transition-name a propósito:
   tienen backdrop-filter, y al capturarlas como capa propia pierden el desenfoque de fondo durante la transición (parpadeo/salto).
   Al ser idénticas en la página vieja y en la nueva, el fundido las deja quietas; el movimiento lo ponen las tarjetas al entrar. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 120ms var(--ease-smooth-out) both; }
::view-transition-new(root) { animation: vt-in 180ms var(--ease-smooth-out) both; }
@keyframes vt-out { to   { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; } }

/* Accesibilidad: sin transiciones con movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Con GSAP activo la entrada la hace motion.js: sin esto cada bloque animaba dos veces (CSS + GSAP) y daba tirones */
.js-motion .animate-in, .js-motion .animate-in > * { animation: none; }
@keyframes pageEnter { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* ---------- 11. transitions.dev: sustituye las animaciones propias por las de la skill ----------
   Menús/desplegables: escala + opacidad (abre 250 ms, cierra 150 ms). Modal/diálogo: escala .96.
   Panel/hoja: 400/350 ms. Aviso: sube 16 px con blur 2. Interruptor: palanca con doble rebote. Todo con smooth-out. */
:root {
  --dropdown-open-dur: 250ms; --dropdown-close-dur: 150ms;
  --modal-open-dur: 250ms; --modal-close-dur: 150ms;
  --panel-open-dur: 400ms; --panel-close-dur: 350ms;
  --toast-open: 350ms; --toast-close: 250ms;
  --toggle-dur: 350ms; --toggle-ease: cubic-bezier(0.34, 1.35, 0.64, 1);
}

/* Menús desplegables */
.an-menu, .dash-menu, .ui-select-popover {
  filter: none; translate: none;
  scale: var(--scale-medium);
  transition: opacity var(--dropdown-close-dur) var(--ease-smooth-out), scale var(--dropdown-close-dur) var(--ease-smooth-out);
}
.an-menu.is-open, .dash-menu.is-open, .ui-select-popover.is-open {
  filter: none; scale: 1;
  transition: opacity var(--dropdown-open-dur) var(--ease-smooth-out), scale var(--dropdown-open-dur) var(--ease-smooth-out);
}
.ui-select-popover, .ui-select-popover.opens-up { transform: none; }
.ui-select-popover { transform-origin: top center; }
.ui-select-popover.opens-up { transform-origin: bottom center; }

/* Modal y diálogos de confirmación */
.ui-dialog { scale: var(--scale-large); transition: scale var(--modal-close-dur) var(--ease-smooth-out), opacity var(--modal-close-dur) var(--ease-smooth-out); }
.ui-dialog-overlay:not(.opacity-0):not([hidden]) .ui-dialog, .ui-dialog.is-open { scale: 1; transition-duration: var(--modal-open-dur); }
.ui-dialog-overlay { transition: opacity var(--modal-open-dur) var(--ease-smooth-out); }
.app-modal-overlay { transition-timing-function: var(--ease-smooth-out); transition-duration: var(--panel-close-dur); }
.app-modal-overlay:not(.opacity-0) { transition-duration: var(--panel-open-dur); }

/* Hojas inferiores y telones: sin rebote ni blur progresivo */
.ui-select-sheet { transition: transform var(--panel-open-dur) var(--ease-smooth-out); }
.ui-select-sheet-overlay { transition: opacity var(--dropdown-open-dur) var(--ease-smooth-out); }
.ui-select-sheet-overlay.is-open, .app-modal-overlay:not(.opacity-0) .app-modal-backdrop, .more-sheet-backdrop { animation: none; }

/* Avisos */
@keyframes toast-in { from { opacity: 0; translate: 0 16px; scale: var(--scale-medium); filter: blur(var(--blur-small)); } to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); } }
@keyframes toast-in-top { from { opacity: 0; translate: 0 -16px; scale: var(--scale-medium); filter: blur(var(--blur-small)); } to { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); } }
.toast { animation: toast-in var(--toast-open) var(--ease-smooth-out) both; transition: opacity var(--toast-close) var(--ease-smooth-out), transform var(--toast-close) var(--ease-smooth-out); }

/* Interruptor: la palanca viaja con el doble rebote de la skill (sin estiramiento) */
.ios-switch i::after, .admin-switch-track::after { transition: transform var(--toggle-dur) var(--toggle-ease); }
.ios-switch input:active + i::after, .ios-switch input:checked:active + i::after { scale: 1 1; width: 1.55rem; }
.ios-switch.is-pop i::after, .admin-switch.is-pop .admin-switch-track::after { animation: none; }
.ios-switch i, .admin-switch-track { transition: background-color var(--duration-quick) var(--ease-smooth-out); }

/* Casillas, radios y selectores: relleno de la caja en 150 ms, sin pop */
input[type='checkbox'], input[type='radio'] { transition: background-color var(--duration-quick) var(--ease-smooth-out), border-color var(--duration-quick) var(--ease-smooth-out), box-shadow var(--duration-quick) var(--ease-smooth-out); }
input.is-pop:checked, .seg-opt.is-pop input:checked + span, .swatch.is-pop i { animation: none; }
.swatch input:checked + i { transition: box-shadow var(--duration-quick) var(--ease-smooth-out); }

@media (prefers-reduced-motion: reduce) {
  .ui-dialog, .toast { animation: none !important; }
}