/* ==========================================================================
   TimLuks – loading.css
   Úvodná obrazovka (assets/js/loading.js rozhoduje o časovaní): vždy aspoň 2 s, logo LT hore,
   pod ním TIMLUKS, ktoré sa po písmenkach striedavo zobrazuje a skrýva (nekonečná vlna, kým
   loading.js nespustí .is-leaving). Pozadie a farby loga sú ZÁMERNE pevné (nie podľa --bg/--ink
   režimu) – obrazovka je vždy tmavá, rovnako ako mobilné fullscreen menu v header.css.

   Na konci (.is-leaving) sa celé logo priblíži/zväčší a zmizne, kým loading.js súčasne cez
   requestAnimationFrame rozrastá kruhovú dieru (CSS mask-image: radial-gradient) v .loading__backdrop
   presne z miesta, kde bolo viditeľné T – vizuálne to pôsobí, akoby sa web odkrýval práve cez neho.
   (Skúšalo sa to aj cez skutočnú SVG masku v tvare T, ale mask-image na HTML prvku sa naprieč
   prehliadačmi správal nespoľahlivo – celé pozadie bolo priesvitné namiesto len diery; gradient
   je jednoduchší a spoľahlivý.)
   ========================================================================== */

/* Bez JavaScriptu sa úvodná obrazovka nikdy nezavrie, preto sa vôbec nezobrazí. */
.no-js .loading { display: none; }

html.is-loading,
html.is-loading body {
  overflow: hidden;
  height: 100%;
}

.loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  isolation: isolate;
}

.loading__backdrop {
  position: absolute;
  inset: 0;
  background: var(--ink-fixed);
}

.loading__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vw, 22px);
}

.loading__mark {
  display: block;
  width: clamp(64px, 9vw, 96px);
  height: auto;
  transition: transform 1.15s cubic-bezier(0.6, 0, 0.4, 1), opacity 0.9s ease 0.25s;
}

/* Pevné farby (nie podľa --bg/--ink režimu, viď komentár hore) – v index.html sú to vlastné <path>
   (nie <use> na zdieľané lg-mark-l/t), aby sa neuplatnila ich vlastná trieda lg-w/lg-g. */
.loading__mark-l { fill: var(--on-ink); }
.loading__mark-t { fill: var(--accent); }

/* Rovnaké písmo ako v navbare (nav odkazy – logo samotné je vektor, nemá "font"): --font-body
   (Inter), nie zvýraznený --font-headline s veľkými medzerami ako predtým. */
.loading__word {
  display: flex;
  gap: 0.16em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ink);
  transition: opacity 0.4s ease;
}

.loading__char {
  display: inline-block;
  opacity: 0;
  animation: loading-blink 1.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.12s);
}

@keyframes loading-blink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* ---------- Odchod (keď je stránka pripravená – triedy pridáva loading.js) ---------- */

.loading.is-leaving { pointer-events: none; }
.loading.is-leaving .loading__word { opacity: 0; }
.loading.is-leaving .loading__char { animation: none; }
.loading.is-leaving .loading__mark { transform: scale(7); opacity: 0; }

/* Záložný (jednoduchý) odchod – bez priblíženia/masky, len jemné vyblednutie. Používa ho
   loading.js pri prefers-reduced-motion alebo ak prehliadač CSS masku nevie animovať. */
/* Krátka verzia pre ďalšie načítania v tej istej relácii (viď loading.js). */
.loading.is-leaving-quick {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.loading.is-leaving-simple {
  opacity: 0;
  transition: opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .loading__char { animation: none; opacity: 1; }
}