/* ══════════════════════════════════════════════════════════════════
   21art — úvodní animace značky.

   Nástup 1,5 s:  stupnice najede zleva a rozsvítí se (0–0,9 s),
                  jméno se zaostřuje z rozmazu (0–1,15 s),
                  ryska dopadne na svou značku s dosednutím (0,85–1,35 s).
                  Zbytek je klid.
   Odchod 1 s:    jméno se rozostří, stupnice odjede doprava.

   Barvy a písma si bere z proměnných značky; když stránka žádné nemá,
   použijí se náhradní hodnoty.
   ════════════════════════════════════════════════════════════════ */

.uvod{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(1.4rem,4vh,2.4rem);
  background:var(--tubus,#0B0C0B);
  /* stránka pod tím je hotová, jen ji ještě není vidět */
  will-change:opacity;
}
.uvod[hidden]{display:none!important}

.uvod .znak{
  width:min(74vw,420px); height:auto; display:block; overflow:visible;
}

/* ── jméno pod animací (klientská stránka) ───────────────────────── */
.uvod .komu{
  font-family:var(--pismo-cisla,"IBM Plex Mono",ui-monospace,monospace);
  font-size:clamp(.68rem,1.6vw,.78rem); letter-spacing:.22em; text-transform:uppercase;
  color:var(--elox,#8B908A); text-align:center; margin:0; padding-inline:1.5rem;
  opacity:0;
}
.uvod.jede .komu{animation:uvodKomu .55s cubic-bezier(.22,.61,.36,1) 1.15s both}

/* ── díly značky ─────────────────────────────────────────────────── */
.uvod .skala{
  /* najede zleva a rozsvítí se */
  opacity:0; transform:translateX(-34px);
}
.uvod .ryska{
  opacity:0; transform:translateY(-22px);
}
.uvod .jmeno{
  opacity:0; filter:blur(16px); transform:scale(1.035);
}

.uvod.jede .skala{animation:uvodSkala .9s cubic-bezier(.22,.61,.36,1) both}
.uvod.jede .jmeno{animation:uvodJmeno 1.15s cubic-bezier(.22,.61,.36,1) both}
.uvod.jede .ryska{animation:uvodRyska .5s cubic-bezier(.34,1.3,.5,1) .85s both}

@keyframes uvodSkala{
  from{opacity:0; transform:translateX(-34px)}
  60%{opacity:1}
  to{opacity:1; transform:none}
}
@keyframes uvodJmeno{
  from{opacity:0; filter:blur(16px); transform:scale(1.035)}
  55%{opacity:1}
  to{opacity:1; filter:blur(0); transform:none}
}
@keyframes uvodRyska{
  0%{opacity:0; transform:translateY(-22px)}
  35%{opacity:1}
  70%{transform:translateY(1.5px)}   /* malé dosednutí */
  85%{transform:translateY(-.5px)}
  100%{opacity:1; transform:none}
}
@keyframes uvodKomu{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:none}
}

/* ── odchod: 1 s, opačně ─────────────────────────────────────────── */
.uvod.konci{animation:uvodPryc .35s linear .65s both}
.uvod.konci .jmeno{animation:uvodJmenoPryc .55s cubic-bezier(.55,.06,.68,.19) both}
.uvod.konci .ryska{animation:uvodRyskaPryc .35s cubic-bezier(.55,.06,.68,.19) both}
.uvod.konci .skala{animation:uvodSkalaPryc .8s cubic-bezier(.55,.06,.68,.19) .2s both}
.uvod.konci .komu{animation:uvodKomuPryc .4s ease both}

@keyframes uvodJmenoPryc{
  from{opacity:1; filter:blur(0); transform:none}
  to{opacity:0; filter:blur(16px); transform:scale(1.035)}
}
@keyframes uvodRyskaPryc{
  from{opacity:1; transform:none}
  to{opacity:0; transform:translateY(-22px)}
}
@keyframes uvodSkalaPryc{
  from{opacity:1; transform:none}
  40%{opacity:1}
  to{opacity:0; transform:translateX(34px)}
}
@keyframes uvodKomuPryc{from{opacity:1}to{opacity:0}}
@keyframes uvodPryc{from{opacity:1}to{opacity:0}}

/* ── kdo animace nechce, dostane rovnou obsah ────────────────────── */
@media(prefers-reduced-motion:reduce){
  .uvod{display:none!important}
}