/* ============================================================================
   KONCEPT 3 — „OS"
   ----------------------------------------------------------------------------
   Dada, 14. 8. 2026: koncept 3 je kópiou konceptu 2, len úvod je bez fotky muža,
   vycentrovaný a v drobnostiach inak — ten istý svet, iný dych.

   Preto je tento hárok ZÁMERNE krátky. Stránka načíta `koncept-2.css` v plnom
   znení a tento súbor za ním pridáva len úvod. Kópia celého hárku by znamenala
   dve takmer rovnaké 50 kB stránky, ktoré sa pri prvej oprave rozídu — a nikto
   by si to nevšimol, lebo obe by naďalej vyzerali správne.

   Triedy majú predponu `chero` (centrovaný hero). Nie je to ozdoba: koncept 2
   má vlastné `.hero…` postavené na zarovnaní doľava a na ráme pre fotku, a keby
   sa mená prekrývali, museli by sme jeho pravidlá jedno po druhom prebíjať.
   `.kredo`, `.btn` a `.pill` sa naopak preberajú z dvojky ZÁMERNE — sú to tie
   isté prvky a majú vyzerať rovnako.

   V ČOM SA ÚVOD LÍŠI OD DVOJKY (a prečo to nie je len „to isté na stred"):
     · fotka je preč, plochu nesie jeden RYS — činka vo vlasovej linke cez celú
       šírku, ktorá sa pri načítaní obtiahne jedným ťahom;
     · meno klubu leží na osi činky, takže tyč prechádza za písmenami;
     · za menom horí mäkký nádych svetla, takže meno má odkiaľ vystúpiť;
     · adresu držia vlasové linky z OBOCH strán, nie jedna zľava;
     · čiara pod menom sa kreslí od STREDU na obe strany, nie zľava doprava.
   ========================================================================== */

/* ---------- PLOCHA ----------
   `min-height:100svh` a stĺpec: obsah rastie zhora, informačný pásik sedí na
   spodnej hrane okna — presne ako v koncepte 2, takže je celý vidieť hneď po
   otvorení. */
.chero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  background:var(--ink);color:var(--paper);overflow:hidden}

/* Aurora — dva mäkké nádychy svetla a jeden veľký priamo za menom. Tretí je
   ten, čo robí prácu fotky: dáva menu odkiaľ vystúpiť, aby nestálo na plochej
   čiernej. Sila je nízka, úvod má ostať tmavý. */
.chero__aurora{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(42% 32% at 50% 42%,rgba(0,161,227,.24),transparent 68%),
    radial-gradient(52% 40% at 12% 88%,rgba(0,161,227,.16),transparent 70%),
    radial-gradient(46% 34% at 88% 10%,rgba(79,107,255,.14),transparent 72%)}

/* ---------- ČINKA ----------
   Plochu úvodu nesie namiesto fotky jeden rys: činka cez celú šírku, nakreslená
   vlasovou linkou. Meno klubu leží presne na jej osi, takže tyč prechádza za
   písmenami — meno má čo dvíhať.

   Kreslená ako TECHNICKÝ OBRYS: bez výplne, bez tieňa, bez lesku. Rozdiel medzi
   „rysom" a „klipartom" je práve v tom — plná silueta činky by na tmavom
   rozhraní pôsobila ako nálepka.

   Predtým tu boli sústredné vodné kruhy (klub sa volá AQUA). Sadli menu, ale
   nie posilňovni (Dada, 14. 8. 2026), tak ustúpili náradiu.

   Šírka je viazaná na `--rail`, takže činka sedí na tej istej šírke ako obsah
   stránky. Maskou sa jej konce vytrácajú, aby nikde nekončila rezom. */
/* Obal okolo nadpisu je len ukotvenie pre činku — do rozloženia nezasahuje.
   `62.5 %` nie je odhad: nadpis má dva riadky a oba sú merané v `em`, takže
   stred spodného riadku („Aqua") leží vždy na tom istom zlomku výšky obalu —
   0,268 em (horný riadok aj s odstupom) + 0,4 em (polovica spodného) delené
   1,068 em. Držať sa tejto hodnoty znamená, že tyč prechádza za písmenami
   rovnako pri každej veľkosti aj na telefóne. */
.chero__meno{position:relative}
/* Nadpis musí mať vlastnú vrstvu, inak by ho absolútne umiestnená činka
   prekryla — pozicované prvky sa kreslia nad nepozicovanými. */
.chero__h1{position:relative;z-index:1}
.chero__cinka{position:absolute;left:50%;top:62.5%;z-index:0;pointer-events:none;
  width:min(calc(var(--rail) + 12rem),96vw);transform:translate(-50%,-50%);
  color:rgba(234,242,248,.16);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.chero__cinka svg{width:100%;height:auto;display:block;overflow:visible}
/* Kotúče sú tlmenejšie než tyč — tyč nesie os kompozície a má ju byť vidieť. */
.chero__cinka .p{opacity:.72}
.chero__cinka .p--3{opacity:.5}

/* Činka sa pri načítaní obtiahne jedným ťahom. `stroke-dasharray` beží na CSS
   animácii, NIE na `requestAnimationFrame`: rAF je v skrytej karte tvrdo
   škrtený, takže by sa kresba nikdy nedokončila a návštevník by našiel
   nedotiahnutý rys (chyba z buildu `take-it`).
   Dĺžky sú so slušnou rezervou nad skutočným obvodom každého tvaru — dash musí
   byť dlhší než dráha, inak sa na konci objaví druhý šev. */
@media (prefers-reduced-motion:no-preference){
  .js .chero__cinka .os{stroke-dasharray:800;stroke-dashoffset:800;
    animation:ryska 1.5s .25s cubic-bezier(.2,.7,.2,1) forwards}
  .js .chero__cinka .k{stroke-dasharray:160;stroke-dashoffset:160;
    animation:ryska 1s .75s cubic-bezier(.2,.7,.2,1) forwards}
  /* Obtiahnu sa v poradí, v akom sa nakladajú — od objímky von. */
  .js .chero__cinka .p--1{stroke-dasharray:540;stroke-dashoffset:540;
    animation:ryska 1.1s .9s cubic-bezier(.2,.7,.2,1) forwards}
  .js .chero__cinka .p--2{stroke-dasharray:440;stroke-dashoffset:440;
    animation:ryska 1.1s 1.05s cubic-bezier(.2,.7,.2,1) forwards}
  .js .chero__cinka .p--3{stroke-dasharray:320;stroke-dashoffset:320;
    animation:ryska 1.1s 1.2s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes ryska{to{stroke-dashoffset:0}}
}

.chero__grain{position:absolute;inset:0;z-index:3;opacity:.1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* ---------- OBSAH ----------
   Celý vertikálny rytmus je viazaný na `svh`, nie na rem — inak by úvod na
   nižšom okne prerástol a informačný pásik by spadol pod fold. To je to isté
   pravidlo, na ktorom stojí koncept 2; tu platí o to viac, že obsah je
   vycentrovaný a rastie na obe strany. */
.chero__in{position:relative;z-index:4;flex:1;width:var(--rail);margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding-block:calc(var(--nav-h) + clamp(.5rem,3svh,3.5rem)) clamp(1.2rem,2.6svh,2.5rem)}

/* Adresu držia vlasové linky z oboch strán — v koncepte 2 je jedna zľava.
   Na úzkom okne sa linky skryjú, inak by sa riadok lámal okolo nich. */
.chero__kick{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.7rem 1.2rem;font-size:clamp(.78rem,1.5vw,.92rem);letter-spacing:.01em;color:#CFDAE4;
  margin:0 0 clamp(.8rem,2.4svh,1.8rem);text-shadow:0 .1em .7em rgba(7,9,13,.9)}
.chero__kick i{display:block;width:2.4rem;height:1px;background:var(--aqua);font-style:normal}
@media (max-width:640px){.chero__kick i{display:none}}

/* Meno — jediné miesto na stránke s displejovým písmom, rovnako ako v dvojke.
   Veľkosť je obmedzená ŠÍRKOU aj VÝŠKOU okna: samotné vw je na nízkom okne
   (notebook 1280×720, mobil na šírku) to, čo úvod naťahuje pod fold. Strop je
   o kúsok nižší než v dvojke — vycentrovaný nadpis má nad sebou aj pod sebou
   obsah, kým v dvojke sedí obsah len pod ním. */
.chero__h1{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:900;
  text-transform:uppercase;margin:0;
  font-size:clamp(2.6rem,min(16vw,23svh),13rem);line-height:.8;letter-spacing:-.035em;
  text-shadow:0 .1em .8em rgba(7,9,13,.5)}
.chero__h1 .small{display:block;font-size:.145em;letter-spacing:.34em;color:#7FD8FA;
  margin-bottom:.85em;font-weight:700;text-shadow:0 .12em .8em rgba(7,9,13,.95)}
/* Riadok sa pri nábehu vysúva spod masky, čiže `overflow:hidden`. Pri
   `line-height:.8` je riadkový box NIŽŠÍ než samotné písmo, takže maska odreže
   všetko, čo trčí nad verzálky — dĺžne a mäkčene. Preto má riadok vypchávku
   hore aj dole a rovnako veľký záporný okraj: maska má na diakritiku miesto
   a rytmus riadkov sa nemení. (Tá istá pasca ako v koncepte 2.) */
.chero__h1 .ln{display:block;overflow:hidden;
  padding-top:.2em;margin-top:-.2em;
  padding-bottom:.14em;margin-bottom:-.14em}
.chero__h1 .ln > i{display:block;font-style:normal}

/* Čiara pod menom sa kreslí od STREDU na obe strany — v dvojke ide zľava
   doprava. Je to jediný pohyb, ktorý v tomto úvode ide inak, a drží os. */
/* Horný odstup musí byť väčší než dolný: `line-height:.8` reže riadkový box
   nadpisu tesne pod účaří, takže chvost „Q" trčí pod neho a pri rovnakých
   odstupoch sa oň čiara obtrela. */
.chero__ciara{width:min(22rem,60%);height:3px;background:var(--aqua);
  margin:clamp(1.5rem,3.8svh,2.8rem) 0 clamp(.7rem,2.2svh,1.5rem)}

.chero__kredo{justify-content:center}
.chero__kredo span{font-size:clamp(1.15rem,2.8vw,2.1rem);color:var(--paper)}
.chero__kredo .kredo__z{color:var(--glow)}

/* `text-wrap:balance` rozdelí riadky rovnomerne, takže pod vycentrovaným
   odsekom nezostane visieť osamotené slovo. Prehliadač, ktorý to nevie,
   zalomí ako doteraz — nič sa nerozbije. */
.chero__claim{max-width:44ch;color:#DCE5EE;font-size:clamp(.92rem,1.5vw,1.16rem);margin:0;
  text-wrap:balance}
.chero__claim b{color:var(--paper);font-weight:600}
.chero__ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:1rem;margin-top:clamp(1rem,3.2svh,2.2rem)}

/* Informačný pásik na spodnej hrane — obsah na stred, inak zhodný s dvojkou. */
.chero__bar{position:relative;z-index:4;border-top:1px solid var(--line);
  background:rgba(7,9,13,.72);backdrop-filter:blur(8px);color:var(--paper)}
.chero__bar .rail{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;
  justify-content:center;padding-block:clamp(.55rem,1.7svh,1rem);font-size:.85rem}

/* Kapsula stavu sa na telefóne presúva zo pásika do úvodu (robí to skript
   v `koncept-3.html`) a je posledná v stĺpcovom flexe — bez vlastného odstupu
   sa lepí na tlačidlá (Dada, 14. 8. 2026). Dvojka má to isté pravidlo, ale
   viazané na `.hero__in`, takže na koncept 3 nesadlo. */
@media (max-width:900px){
  .chero__in .pill{margin-top:clamp(1.2rem,3.2svh,2rem)}

  /* Pásik sa na telefóne zarovná DOĽAVA a rozpadne na riadky: hore otváracie
     hodiny, pod nimi hodnotenie. Vycentrovaný a zalomený pôsobil ako rozsypaný
     text, nie ako údaje. Bodkové oddeľovače idú preč — medzi riadkami nemajú
     čo oddeľovať a na konci riadka len viseli. */
  .chero__bar .rail{justify-content:flex-start;gap:.3rem 1.2rem;font-size:.82rem}
  .chero__bar .sep:not(#dnesText){display:none}
  .chero__bar #dnesText{flex-basis:100%}
}

/* ---------- NÁBEH ----------
   Meno sa vysúva spod masky riadok po riadku, ostatné doňho nabehnú. Všetko je
   viazané na triedu `.js`, ktorú pridáva skript v hlavičke — bez skriptu je
   úvod rovno v koncovom stave, nie prázdny. */
.js .chero__h1 .ln > i{transform:translateY(115%);
  animation:lnUp 1.05s cubic-bezier(.16,.84,.28,1) forwards}
.js .chero__h1 .ln:nth-child(1) > i{animation-delay:.12s}
.js .chero__h1 .ln:nth-child(2) > i{animation-delay:.26s}
/* Od stredu na obe strany — `scaleX` okolo stredu, nie rast šírky zľava. */
.js .chero__ciara{transform:scaleX(0);transform-origin:center;
  animation:ciaraOs 1.1s .38s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ciaraOs{to{transform:none}}
.js .chero__kredo,.js .chero__claim,.js .chero__ctas,.js .chero__kick{opacity:0;
  animation:fadeUp .9s .5s cubic-bezier(.2,.7,.2,1) forwards}
.js .chero__kick{animation-delay:.06s}
/* Kredo nabieha hneď po mene — je to jeho podnadpis, nie ďalší údaj v poradí. */
.js .chero__kredo{animation-delay:.42s}
.js .chero__ctas{animation-delay:.66s}
@media (prefers-reduced-motion:reduce){
  .js .chero__h1 .ln > i,.js .chero__ciara,.js .chero__kredo,
  .js .chero__claim,.js .chero__ctas,.js .chero__kick{
    animation:none;opacity:1;transform:none}
}

/* ---------- ÚZKE A NÍZKE OKNÁ ----------
   Zadanie z konceptu 2 platí aj tu: informačný pásik pod úvodom musí byť CELÝ
   vidno hneď po otvorení, na každej obrazovke. Poradie, v akom sa uvoľňuje
   miesto: najprv text nároku (je to najvyšší blok), potom mierka mena. */
/* Na telefóne dostane meno väčšiu mierku než by dalo 16vw: obsah je
   vycentrovaný, takže pod ním ostáva voľná plocha, ktorú vie meno využiť —
   a plagátový úder je to jediné, čo na úzkej obrazovke drží úvod pokope. */
/* Podmienka na VÝŠKU je tu nutná: na 320×568 už žiadna voľná plocha nie je
   a väčšie meno zhodilo informačný pásik 16 px pod fold. Zväčšuje sa teda len
   na telefóne, ktorý je aj dosť vysoký. */
@media (max-width:560px) and (min-height:640px){
  .chero__h1{font-size:min(19vw,23svh)}
}

@media (max-height:600px){
  .chero__claim{max-width:70ch;font-size:.86rem}
  .chero__kick{font-size:.7rem;margin-bottom:clamp(.5rem,1.5svh,1.1rem)}
  .chero__h1{font-size:clamp(2.4rem,min(16vw,19svh),9rem)}
  .chero__ctas{margin-top:clamp(.8rem,2.2svh,1.6rem)}
  /* Čiara má nad sebou zámerne veľký odstup (chvost „Q"), ale na nízkom okne je
     to práve tých pár desiatok pixelov, o ktoré pásik padal pod fold —
     na 320×568 presne 16. Tu sa teda vracia k rytmu dvojky. */
  .chero__ciara{margin-block:clamp(.7rem,2.2svh,1.6rem) clamp(.5rem,1.6svh,1.1rem)}
}
@media (max-height:560px){
  /* Pod 560 px výšky (notebook 1440×500, mobil na šírku) už nepomáha stláčanie:
     nárok ide preč a ostáva to podstatné — meno, kredo, tlačidlá a pásik.
     Meraná hranica, nie odhad: pri 1440×500 chýbalo presne 40 px a nárok je
     jediný blok, ktorý toľko zaberá. */
  .chero__claim{display:none}
  /* Odstup kapsuly od tlačidiel sa na nízkom okne sťahuje — pri plnej hodnote
     zhodil pásik 6 px pod fold na 900×420 (mobil na šírku). */
  .chero__in .pill{margin-top:clamp(.5rem,1.8svh,.9rem)}
  .chero__h1{font-size:clamp(2.2rem,min(16vw,18svh),7rem)}
  .chero__ciara{margin-block:.6rem .8rem}
  .chero__ctas{margin-top:.7rem}
}