/* =====================================================================
   Bevægelsestokens. Ét sted — ligesom farverne.

   Princippet: bevægelse skal FORKLARE noget. Et hold der rykker op i
   ranglisten skal ses rykke. Et tal der ændrer sig skal tælle derhen.
   Alt andet er pynt, og pynt bliver træls den tredje gang man ser det.

   Varigheder er korte. Alt over 400 ms føles langsomt i et værktøj,
   man bruger hver uge — modsat en landingpage, hvor man må tage sig tid.
   ===================================================================== */
:root{
  /* varighed */
  --t-instant: 90ms;    /* tilstandsskift: hover, fokus, tryk */
  --t-quick:   180ms;   /* små flytninger, fade */
  --t-base:    260ms;   /* standard: indtoning, udfoldning */
  --t-slow:    420ms;   /* omrokering, sideskift */
  --t-tell:    900ms;   /* fortællende: taloptælling, søjler der vokser */

  /* forsinkelse mellem elementer i en serie */
  --t-stagger: 45ms;

  /* kurver */
  --e-out:    cubic-bezier(.22,1,.36,1);      /* standard: hurtigt ud, blødt ind */
  --e-in-out: cubic-bezier(.65,0,.35,1);
  --e-spring: cubic-bezier(.34,1.56,.64,1);   /* let overshoot — kun på det vigtige */
}

/* Respekt for systemindstillingen. Ikke en detalje: for nogle brugere
   udløser bevægelse svimmelhed. Indholdet skal stadig være der. */
@media (prefers-reduced-motion: reduce){
  :root{
    --t-instant:0ms; --t-quick:0ms; --t-base:0ms;
    --t-slow:0ms; --t-tell:0ms; --t-stagger:0ms;
  }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}