/* css/fadeTranssition.css
   Надёжный и безопасный fade: по умолчанию видим (при заходе),
   затем JS добавляет .fade-in -> opacity 0 + pointer-events none -> удаление.
*/

#fade{
  position:fixed;
  inset:0;
  background:#000;
  z-index:99999;
  opacity:1;
  transition:opacity .8s ease;
  pointer-events:auto;
}

/* класс, который скрипт добавляет сразу после загрузки -> делает невидимым */
#fade.fade-in{
  opacity:0;
  pointer-events:none;
}

/* запасной скрывающий класс */
#fade.hidden{ opacity:0 !important; pointer-events:none !important; visibility:hidden !important; }

/* page fade for link transitions (darken whole page) */
.page-fade{
  position:fixed;
  inset:0;
  background:#000;
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease;
  z-index:3000;
}
.page-fade.show{ opacity:1; pointer-events:auto; }

/* ensure nav is above page-fade */
.top-nav{ z-index:4000; }