/* ============================================================
   UNOSTAR DANCE STUDIO — styles.css
   Statický web, žiadny build. Poradie: tokeny → základ →
   komponenty → sekcie → responzivita → reduced motion.
============================================================ */

/* ---------- FONTY (samohosťované) ----------
   Anton a Inter sú tu ako súbory, nie z fonts.googleapis.com.
   Cez CDN by IP každého návštevníka odišla Googlu ešte pred
   vykreslením stránky — bez opýtania a bez dôvodu. Rovnako to má
   aj Aromajoga. Stiahnuté sú len podmnožiny latin a latin-ext,
   slovenčina je celá v nich.

   >>> INTER JE VARIABILNÝ FONT — jeden súbor na podmnožinu, rozsah
       váh 400–600. Pôvodne tu bolo šesť tvárí Inter, ktoré ukazovali
       na súbory inter-400/500/600-*.woff2 — a tie boli bajtovo
       IDENTICKÉ (rovnaký md5). Bol to jeden a ten istý variabilný
       súbor uložený trikrát, takže prehliadač sťahoval tie isté bajty
       trikrát: 141 kB namiesto 47 kB pre latin a 166 kB namiesto
       83 kB pre latin-ext. Váhy fungovali len preto, že Chrome nastaví
       os `wght` podľa deklarovanej hodnoty.
       Rozsah `font-weight: 400 600` na jednej tvári kreslí úplne to
       isté — overené canvasom, rozdiel v pokrytí pixelov presne 0 pri
       400, 500 aj 600, pri latinke aj pri texte s diakritikou.
       Nepridávaj sem ďalšie tváre Inter na jednotlivé váhy.

   Anton naopak variabilný NIE JE (má len jednu hmotnosť), preto
   ostáva po jednej tvári na podmnožinu.

   Tri súbory, ktoré treba nad ohybom, sú v index.html predsťahované
   cez <link rel="preload"> — inak ich prehliadač objaví až po
   spracovaní tohto súboru a stránka medzitým bliká náhradným písmom.
------------------------------------------------------------ */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/anton-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/anton-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;   /* variabilná os wght — pozri poznámku vyššie */
  font-display: swap;
  src: url("fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------- DESIGN TOKENS ---------- */
:root {
  --bg:          #0d0d0f;
  --surface:     #15151a;
  --surface-2:   #1c1c22;

  --text:        #f2f2f5;
  /* --text-muted je zámerne takto svetlý: na #0d0d0f má kontrast
     ~7:1, čiže prejde AA aj pre malé písmo. Netmavi ho. */
  --text-muted:  #a6a6b2;

  --accent:      #1f6bff;
  --accent-hover:#4d8cff;
  --on-accent:   #ffffff;

  --border:      rgba(255, 255, 255, 0.10);
  --border-silny:rgba(255, 255, 255, 0.20);

  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-text:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rozostupy */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;

  --sirka: 1100px;
  --radius: 4px;
  --header-v: 68px;
}

/* ---------- ZÁKLAD ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* aby kotvy nekončili pod sticky hlavičkou */
  scroll-padding-top: var(--header-v);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, iframe { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
}

h1 { font-size: clamp(2.2rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); }
h3 { font-size: 1.15rem; letter-spacing: 0.02em; }

p { margin: 0 0 var(--s-2); }

.container {
  width: 100%;
  max-width: var(--sirka);
  margin-inline: auto;
  padding-inline: var(--s-3);
}

/* Malý veľký nadpis nad h2 */
.label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-hover);
  margin: 0 0 var(--s-1);
}

/* Vizuálne skryté, ale čitateľné pre čítačky obrazovky */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0.7rem 1.1rem;
  text-decoration: none;
}
.skip-link:focus { left: var(--s-2); top: var(--s-2); }

:where(a, button, iframe):focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 3px;
}

/* ---------- TLAČIDLÁ ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-text);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.75rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-hover); }

.btn-lg { padding: 1rem 2rem; font-size: 0.9rem; }

.link-arrow {
  display: inline-block;
  margin-top: var(--s-1);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--accent-hover);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { border-bottom-color: currentColor; }

/* ---------- HLAVIČKA ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-v);
  display: flex;
  align-items: center;
  background: rgba(13, 13, 15, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--text);
}
/* Logo je pečiatka s prstencom textu — pod ~36 px sa z prstenca
   stáva šum, preto vedľa neho ostáva aj textová značka. */
.brand img { width: 38px; height: 38px; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.nav a {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.nav a:hover { color: var(--text); }
.nav .nav-cta { color: var(--on-accent); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  padding: 10px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle span + span { margin-top: 5px; }

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  /* Presne zvyšok obrazovky pod hlavičkou. Predtým tu bol strop 820 px
     a na väčších monitoroch spod hero vykúkal pruh ďalšej sekcie.
     svh počíta výšku bez pruhov prehliadača na mobile; vh je poistka
     pre staršie prehliadače. */
  min-height: calc(100vh - var(--header-v));
  min-height: calc(100svh - var(--header-v));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #000;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Zrkadlenie: vo vygenerovanom zábere ide kužeľ svetla zľava, teda
     presne tam, kde sedí nadpis. Preklopením sa svetlo presunie do
     prázdnej pravej polovice a text ostane na tmavom podklade. */
  transform: scaleX(-1);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  /* Záber je sám o sebe tmavý, takže prekryv je len taký silný, aby
     text sadol — inak z videa nezostane nič a hero pôsobí ako čierna plocha. */
  background:
    linear-gradient(90deg, rgba(8, 8, 10, 0.88) 0%, rgba(8, 8, 10, 0.6) 45%, rgba(8, 8, 10, 0.1) 100%),
    linear-gradient(0deg, rgba(8, 8, 10, 0.7) 0%, rgba(8, 8, 10, 0) 40%);
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding-block: var(--s-6) var(--s-5);
}

.hero-inner h1 { margin-bottom: var(--s-3); }

.hero-text {
  max-width: 460px;
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: var(--s-4);
}

/* ---------- ŠÍPKA NADOL (celostránková) ---------- */
.sipka-dole {
  position: fixed;
  left: 50%;
  bottom: var(--s-3);
  transform: translateX(-50%);
  z-index: 40;
  width: 26px;
  height: 42px;
  border: 1px solid var(--border-silny);
  border-radius: 13px;
  background: rgba(13, 13, 15, 0.55);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: start center;
  padding-top: 8px;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.sipka-dole span {
  display: block;
  width: 3px; height: 7px;
  border-radius: 2px;
  background: var(--accent-hover);
  animation: kolieskoDole 1.8s ease-in-out infinite;
}
.sipka-dole.prec {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@keyframes kolieskoDole {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60%      { transform: translateY(12px); opacity: 0; }
}

/* ---------- SEKCIE ---------- */
.section { padding-block: var(--s-6); }
.section-alt { background: var(--surface); }

.section-head { max-width: 620px; margin-bottom: var(--s-4); }
.section-text { color: var(--text-muted); }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  align-items: center;
}

.grid-2 p { color: var(--text-muted); }

.media {
  position: relative;
  margin: 0;
}
.media > img:first-child,
.media-video {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* poster aj video majú rovnaké rámovanie, takže prechod medzi nimi
     nepodskočí — poster je vyrezaný z prvej snímky videa */
  background: #000;
}

/* Pečiatka z loga preložená cez roh fotky. Uhol jej nastavuje
   script.js podľa scrollu — stojí, kým sa nehýbeš. */
.peciatka {
  position: absolute;
  left: -26px;
  bottom: -26px;
  width: clamp(84px, 11vw, 124px);
  height: auto;
  opacity: 0.92;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.75));
  will-change: transform;
}

/* ---------- PONUKA: BENTO MOZAIKA ----------
   Dlaždice rôznych veľkostí namiesto šiestich rovnakých kariet. Text
   leží priamo na fotke pod gradientom, telo karty tu nie je vôbec.
   Rozloženie (rozpis dlaždíc je v komentári v index.html):
     dve hlavné = 2 stĺpce × 2 riadky vedľa seba v hornom páse,
     štyri drobné = 1×1 v jednom rade pod nimi.

   >>> Fotky NEMAJÚ `filter: brightness()`, hoci pôvodné karty ho mali.
       Stmavenie robí celé gradientový prekryv .dlazdica-tien. Je to tak
       lacnejšie: pri prejdení myšou sa hýbe iba `transform` fotky, čo
       rieši kompozítor, kým prechod filtra by fotku prekresľoval každú
       snímku. Ak sem pridáš filter, vráti sa to, čo sme vyhodili z
       reflektora — pozri poznámku pri .reflektor. */
.dlazdice {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: var(--s-2);
}

.dlazdica {
  position: relative;
  /* grid, nie block: telo je jediné dieťa v toku (fotka a gradient sú
     absolútne), takže sa samo natiahne na celú výšku dlaždice — aj tam,
     kde výšku určuje obsah, nie riadok mriežky. S `height: 100%` na tele
     by to na mobile nefungovalo, lebo rodič má len min-height. */
  display: grid;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #000;
  text-decoration: none;
  color: var(--text);
  /* dlaždica je odkaz, tak nech to aj tak vyzerá */
  transition: border-color 0.25s ease, transform 0.25s ease;
}
/* Dve hlavné vedľa seba: 2+2 stĺpce vyplnia horný pás celý, takže štyri
   drobné začnú samy až v treťom riadku. Netreba im preto nič nastavovať. */
.dlazdica--hlavna { grid-column: span 2; grid-row: span 2; }

.dlazdica:hover { border-color: var(--border-silny); transform: translateY(-2px); }
.dlazdica:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; }

.dlazdica-foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dlazdica:hover .dlazdica-foto { transform: scale(1.05); }

/* Gradient drží text čitateľný a zároveň stmavuje fotku. Zhora jemne,
   zdola silno — text sedí dole.
   >>> Tie štyri zastávky nie sú odhad. Pri miernejšom gradiente
       (0,30 → 0,45 → 0,88) padal kontrast nadpisov na najsvetlejších
       miestach fotky na 3,88 : 1 a popisov až na 2,57 : 1, čiže pod
       hranicu 4,5 : 1 pre malé písmo. Merané tak, že sa text skryl,
       odčítal sa najsvetlejší pixel podkladu presne v jeho ploche a
       z neho kontrast. Keď budeš hýbať týmito číslami, premeraj to
       znova — priemer plochy nestačí, rozhoduje najsvetlejší pixel,
       na ktorý môže padnúť ťah písmena. */
.dlazdica-tien {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 8, 10, 0.22) 0%,
    rgba(8, 8, 10, 0.40) 30%,
    rgba(8, 8, 10, 0.95) 62%,
    rgba(8, 8, 10, 0.99) 100%);
}
/* Prekryv sa pri prejdení myšou zámerne NEZOSVETĽUJE. Kedysi tu bolo
   `opacity: 0.88` a fotka pod ním ožila — lenže tým sa práve pod textom
   ubral podklad a kontrast spadol ešte nižšie než tie 3,88. Odozvu na
   myš nesie priblíženie fotky a nadzdvihnutie dlaždice. */

.dlazdica-telo {
  position: relative;   /* nad fotkou aj gradientom */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* text sedí dole, kde je gradient najtmavší */
  padding: var(--s-3);
  /* Tá istá poistka, akú má nadpis v hero (.hero-legible): fotka sa
     pri inej šírke oreže inak a pod textom sa môže zjaviť svetlejšie
     miesto, ktoré gradient sám neutlmí. Tieň to drží čitateľné bez
     toho, aby sa musela fotka stmaviť dočierna. */
  text-shadow: 0 1px 10px rgba(8, 8, 10, 0.7);
}

.dlazdica-cislo {
  margin: 0 0 auto;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
  color: var(--accent-hover);
}

.dlazdica h3 {
  margin: 0 0 0.35rem;
  /* drobné dlaždice majú menší nadpis než veľké */
  font-size: 1.05rem;
}
.dlazdica--hlavna h3 { font-size: clamp(1.3rem, 2.2vw, 1.8rem); }

.dlazdica-popis {
  margin: 0;
  max-width: 46ch;
  /* Svetlejšie než --text-muted (#a6a6b2), ktorý inde na webe leží na
     plochom tmavom podklade. Tu je pod textom fotka, takže tá istá farba
     mala na svetlejších miestach kontrast 2,57 : 1. Toto je kompromis:
     stále tichšie než nadpis, ale čitateľné aj na svetlej fotke. */
  color: #e2e2e8;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Šípka „ide sa na to" — dorazí až pri prejdení myšou, aby dlaždice
   v pokoji nevyzerali ako zoznam odkazov. */
.dlazdica-popis::after {
  content: " \2192";
  color: var(--accent-hover);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.dlazdica:hover .dlazdica-popis::after { opacity: 1; }

/* ---------- GALÉRIA AKO FILMOVÝ PÁS ---------- */
.pas-galerie { position: relative; }

.filmovy-pas {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* proximity, nie mandatory: mandatory po pustení tvrdo pricvakne na
     najbližšiu fotku a práve to bolo cítiť ako seknutie. Dojazd si
     riadi script.js sám. */
  scroll-snap-type: x proximity;
  /* Prvá fotka sadne na ľavú hranu obsahu, pás ale tečie až za okraj
     obrazovky — inak by to bola len mriežka v inom kabáte. */
  padding-inline: max(var(--s-3), (100vw - var(--sirka)) / 2);
  padding-block: 2px;
  scrollbar-width: none;
  cursor: grab;
}
.filmovy-pas::-webkit-scrollbar { display: none; }

/* Počas ťahania sa snap vypína, inak by pás pod rukou skákal. */
.filmovy-pas.taha { cursor: grabbing; scroll-snap-type: none; user-select: none; }

.filmovy-pas figure {
  flex: 0 0 clamp(220px, 30vw, 340px);
  margin: 0;
  scroll-snap-align: center;
}
.filmovy-pas img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  filter: brightness(0.88);
  transition: filter 0.3s ease;
}
.filmovy-pas figure:hover img { filter: brightness(1.06); }

/* Počas ťahania kurzor prebehne cez viacero fotiek a každá by
   rozbehla prechod filtra — zbytočné prekresľovanie práve vtedy,
   keď treba každú snímku. */
.filmovy-pas.taha img,
.filmovy-pas.taha figure:hover img { filter: brightness(0.88); transition: none; }
.filmovy-pas:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 4px; }

/* Drážka ukazuje, koľko pásu ešte ostáva. */
.pas-drazka {
  position: relative;
  height: 2px;
  width: min(var(--sirka), 100% - 2 * var(--s-3));
  margin: var(--s-3) auto 0;
  background: var(--border);
}
.pas-drazka span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  background: var(--accent);
  transition: width 0.15s linear, transform 0.15s linear;
}

/* ---------- REFLEKTOR NA KURZORE ---------- */
/* Fixný prekryv, ktorý presvetľuje to, nad čím stojí kurzor.
   z-index 5 = nad obsahom, ale pod hlavičkou (50), nech sa nezosvetľuje
   navigácia. pointer-events: none, aby nechytal kliky.

   >>> ŽIADNY mix-blend-mode. Mal tu byť `screen`, lenže blend cez celú
       plochu núti prehliadač pri každom prekreslení skladať celú stránku
       nanovo. Merané pri ťahaní galérie: s ním medián snímky 33 ms
       (~30 fps), bez neho 16,7 ms (stabilných 60). Na takto tmavom
       podklade vyzerá biela s nízkou priehľadnosťou skoro rovnako ako
       screen, takže sa nestratilo nič. Nevracaj to.

   >>> A ŽIADNY gradient viazaný na súradnice kurzora. Pôvodne tu bolo
       `at var(--mx) var(--my)` priamo na tomto fixnom prekryve — a keďže
       zmena stredu gradientu je zmena výplne, prehliadač pri každom
       hnutí myšou prekreslil celé okno vrátane všetkých fotiek pod ním.
       Odmerané trasovaním (40 pohybov myšou, okno 1440×900):
         s gradientom na kurzore : 191 paintov, 178 prekreslení obrázkov
         bez neho                :  17 paintov,   0 prekreslení obrázkov
       Pri ťahaní galérie 214 → 35 paintov. To bolo to seknutie.
       Riešenie je nižšie: gradient stojí na mieste v samostatnej vrstve
       a za kurzorom ju posúva iba transform, čo rieši kompozítor bez
       jediného prekreslenia. Nevracaj to na var(--mx)/var(--my). */
.reflektor {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.reflektor.svieti { opacity: 1; }

/* Samotné svetlo. Je väčšie než najväčší polomer krát dva (920 × 2),
   aby okraj kruhu nebolo nikdy vidieť, a záporný margin posadí jeho
   stred na bod 0,0 rodiča — transform potom udáva priamo polohu
   kurzora. Veľké polomery a viac zastávok vo výplni: jedna zastávka do
   transparent má takmer lineárny spád a je z nej vidieť okraj kruhu. */
.reflektor-svetlo {
  position: absolute;
  top: 0;
  left: 0;
  width: 1840px;
  height: 1840px;
  margin: -920px 0 0 -920px;
  background:
    radial-gradient(circle 460px at 50% 50%,
      rgba(255, 255, 255, 0.045) 0%,
      rgba(255, 255, 255, 0.028) 30%,
      rgba(255, 255, 255, 0.010) 58%,
      transparent 80%),
    radial-gradient(circle 920px at 50% 50%,
      rgba(31, 107, 255, 0.050) 0%,
      rgba(31, 107, 255, 0.026) 42%,
      rgba(31, 107, 255, 0.008) 68%,
      transparent 85%);
}
/* Vlastnú vrstvu si vyžiadame až keď reflektor naozaj beží — triedu
   pridáva script.js len pri myši a mimo prefers-reduced-motion. Na
   dotykovom zariadení tak vrstva nevznikne a pamäť neujde nazmar. */
.reflektor.zapnuty .reflektor-svetlo { will-change: transform; }

/* ---------- BEŽIACI PÁS TEXTU ---------- */
.bezec {
  display: flex;
  overflow: hidden;
  padding-block: 0.85rem;
  background: var(--bg);
  border-block: 1px solid var(--border);
  user-select: none;
}
.bezec-stopa {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s-4);
  padding-right: var(--s-4);
  /* Čas nastavuje script.js podľa reálnej šírky stopy, aby text išiel
     stále rovnako rýchlo — pevných 30 s by pri dlhšej stope znamenalo,
     že preletí trikrát rýchlejšie. Hodnota tu je len záloha bez JS. */
  animation: bezi var(--bezec-cas, 30s) linear infinite;
}
/* Dve stopy vedľa seba: kým prvá odíde o vlastnú šírku, druhá je
   presne na jej mieste, takže sa nikde neotvorí diera.

   >>> PODMIENKA: jedna stopa musí byť ASPOŇ taká široká ako okno. Ak je
       užšia, druhá stopa jej v cieli nesiaha až po pravý okraj a v páse
       sa otvorí prázdne miesto — presne to sa dialo na širokých
       monitoroch. Dopĺňanie slov do stopy rieši script.js. */
@keyframes bezi { to { transform: translateX(-100%); } }

/* >>> Pás sa pri prejdení myšou ZÁMERNE NEZASTAVUJE. Pauza na :hover tu
       bola a pôsobila ako seknutie — kurzor cestou po stránke pás len
       preletí a ten zamrzne a zas sa rozbehne bez toho, aby o to niekto
       stál. Nevracaj to. */

/* Triedu .stoji pridáva script.js, keď je pás mimo obrazovky — nemá
   sa čo točiť, keď naň nikto nevidí. */
.bezec.stoji .bezec-stopa { animation-play-state: paused; }

.bezec span {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.2vw, 2.2rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text);
}
/* Striedanie plné / obrysové ako na plagáte. Obrys len tam, kde ho
   prehliadač vie — bez tejto poistky by text zmizol. */
@supports (-webkit-text-stroke: 1px currentColor) {
  .bezec span:nth-child(even) {
    color: transparent;
    -webkit-text-stroke: 1px var(--border-silny);
  }
}

/* ---------- PÁS S ČÍSLAMI ---------- */
.pas {
  position: relative;
  overflow: hidden;
  background: #000;
}
.pas-obrazok {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.pas-overlay {
  position: absolute;
  inset: 0;
  /* Prekryv drží čísla čitateľné, ale fotka pod ním musí ostať vidieť —
     pri 0.82/0.9 z nej nezostalo nič a pás pôsobil ako čierny prúžok. */
  background: linear-gradient(180deg, rgba(8, 8, 10, 0.62), rgba(8, 8, 10, 0.78));
}
.pas-inner {
  position: relative;
  z-index: 1;
  padding-block: var(--s-5);
}

.cisla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3);
  margin: 0;
  text-align: center;
}
.cisla dt {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--text);
}
.cisla dd {
  margin: var(--s-1) 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- FORMULÁR ---------- */
.formular { display: grid; gap: var(--s-2); }

.pole { display: grid; gap: 0.35rem; }

.pole label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nepovinne {
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  opacity: 0.7;
}

.pole input,
.pole select,
.pole textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.pole textarea { resize: vertical; min-height: 110px; }

/* Šípku selectu si kreslíme sami — natívna je v tmavom poli biela škvrna. */
.pole select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 12px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
.pole option { background: var(--surface); color: var(--text); }

.pole input:focus,
.pole select:focus,
.pole textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-2);
}

/* Červený rám až po pokuse o odoslanie, nie počas písania. */
.pole [aria-invalid="true"] { border-color: #ff6b6b; }

.chyba {
  margin: 0;
  min-height: 1.1em;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #ff8b8b;
}
.chyba:empty { min-height: 0; }

/* Honeypot: skrytý tak, aby ho robot v DOM našiel, ale človek nikdy.
   display:none niektoré roboty preskakujú, preto radšej odsun z plochy. */
.pole-pasca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.pole-suhlas { gap: 0.3rem; }
.suhlas {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  /* dedený štýl labelu je verzálkový mikrotext, tu chceme vetu */
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--text-muted);
}
.suhlas input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.18em;
  accent-color: var(--accent);
}

.formular button[type="submit"] { justify-self: start; }
.formular button[disabled] { opacity: 0.55; cursor: progress; }

.formular-stav {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.92rem;
  line-height: 1.5;
}
.formular-stav.uspech { color: #7ee0a8; }
.formular-stav.zlyhalo { color: #ff8b8b; }

.radsej-zavolat { font-size: 0.92rem; color: var(--text-muted); }
.radsej-zavolat a { color: var(--accent-hover); }

/* ---------- KONTAKT ---------- */
/* Formulár je vysoký, údaje nízke — pri zarovnaní na stred by údaje
   plávali kdesi uprostred vedľa neho. */
#kontakt .grid-2 { align-items: start; }

.kontakt-udaje dl {
  margin: 0 0 var(--s-3);
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.55rem var(--s-3);
  align-items: baseline;
}
.kontakt-udaje dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.kontakt-udaje dd { margin: 0; }
.kontakt-udaje dd a {
  text-decoration: none;
  border-bottom: 1px solid var(--border-silny);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.kontakt-udaje dd a:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }

.socialne {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.socialne a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.socialne a:hover { color: var(--accent-hover); }

.mapa {
  margin-top: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  /* iframe od Googlu nemá vlastnú výšku, musíme ju dať my */
  min-height: 340px;
}
.mapa iframe {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
  /* mapa je defaultne biela a v tmavom webe bije do očí */
  filter: invert(0.92) hue-rotate(180deg) saturate(0.7);
}

/* ---------- PÄTIČKA ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--s-3);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1);
}
.site-footer p {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.footer-znacka {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.footer-znacka img { width: 30px; height: 30px; opacity: 0.75; }

/* ---------- PRÁVNA STRÁNKA ---------- */
.pravne {
  max-width: 780px;
  margin-inline: auto;
  padding: var(--s-5) var(--s-3) var(--s-6);
}
.pravne h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin-bottom: var(--s-3); }
.pravne h2 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); margin: var(--s-4) 0 var(--s-1); }
.pravne p, .pravne li { color: var(--text-muted); }
.pravne li { margin-bottom: 0.3rem; }
.pravne a { color: var(--accent-hover); }
.pravne-spat { margin-top: 0; }
.pravne-datum { margin-top: var(--s-4); font-size: 0.85rem; }

.pravne-ramik {
  margin: var(--s-2) 0;
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
}
.pravne-ramik p { margin: 0 0 0.2rem; }
.pravne-ramik p:last-child { margin-bottom: 0; }

/* Tabuľka sa na mobile nezalomí čitateľne, radšej nech sa posúva. */
.pravne-tabulka-obal { overflow-x: auto; margin: var(--s-2) 0; }
.pravne-tabulka { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 0.88rem; }
.pravne-tabulka th {
  text-align: left;
  padding: 0 0.7rem 0.6rem 0;
  border-bottom: 1px solid var(--border-silny);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}
.pravne-tabulka td {
  padding: 0.7rem 0.7rem 0.7rem 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--text-muted);
}

.footer-odkazy a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; }
.footer-odkazy a:hover { color: var(--accent-hover); }

/* ---------- ODHALENIE PRI SCROLLE ---------- */
/* Východiskovo viditeľné. Skryje ich až script.js triedou
   .js-reveal — bez JS teda ostane obsah čitateľný.

   Bloky idú len na priehľadnosť, bez posunu zdola. Pohyb nesú
   nadpisy (nižšie) — dva súbežné pohyby sa navzájom rozmazávali. */
.js-reveal .reveal { opacity: 0; }
.js-reveal .reveal.in-view { opacity: 1; transition: opacity 0.5s ease; }

/* ---------- NADPISY PO SLOVÁCH ---------- */
/* Slová sa vysunú zdola spoza vlastného riadku, ostro a s odstupom —
   nie plynulý fade, ktorý má každá druhá stránka. Rozdelenie na slová
   robí script.js; bez neho sa nadpis vykreslí normálne. */
.slovo {
  display: inline-block;
  overflow: hidden;
  /* bez tohto by orez zjedol diakritiku a dotiahnutia písmen */
  padding: 0.1em 0.04em 0.12em;
  margin: -0.1em -0.04em -0.12em;
}
.slovo > span { display: inline-block; }

.js-reveal .reveal-slova .slovo > span { transform: translateY(115%); }
.js-reveal .reveal-slova.in-view .slovo > span {
  transform: none;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- RESPONZIVITA ---------- */
@media (max-width: 860px) {
  .grid-2 { grid-template-columns: 1fr; gap: var(--s-4); }
  .media img { aspect-ratio: 3 / 2; }

  /* Mozaika na dva stĺpce: hlavné dlaždice pod sebou cez celú šírku,
     drobné po dvoch vedľa seba. Vedľa seba by sa hlavné na tablete
     nezmestili — vyšli by na ~330 px a stratili by prevahu nad drobnými.

     >>> Hlavná dlaždica musí byť vyššia cez `grid-row: span 2`, NIE cez
         min-height. S `min-height: 260px` v riadku vysokom 190 px
         dlaždica pretekala do ďalšieho riadku a nasledujúce dlaždice
         jej prekryli popis — v mriežke sa prekryv nezalomí, len sa
         nakreslí navrch. Odhalilo to meranie kontrastu: pod textom
         nebola vlastná fotka, ale fotka susednej dlaždice. */
  .dlazdice { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .dlazdica--hlavna { grid-column: 1 / -1; grid-row: span 2; }
}

@media (max-width: 560px) {
  /* Na telefóne jeden stĺpec — dvojica drobných dlaždíc vedľa seba je
     už taká úzka, že sa do nej nadpis nezmestí na jeden riadok. */
  .dlazdice { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .dlazdica { min-height: 200px; }
  .dlazdica--hlavna { min-height: 280px; }
}

@media (max-width: 768px) {
  :root { --s-6: 4rem; --s-5: 3rem; }

  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: var(--header-v) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-2) var(--s-3) var(--s-3);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    /* zatvorené menu nesmie chytať klik ani tab */
    transform: translateY(-120%);
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0.28s;
  }
  .nav.otvorene { transform: translateY(0); visibility: visible; }

  .nav a {
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
  }
  .nav .nav-cta {
    margin-top: var(--s-2);
    text-align: center;
    border-bottom: none;
  }

  .hero { min-height: 88vh; }
  .hero-text { font-size: 1rem; }
  .btn-lg { width: 100%; text-align: center; }

  .kontakt-udaje dl { grid-template-columns: 1fr; gap: 0.2rem; }
  .kontakt-udaje dt { margin-top: var(--s-1); }
}

/* ---------- MENEJ POHYBU ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* obsah musí zostať viditeľný, aj keď JS nedobehne animácie */
  .js-reveal .reveal { opacity: 1; transform: none; }
  .js-reveal .reveal-slova .slovo > span { transform: none; }
  .sipka-dole span { animation: none; }
  /* bežiaci pás a reflektor sú čistý pohyb — pri tomto nastavení
     nemajú čo robiť na stránke */
  .bezec-stopa { animation: none; }
  .reflektor { display: none; }
}