/* ======================================================================
   QWICK -- KOMPONENT: fade-in a fade-out

   Jediny zdroj objavenia a zmiznutia.

   Cas a krivku nesu roly `--qwick-fade-in*` / `--qwick-fade-out*`
   v `styles/00-tokens/01-semantic.css`. Tento subor k nim pridava iba
   dve klucove snimky a dve roly pre prvky, ktore nemaju stav, z ktoreho by
   sa dal spravit prechod -- napriklad obsah, ktory prave vznikol
   (`innerHTML`), alebo vrstva, ktora sa ma skryt az po dobehnuti.

     .qwick-fade-in    prvok sa objavi z priehladnosti
     .qwick-fade-out   prvok zmizne a zostane priehladny, kym ho vlastnik
                       neskryje; pocas miznutia uz neberie dotyky

   Stavove prvky (trieda `.show`, `.open`, `is-*`) rolu nepotrebuju: ich
   viditelny stav nesie `transition:var(--qwick-fade-in)` a skryty
   `transition:var(--qwick-fade-out)`.

   Z JavaScriptu sa roly nasadzuju cez `QwickFade`
   (`scripts/02-qwick-fade.js`), ktory vie animaciu restartovat, zrusit
   a zavolat pokracovanie az po zmiznuti.

   Klucove snimky maju iba JEDEN koniec. Druhy je hodnota prvku samotneho,
   takze fade-out prvku, ktory mal .58, ide z .58 a nie zo skoku na 1.
   ====================================================================== */
@keyframes qwick-fade-in{
  from{opacity:0;}
}
@keyframes qwick-fade-out{
  to{opacity:0;}
}
.qwick-fade-in{
  animation:qwick-fade-in var(--qwick-fade-in-time) var(--qwick-fade-in-ease) backwards;
}
.qwick-fade-out{
  animation:qwick-fade-out var(--qwick-fade-out-time) var(--qwick-fade-out-ease) forwards;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .qwick-fade-in,
  .qwick-fade-out{animation-duration:.01ms;}
}