/* Valors comuns del moviment (transitions.dev). Es fan servir amb var(--…) des de qualsevol CSS de SIGPC. */
:root {
  /* Durades */
  --duration-stagger: 40ms;      /* separació entre elements d'una cascada */
  --duration-micro: 80ms;        /* retards d'intenció, segments d'un tremolor */
  --duration-quick: 150ms;       /* tancar menús i modals, canvis de color en hover */
  --duration-fast: 250ms;        /* obrir menús i modals, hover amb moviment */
  --duration-medium: 350ms;      /* tancar panells i toasts */
  --duration-slow: 400ms;        /* obrir panells, revelar contingut */
  --duration-very-slow: 500ms;   /* moments d'èmfasi, revelat de text */
  /* Easings */
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: ease-in-out;
  --ease-out: ease-out;
  --ease-linear: linear;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1);
  /* Distàncies */
  --distance-micro: 4px;
  --distance-small: 6px;
  --distance-base: 8px;
  --distance-medium: 12px;
  --distance-large: 30px;
  /* Escales i desenfocaments */
  --scale-large: 0.96;
  --scale-medium: 0.97;
  --scale-small: 0.98;
  --scale-tiny: 0.99;
  --blur-small: 2px;
  --blur-medium: 3px;
  --blur-large: 8px;

  /* Hover de targetes i botons: aixecament i ombra, amb el color una mica més àgil */
  --hover-lift: transform var(--duration-fast) var(--ease-smooth-out),
                box-shadow var(--duration-fast) var(--ease-smooth-out),
                border-color var(--duration-quick) var(--ease-in-out);
  --hover-color: background-color var(--duration-quick) var(--ease-in-out),
                 color var(--duration-quick) var(--ease-in-out),
                 border-color var(--duration-quick) var(--ease-in-out);

  /* Menú desplegable */
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: 0.97;
  --dropdown-closing-scale: 0.99;
  --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Toast (avisos que pugen des de baix) */
  --toast-open: 350ms;
  --toast-close: 250ms;
  --toast-distance: 16px;
  --toast-blur: 2px;
  --toast-scale: 0.97;
  --toast-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Acordió */
  --acc-expand: 250ms;
  --acc-collapse: 250ms;
  --acc-chevron: 250ms;
  --acc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Check d'èxit */
  --check-opacity-dur: 500ms;
  --check-rotate-dur: 500ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 500ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 500ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
  /* Tremolor d'error */
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Canvi de text suau (valors que s'actualitzen al lloc) */
  --text-soft-dur: 200ms;
  --text-soft-blur: 2px;
  --text-soft-ease: ease-in-out;
  --text-soft-resize-dur: 240ms;
  --text-soft-resize-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Modal (obre amb escala, tanca més suau) */
:root {
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}