/* ==========================================================================
   BioRelax — spoločné tokeny a pohybová vrstva
   Zdieľa všetkých 5 návrhov. Paletu si každý návrh prepíše vo vlastnom CSS.
   ========================================================================== */

/* Ručne písané stránky (sken, príbeh) nemajú reset z dumpu, takže na nich
   ostával defaultný 8 px okraj tela — celoplošné scény boli odsadené od
   kraja okna a po stranách presvitalo pozadie stránky. */
html, body { margin: 0; padding: 0; }
body { overflow-x: hidden; }

:root {
  /* Klinická zeleno-tyrkysová základňa (spoločná pre všetky návrhy) */
  --br-atrament: #0B2B2A;   /* text */
  --br-hlbka:    #06201F;   /* tmavé plochy */
  --br-papier:   #F4F9F8;   /* podklad */
  --br-krieda:   #FFFFFF;
  --br-akcent:   #0B6F68;   /* primárna akcia */
  --br-mata:     #4FC3B5;   /* zvýraznenie */
  --br-linka:    color-mix(in oklab, var(--br-atrament) 12%, transparent);
  /* 62 % davalo na svetlom podklade 4,26 : 1 — tesne pod normou. */
  --br-tlmene:   color-mix(in oklab, var(--br-atrament) 68%, transparent);

  /* Pohyb — jedno easing, jedna rytmika. Žiadny bounce, žiadny elastic. */
  --br-ease:     cubic-bezier(.16, 1, .3, 1);
  --br-ease-in:  cubic-bezier(.7, 0, .84, 0);
  --br-rychlo:   .22s;
  --br-stredne:  .45s;
  --br-pomaly:   .9s;

  /* Rytmus plochy */
  --br-okraj:    clamp(20px, 5vw, 72px);
  --br-sirka:    1320px;
  --br-sekcia:   clamp(72px, 11vw, 160px);
}

/* --------------------------------------------------------------------------
   Odhaľovanie pri scrole
   Pravidlo: hýbeme len transformom a priehľadnosťou. Nikdy nie výškou,
   šírkou ani paddingom — tie spúšťajú layout na každom snímku.
   -------------------------------------------------------------------------- */

[data-odhal] {
  opacity: 0;
  transform: translate3d(0, var(--br-posun, 22px), 0);
  transition:
    opacity var(--br-pomaly) var(--br-ease) var(--br-odklad, 0s),
    transform var(--br-pomaly) var(--br-ease) var(--br-odklad, 0s);
  will-change: opacity, transform;
}
[data-odhal="zlava"]  { transform: translate3d(-28px, 0, 0); }
[data-odhal="sprava"] { transform: translate3d(28px, 0, 0); }
[data-odhal="skala"]  { transform: scale(1.06); opacity: 0; }
[data-odhal].je-vonku {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Maskovaný riadok — text vyjde spod hrany, nie fadeom.
   Padding + záporný margin sú tu kvôli diakritike: bez nich sa ď, ž a ĺ
   orežú o hranu masky. */
.br-maska {
  display: block;
  overflow: hidden;
  padding: .14em 0 .26em;
  margin: -.14em 0 -.26em;
}
.br-maska > span {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1.05s var(--br-ease) var(--br-odklad, 0s);
  will-change: transform;
}
.br-maska.je-vonku > span { transform: none; will-change: auto; }

/* Odhaľovanie slovo po slove pri scrole (technika zo scroll-highlight webov):
   text je tlmený a rozsvecuje sa podľa pozície v okne. */
.br-slovo {
  color: color-mix(in oklab, currentColor 22%, transparent);
  transition: color .32s var(--br-ease);
}
.br-slovo.je-svetle { color: currentColor; }

/* --------------------------------------------------------------------------
   Mobilné menu

   Panel je v exporte fixný cez celú obrazovku a v inline štýle má
   display: flex, čiže otvorený. Zatvára ho až skript pri DOMContentLoaded,
   takže medzi vykreslením a spustením skriptu bolo na telefóne vidieť
   celé menu a až potom stránku. Zatvárame ho rovno tu; otvára ho trieda,
   ktorú pridáva assets/ui.js.
   -------------------------------------------------------------------------- */

[data-menu] { display: none !important; }
[data-menu].je-otvorene { display: flex !important; }

/* --------------------------------------------------------------------------
   Prístupnosť
   -------------------------------------------------------------------------- */

/* Prstenec musi byt vidiet na papieri aj na tmavej zeleni. Jedna farba to
   nezvladne: akcent ma na bielej 6,02 : 1, ale na tmavych plochach len 2,50
   az 2,83 : 1 — pod hranicou 3 : 1 pre obrys. Kreslime preto dva naraz,
   tmavy pri prvku a svetly za nim; jeden z nich vzdy kontrastuje. */
:where(a, button, [tabindex], input, select, textarea):focus-visible {
  outline: 2px solid var(--br-papier, #F4F9F8);
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--br-atrament, #0B2B2A);
  border-radius: 4px;
}

/* Export z Claude Design ma na kazdom poli inline `outline: none`. Inline
   styl prebije akekolvek pravidlo bez !important, takze bez tohto riadku
   nie je pri chodeni klavesnicou vidiet, kde clovek stoji. */
:is(input, select, textarea, button, a[href], [tabindex]):focus-visible {
  outline: 2px solid var(--br-papier, #F4F9F8) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 2px var(--br-atrament, #0B2B2A) !important;
}

/* Telefón a mail sa na mobile ťukajú prstom. Riadok textu má okolo 22 px,
   čo je polovica toho, čo treba. Meníme len výšku dotykovej plochy a len
   tam, kde sa naozaj ťuká — na myši ostáva layout nedotknutý. */
@media (pointer: coarse) {
  /* Polozky mobilneho menu. Riadok textu ma 34 px, treba 44. */
  [data-menu] a,
  [data-menu] button {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  a[href^="tel:"],
  a[href^="mailto:"],
  .br-tab,
  [data-tab],
  [data-volba] button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Kratke nazvy ako "Nitra" sa do 44 px sirky samy nedostanu. */
    min-width: 44px;
    min-height: 44px;
  }
  /* Hamburger mal 42 px. Dva pixle nikto nevidi, ale palec ano. */
  [data-menu-prepinac] {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Znacka v hlavicke je cesta domov — mala 24 px na vysku. */
  [data-hlavicka] > a:first-of-type {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Polia v exportoch nemaju vlastnu vysku, nesie ju az obalujuci <label>.
     Na mysi to nevadi, prstom sa clovek trafi do 26 px riadku horsie. */
  [data-objednavka] :is(input:not([type="checkbox"]), select, textarea) {
    min-height: 44px;
  }
}

.br-skryte-vizualne {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Preskočiť na obsah — prvá vec pod Tabom */
.br-preskoc {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  background: var(--br-atrament);
  color: #fff;
  border-radius: 999px;
  font: 600 14px/1 "Switzer", system-ui, sans-serif;
  transform: translateY(-160%);
  transition: transform var(--br-rychlo) var(--br-ease);
}
.br-preskoc:focus-visible { transform: none; }

/* --------------------------------------------------------------------------
   Obmedzený pohyb — nie vypnutý web, ale pokojný web.
   Všetko sa zobrazí naraz a natrvalo.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-odhal],
  .br-maska > span {
    opacity: 1 !important;
    transform: none !important;
  }
  .br-slovo { color: currentColor !important; }
  [data-parallax] { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Lenis
   -------------------------------------------------------------------------- */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
html.br-bez-scrollu, html.br-bez-scrollu body { overflow: hidden; }

/* --------------------------------------------------------------------------
   Hlavička
   -------------------------------------------------------------------------- */

[data-hlavicka] {
  transition:
    transform var(--br-stredne) var(--br-ease),
    background-color var(--br-stredne) var(--br-ease),
    box-shadow var(--br-stredne) var(--br-ease);
}
[data-hlavicka].je-schovana { transform: translate3d(0, -102%, 0); }

/* --------------------------------------------------------------------------
   Akordeón
   -------------------------------------------------------------------------- */

[data-otazka] + * {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--br-stredne) var(--br-ease);
  overflow: hidden;
}
[data-otazka] + * > * { min-height: 0; }
[data-otazka] + *:not(.je-otvorene) > * {
  opacity: 0;
  transition: opacity .2s var(--br-ease);
}
[data-otazka] + *.je-otvorene > * {
  opacity: 1;
  transition: opacity var(--br-stredne) var(--br-ease) .1s;
}

/* --------------------------------------------------------------------------
   Lupa (náhľad certifikátu / fotky)
   -------------------------------------------------------------------------- */

.br-lupa {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(16px, 5vw, 56px);
  background: color-mix(in oklab, var(--br-hlbka) 88%, transparent);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--br-stredne) var(--br-ease), visibility var(--br-stredne);
}
.br-lupa.je-otvorene { opacity: 1; visibility: visible; }
.br-lupa img {
  max-width: min(100%, 900px);
  max-height: 86vh;
  width: auto;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  transform: scale(.96);
  transition: transform var(--br-pomaly) var(--br-ease);
}
.br-lupa.je-otvorene img { transform: none; }
.br-lupa-x {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color var(--br-rychlo) var(--br-ease);
}
.br-lupa-x:hover { background: rgba(255, 255, 255, .14); }

/* --------------------------------------------------------------------------
   Prepínače
   -------------------------------------------------------------------------- */

[data-tab] { cursor: pointer; }

/* display: grid/flex v návrhu inak prebije natívne [hidden] a panel
   zostane na obrazovke aj keď je logicky zavretý. */
[hidden] { display: none !important; }

.br-tab {
  background: transparent;
  border: 0;
  color: var(--br-tlmene);
  font: inherit;
  transition:
    color var(--br-rychlo) var(--br-ease),
    background-color var(--br-rychlo) var(--br-ease),
    border-color var(--br-rychlo) var(--br-ease);
}
.br-tab:hover { color: var(--br-atrament); }

.br-tab--pilulka {
  border: 1px solid var(--br-linka);
  border-radius: 999px;
}
.br-tab--pilulka.je-aktivny {
  background: var(--br-atrament);
  border-color: var(--br-atrament);
  color: var(--br-krieda);
}

.br-tab--linka {
  border-bottom: 2px solid transparent;
  border-radius: 0;
}
.br-tab--linka.je-aktivny {
  border-bottom-color: var(--br-mata);
  color: var(--br-atrament);
}

/* --------------------------------------------------------------------------
   Čitateľnosť textu na fotke
   Tmavý závoj cez celý obrázok zabije fotku aj text. Namiesto neho
   rozostrieme len pás pod textom a necháme ho stratiť sa nahor —
   fotka ostane fotkou a písmo má pod sebou pokojnú plochu.
   -------------------------------------------------------------------------- */

.br-citatelne { position: relative; }
.br-citatelne::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14% calc(-50vw + 50%) -46%;
  pointer-events: none;
  backdrop-filter: blur(16px) saturate(.92);
  -webkit-backdrop-filter: blur(16px) saturate(.92);
  background: linear-gradient(
    to top,
    color-mix(in oklab, var(--br-papier) 76%, transparent) 0%,
    color-mix(in oklab, var(--br-papier) 34%, transparent) 52%,
    transparent 100%);
  /* Maska sa stráca na oboch koncoch — inak pás skončí rovnou hranou
     cez celú šírku a vyzerá to ako omylom nechaný obdĺžnik. */
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 20%, #000 46%, transparent 94%);
  mask-image: linear-gradient(to top, transparent 0%, #000 20%, #000 46%, transparent 94%);
}

/* Plus v akordeóne sa otočí na krížik. */
[data-ikona] { transition: transform var(--br-stredne) var(--br-ease); }
[data-otazka].je-otvorene [data-ikona] { transform: rotate(45deg); }

/* Magnetické tlačidlo sa vracia plynulo, ale ide za kurzorom okamžite. */
[data-magnet] { transition: transform .5s var(--br-ease); }
[data-magnet]:active { transition: transform .12s var(--br-ease); }

/* Uvedenie zdroja pod mapou — licencia OSM to vyžaduje, ale nemá to byť
   pás textu cez mapu ako v pôvodnom iframe. */
.br-zdroj {
  margin: clamp(18px, 2.4vw, 28px) 0 0;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--br-tlmene);
}

/* --------------------------------------------------------------------------
   Tmavý záver stránky
   Na konci stáli dve až tri zelené sekcie za sebou a každá mala vlastné
   pozadie — inú zeleň, iný radiálny gradient. Oko to nečíta ako zámer, ale
   ako niečo lepené po jednom. Odteraz je to jedna plocha s jednou atmosférou
   a sekcie od seba delí vlasová linka, nie zmena farby.
   -------------------------------------------------------------------------- */

.br-tma {
  position: relative;
  isolation: isolate;
  background: #0A2422;
  color: #ECF4F1;
}

/* Jedno svetlo na celý úsek, nie jedno na sekciu. */
.br-tma::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(130% 46% at 86% 0%, rgba(79, 195, 181, .17), transparent 60%),
    radial-gradient(100% 40% at 4% 100%, rgba(79, 195, 181, .07), transparent 64%);
}

/* Svetlá plocha vnútri tmavého úseku si musí vziať tmavý text späť.
   Bez tohto zdedí #ECF4F1 a text na bielej karte zmizne — presne to sa
   stalo nadpisu objednávkovej sekcie v Cinematicu (1,12 : 1 pri 62 px).
   Chytáme sa inline pozadí, lebo práve tie prichádzajú z exportu; prvok,
   ktorý si farbu textu nastavuje sám, zostáva nedotknutý. */
.br-tma [style*="background: rgb(255, 255, 255)"],
.br-tma [style*="background: #fff"],
.br-tma [style*="background: #FFF"],
.br-tma [style*="background: rgb(244, 249, 248)"],
.br-tma [style*="background: rgb(241, 247, 246)"],
.br-tma [style*="background-color: rgb(255, 255, 255)"] {
  color: var(--br-atrament, #0B2B2A);
}

/* Sekcie vnútri prestávajú byť samostatné plochy. */
.br-tma > section,
.br-tma > footer,
.br-tma > div {
  background: none !important;
}

/* Vlastné atmosféry jednotlivých komponentov vnútri sa vypínajú — svetlo má
   mať úsek jedno, nie jedno na sekciu. Presne to robilo ten dojem, že každá
   zelená plocha je od iného webu. */
.br-tma .ref::before {
  display: none;
}

/* Predel medzi nimi nie je čiara cez celú šírku — tá vyzerá ako spoj dvoch
   dosiek. Je to len náznak, ktorý sa na oboch koncoch stráca. */
.br-tma > * + * {
  background-image: linear-gradient(to right,
    transparent 0%,
    rgba(236, 244, 241, .13) 22%,
    rgba(236, 244, 241, .13) 78%,
    transparent 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 1px !important;
  background-position: 0 0 !important;
}

/* Prechod zo svetlej časti nie je hrana, ale nádych. */
.br-tma::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 160px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(236, 244, 241, .06), transparent);
}

/* --------------------------------------------------------------------------
   Paralaxa: východzia poloha patrí do CSS, nie do skriptu

   engine.js púšťa na médiách gsap.fromTo(el, { yPercent: -sila }, ...).
   Kým sa skript nespustí, obraz stojí na nule — a v okamihu, keď sa
   spustí, skočí o -sila percent hore. Pri hero fotke vysokej 936 px to
   bolo meraných 56 px: obraz sa objaví, a potom sa preskupí. Presne to
   vyzerá ako "načíta sa a preskočí".

   Tie isté východzie hodnoty preto zapisujeme dopredu sem. Skript potom
   nastaví to isté, čo už je vykreslené, a niet čoho skočiť. Platí len nad
   1024 px — pod tým paralaxa vôbec nebeží a obraz musí stáť na nule.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  [data-parallax] { transform: translate3d(0, -12%, 0); }   /* východzia sila */
  [data-parallax="5"] { transform: translate3d(0, -5%, 0); }
  [data-parallax="6"] { transform: translate3d(0, -6%, 0); }
  [data-parallax="10"] { transform: translate3d(0, -10%, 0); }
}

/* --------------------------------------------------------------------------
   Východzia poloha hero médií

   Réžia hero fotiek a videí začína na -6 % (gsap.fromTo / gsap.set v
   assets/cinematic.js a assets/podstranka.js). Kým sa skript nespustí,
   obraz stojí na nule a v okamihu spustenia skočí — meraných 54 px na
   Cinematicu. Vyzeralo to, akoby sa najprv ukázala fotka a potom sa
   všetko preskupilo.

   Východziu hodnotu zapisujeme dopredu sem, takže skript nastaví presne
   to, čo už je vykreslené. Platí len tam, kde réžia naozaj beží — nad
   1024 px a mimo obmedzeného pohybu.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  /* top, nie transform ani margin. Transform by si GSAP prečítal ako
     východzí bod a svojich -6 % k nemu pripočítal, takže obraz by skočil
     dvakrát. Percentuálny margin sa zase počíta zo šírky rodiča, nie
     z výšky — pri širokom okne to vyšlo o tridsať pixelov inak. Pri
     absolútne umiestnenom prvku sa top počíta presne z výšky, čiže z tej
     istej hodnoty, akú používa yPercent. Inline inset: 0 z exportu
     prebíjame. */
  #top > video,
  #top > img[data-hero],
  .ps-hero-obraz img { top: -6% !important; }
}