/* ==========================================================================
   TimLuks – headline.css
   Hlavný nadpis hera: „Tvoríme WEBSTRÁNKY na mieru Pre Váš Biznis“ rozložený do stredu:
   „Tvoríme“ vľavo hore (vyčnieva z bloku), veľké WEBSTRÁNKY a pod ním „na mieru“ nad riadkom
   „Pre Váš Biznis“ napísaným vedľa seba – všetko okrem „Tvoríme“ v jednej osi v strede stránky.

   Animácia (spúšťa ju main.js pridaním triedy .is-ready na .hero):
   - biele slová (Tvoríme, WEBSTRÁNKY, Pre Váš): písmená sa objavujú po jednom
   - zelené písané slová (na mieru, Biznis): najprv sa zjaví zelený obdĺžnik a z neho sa
     smerom doprava odkrýva text
   Časovanie sa nastavuje v index.html (--base, --wd, --fd) – teraz je všetko 0s, takže všetky
   animácie (slová, zelené obdĺžniky aj tlačidlá) začnú naraz. Písmená sú z main.js (.ch).

   Bez JS alebo pri „znížený pohyb“ sa nadpis rovno zobrazí hotový.
   ========================================================================== */

/* Veľkosť slova WEBSTRÁNKY; ostatné riadky sa odvodzujú od nej. Zohľadňuje šírku aj výšku okna,
   aby sa nadpis s podnadpisom a tlačidlami zmestil na prvú obrazovku. Je na .hero (nie na .headline),
   aby ju poznala aj vizuálna scéna vpravo (xview.css), ktorá sa podľa nej zmestí do voľného miesta. */
.hero {
  --hl: clamp(2.3rem, min(10.4vw, 13.2vh), 9rem);
}

.headline {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: clamp(16px, 2.4vw, 32px) auto clamp(20px, 3vw, 36px);
  font-family: var(--font-headline);
  font-size: var(--hl);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-align: left;
  color: var(--ink);           /* sleduje tmavý/svetlý režim spolu so zvyškom hera */
  transition: color 0.4s var(--ease);
}

/* Nízke okno (napr. menší notebook): nadpis je o čosi menší, aby sa zmestil aj s tlačidlami. */
@media (max-height: 740px) and (min-width: 700px) {
  .hero { --hl: clamp(2.3rem, min(10vw, 12vh), 9rem); }
}

.hl {
  display: block;
}

/* --- rozloženie riadkov (percentá sa počítajú z šírky slova WEBSTRÁNKY) --- */

.hl--top {                 /* Tvoríme */
  font-size: 0.62em;
  line-height: 1.05;
  margin-left: -9%;
}

.hl--main {                /* WEBSTRÁNKY */
  letter-spacing: -0.01em;
}

/* Spodná časť je vycentrovaná pod slovom WEBSTRÁNKY (a teda aj v strede stránky): „na mieru“ (zelené písmo)
   je vycentrované nad riadkom „Pre Váš“ (biele) + „Biznis“ (zelené písmo), ktoré stoja vedľa seba
   na spoločnej základnej čiare. */
.hl--tail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  margin: -0.12em auto 0;
}

.hl--bottom {
  display: flex;
  align-items: baseline;
  gap: 0.24em;
  margin-top: -0.02em;
}

.hl--script1 {             /* na mieru */
  font-size: 0.66em;
}

.hl--pre {                 /* Pre Váš */
  font-size: 0.62em;
  line-height: 1.05;
}

.hl--script2 {             /* Biznis */
  font-size: 0.84em;
}

/* --- zelené písané slová --- */

.wipe {
  position: relative;
  width: fit-content;
  padding: 0.04em 0.2em 0.14em 0.1em;    /* rezerva pre kučery písma, aby ich obdĺžnik nerezal */
  font-family: var(--font-script);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--accent-text);
}

.wipe__text {
  display: block;
  text-shadow: 0 0 0.6em rgba(var(--accent-rgb), 0.28);   /* jemná žiara – v tmavom réžime dobre vynikne */
}
:root[data-theme="light"] .wipe__text { text-shadow: none; }   /* na svetlom pozadí by žiara pôsobila zašpinene */

/* Zelený obdĺžnik: v pokoji je skrytý (vpravo), počas animácie zaplní slovo a potom sa stiahne doprava. */
.wipe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  clip-path: inset(0 0 0 100%);
  pointer-events: none;
}

/* --- písmená bielych slov (rozdelené v main.js) --- */

.ch {
  display: inline-block;
  white-space: pre;
}

/* ==========================================================================
   Animácia
   ========================================================================== */

/* Kým JS nerozdelí písmená a nenačíta písma, nadpis nie je vidieť (aby nebliklo náhradné písmo).
   Ak by sa JS nespustil, po 3 s sa nadpis zobrazí hotový. */
.js .hero:not(.is-ready) .headline,
.js .hero:not(.is-ready) .fade {
  visibility: hidden;
  animation: hero-fallback-show 0s linear 3s forwards;
}
@keyframes hero-fallback-show { to { visibility: visible; } }

/* písmená bielych slov: každé sa objaví o kúsok po predchádzajúcom */
.hero.is-ready .ch {
  animation: ch-in 0.75s cubic-bezier(0.2, 0.9, 0.25, 1) both;
  animation-delay: calc(var(--base, 0s) + var(--i, 0) * 0.05s);
}
@keyframes ch-in {
  from { opacity: 0; transform: translateY(0.5em) rotate(7deg); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* zelené slová: obdĺžnik zaplní slovo (0–45 %), chvíľu stojí, text sa zjaví pod ním a obdĺžnik sa stiahne doprava */
.hero.is-ready .wipe::after {
  animation: wipe-block 1.05s cubic-bezier(0.65, 0, 0.35, 1) both;
  animation-delay: var(--wd, 0s);
}
@keyframes wipe-block {
  0%   { clip-path: inset(0 100% 0 0); }
  45%  { clip-path: inset(0 0 0 0); }
  55%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

/* Text sa zapne presne vtedy, keď je slovo zakryté obdĺžnikom (takmer okamžite; plynulý prechod namiesto
   skoku, lebo skok môže kvôli zaokrúhľovaniu času ostať na začiatku). */
.hero.is-ready .wipe__text {
  animation: wipe-text 0.04s linear both;
  animation-delay: calc(var(--wd, 0s) + 0.5s);
}
@keyframes wipe-text {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* zvyšok hera (podnadpis, popis, tlačidlá) sa jemne vysunie po nadpise */
.hero.is-ready .fade {
  animation: fade-up 0.9s var(--ease-out) both;
  animation-delay: var(--fd, 0s);
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}