/* Whiteblock motion system — tokens + utilities + reduced-motion
   ===============================================================
   Motion principles: Emil Kowalski (restraint, speed, GPU-only) +
   Jakub Krehel (subtle production polish). Productivity tool context:
   under 300ms for UI, 180ms ideal. iOS-style 350ms para drawers.
   Solo animamos transform / opacity / filter (nunca layout).
*/

:root {
  /* Duraciones */
  --motion-instant: 60ms;
  --motion-fast:    120ms;   /* color swaps, hover */
  --motion-base:    180ms;   /* default UI */
  --motion-medium:  240ms;   /* popovers, modales pequenos */
  --motion-slow:    360ms;   /* drawers, sheets */
  --motion-emphasis:520ms;   /* full-screen, hero */

  /* Easings (custom Beziers — los nativos `ease` son flojos) */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);   /* entradas */
  --ease-in:     cubic-bezier(0.55, 0.06, 0.68, 0.19);/* salidas */
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);   /* moviendo elementos */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);      /* iOS sheet (Vaul) */
  --ease-snappy: cubic-bezier(0.4, 0, 0.2, 1);        /* Material */
  --ease-back:   cubic-bezier(0.34, 1.56, 0.64, 1);   /* overshoot suave */

  /* Override del token legado: estaba `.15s ease` (default flojo).
     Ahora hereda nuestra base + curva real. */
  --transition: var(--motion-base) var(--ease-snappy);
}

/* ======== A11y: respeta reduced-motion siempre ======== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ======== Keyframes utilitarios ======== */
@keyframes wb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes wb-fade-in-up {
  from { opacity: 0; transform: translate3d(0, 8px, 0); filter: blur(4px); }
  to   { opacity: 1; transform: translate3d(0, 0, 0);    filter: blur(0); }
}

@keyframes wb-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes wb-slide-in-right {
  from { transform: translate3d(100%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

@keyframes wb-slide-in-up {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ======== Clases utilitarias ======== */

/* Entrada simple para contenedores (hero, secciones, modales) */
.wb-anim-in {
  animation: wb-fade-in-up var(--motion-medium) var(--ease-out) backwards;
  will-change: transform, opacity, filter;
}
.wb-anim-fade {
  animation: wb-fade-in var(--motion-base) var(--ease-out) backwards;
}
.wb-anim-scale {
  animation: wb-scale-in var(--motion-medium) var(--ease-out) backwards;
  transform-origin: center;
}

/* Stagger para listas/grids — primer hijo a 20ms, escala con --i o nth-child */
.wb-anim-stagger > * {
  animation: wb-fade-in-up var(--motion-medium) var(--ease-out) backwards;
  will-change: transform, opacity, filter;
}
.wb-anim-stagger > *:nth-child(1)  { animation-delay:  20ms; }
.wb-anim-stagger > *:nth-child(2)  { animation-delay:  50ms; }
.wb-anim-stagger > *:nth-child(3)  { animation-delay:  80ms; }
.wb-anim-stagger > *:nth-child(4)  { animation-delay: 110ms; }
.wb-anim-stagger > *:nth-child(5)  { animation-delay: 140ms; }
.wb-anim-stagger > *:nth-child(6)  { animation-delay: 170ms; }
.wb-anim-stagger > *:nth-child(7)  { animation-delay: 200ms; }
.wb-anim-stagger > *:nth-child(8)  { animation-delay: 220ms; }
.wb-anim-stagger > *:nth-child(n+9){ animation-delay: 240ms; }

/* Press feedback — botones piden esta clase explicitamente para no romper
   transforms existentes en otros componentes. */
.wb-press {
  transition: transform var(--motion-fast) var(--ease-out);
}
.wb-press:not([disabled]):active {
  transform: scale(0.97);
}

/* Cuando se quita el will-change tras la animacion */
.wb-anim-in,
.wb-anim-stagger > * {
  animation-fill-mode: backwards;
}

/* ============================================================
   Modal in/out — extraído del dashboard (sections/app/styles.css)
   para que todas las secciones lo consuman con un mismo lenguaje:
   overlay fade + content scale+blur+slide premium iOS-style.
   Auto-aplica al patrón estándar `.modal-overlay.show > .modal`
   y a su variante `.modal-overlay.open > .modal` (facturas).
   ============================================================ */
@keyframes wb-modal-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes wb-modal-content-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); filter: blur(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0);     filter: blur(0); }
}
.modal-overlay.show,
.modal-overlay.open {
  animation: wb-modal-overlay-in var(--motion-base) var(--ease-out);
}
.modal-overlay.show > .modal,
.modal-overlay.open > .modal {
  animation: wb-modal-content-in var(--motion-medium) var(--ease-out);
  will-change: transform, opacity, filter;
}

/* Notif-style: slide desde la derecha con fade (toasts/notifications) */
@keyframes wb-slide-in-right-soft {
  from { transform: translate3d(100%, 0, 0); opacity: 0; }
  to   { transform: translate3d(0, 0, 0);    opacity: 1; }
}
.wb-anim-slide-in-right {
  animation: wb-slide-in-right-soft var(--motion-medium) var(--ease-spring) backwards;
}

/* Preview/tooltip pop-in (subtle scale + slide + fade) — elevado del chat preview pattern */
@keyframes wb-preview-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.wb-anim-preview-in {
  animation: wb-preview-in var(--motion-medium) var(--ease-out);
}

/* Drawer-style slide cuando se necesita aplicar fuera del shell */
.wb-drawer-enter {
  animation: wb-slide-in-right var(--motion-slow) var(--ease-spring);
}