/* RubiCube — Dark Atelier · tokeny z brief-v2/design-tokens.json */

@font-face {
  font-family: "Inter Variable";
  src: url("../fonts/InterVariable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Jost len pre nápis značky v hlavičke (Jakub 2026-10-31: „luxury simple, clean a chrumkavé“, návrh 4) */
@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-latin.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --pozadie: #111315;
  --pozadie-okraj: #080A0B;
  --ambient: #26282A;
  --text: #F3F1ED;
  /* jedna sivá pre všetky malé texty (plán krok 3); vedlajsi ostáva ako alias */
  --text-tlmeny: #9A9CA0;
  --text-vedlajsi: var(--text-tlmeny);
  --linka: #34363A;
  --draha: #62656B;
  /* farby kocky (Jakub 2026-11-01, variant 4: ružová preč). Namerané z loga #0175C9, #46B436, #D61615;
     modrá a červená o kúsok svetlejšie, aby malý text na tmavom pozadí mal kontrast aspoň 4,5 : 1 */
  --kocka-modra: #1A86DD;
  --kocka-zelena: #46B436;
  --kocka-cervena: #F03A35;
  --akcent: var(--kocka-modra);   /* podstránky; na úvode ho mení sekcia (nižšie) */
  --vyska-hlavicky: 56px;
  /* jedna veľkosť pre všetky malé (sivé) texty: určuje ju „Jakub Vajda“ v hlavičke (Jakub 2026-10-30) */
  --pismo-male: 15px;
  /* názvy sekcií: nadpis v paneli aj položky navigácie rovnako veľké */
  --pismo-nazov: 24px;

  --okraj: clamp(40px, 4.5vw, 86px);
  /* Jakub 2026-10-31: rovnaký rytmus zhora aj zdola; spodný pás zrkadlí hlavičku, obsah začína a posúvadlo končí
     v rovnakej vzdialenosti od pásov */
  --vnutro: clamp(32px, 6vh, 64px);
  --max-sirka: 1800px;
  --pismo: "Inter Variable", Inter, "Helvetica Neue", Arial, sans-serif;

  --prechod-obsah: 190ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { height: 100%; }
body {
  min-height: 100svh;
  font-family: var(--pismo);
  font-weight: 400;
  color: var(--text);
  background-color: var(--pozadie);
  overflow-x: hidden;
}
/* základ pozadia vo fixnej vrstve, nie na body: gradient na body sa na dlhej podstránke opakoval
   každú výšku okna (Jakub 2026-11-01). Na úvode vyzerá rovnako ako predtým. */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 55% at 60% 46%, var(--ambient) 0%, rgba(38, 40, 42, 0) 68%),
    radial-gradient(ellipse 120% 90% at 50% 50%, var(--pozadie) 55%, var(--pozadie-okraj) 100%);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- hlavička ---------- */
.hlavicka {
  /* Jakub 2026-10-30: menšia, čistá hlavička s tenkou linkou; meno vľavo, značka presne v strede, kontakt vpravo */
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
  height: var(--vyska-hlavicky);
  padding: 0 var(--okraj);
  max-width: var(--max-sirka);
  margin: 0 auto;
  font-size: var(--pismo-male);
  font-weight: 400;
  line-height: 1.2;
}
.hlavicka::after {
  /* tenká deliaca linka cez celú šírku aj pri max-width */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  transform: translateX(-50%);
  border-bottom: 1px solid var(--linka);
  pointer-events: none;
}
.hlavicka a { transition: opacity 160ms ease; }
.hlavicka a:hover { opacity: 0.72; }
.hlavicka-meno { justify-self: start; color: var(--text-vedlajsi); white-space: nowrap; }
.hlavicka-znacka {
  justify-self: center;
  color: #fff;
  font-family: "Jost", var(--pismo, sans-serif);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  margin-right: -0.24em;   /* posledné písmeno nemá za sebou medzeru, nápis ostane v strede */
  white-space: nowrap;
}
.hlavicka-znacka-druha { color: #fff; font-weight: 300; margin-left: 0.3em; }   /* farby a pretáčanie: js/znacka.js */
.kocka-pismeno { display: inline-block; }
.hlavicka-kontakt { justify-self: end; color: var(--text-vedlajsi); cursor: default; white-space: nowrap; }
.hlavicka-kontakt[href] { cursor: pointer; }
.hlavicka-kontakt .sipka { color: var(--akcent); margin-left: 2px; }

/* ---------- plocha ---------- */
.plocha {
  position: relative;
  max-width: var(--max-sirka);
  margin: 0 auto;
  height: calc(100svh - var(--vyska-hlavicky));
  min-height: 560px;
  /* plátno 3D presahuje scénu o 14 %; bez orezania by vznikol posun stránky (desktop zvislo, iOS vodorovne) */
  overflow: hidden;
  overflow: clip;
}

/* ---------- pozadie: minimalistické detaily (Jakub 2026-10-30, plán krok 2) ----------
   tri tiché vrstvy: pomalé ružové svetlo, jemná mriežka okolo kocky, statické zrno.
   Hýbe sa len svetlo a len cez transform (lacné pre GPU); znížený pohyb ho zastaví. */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 60% 45%, color-mix(in srgb, var(--akcent) 7%, transparent) 0%, transparent 38%);
  animation: svetlo-pozadia 40s ease-in-out infinite alternate;
}
@keyframes svetlo-pozadia {
  from { transform: translate(-5%, -3%); }
  to { transform: translate(5%, 4%); }
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.plocha::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 48% 58% at 60% 45%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse 48% 58% at 60% 45%, #000 20%, transparent 72%);
}

/* ---------- scéna (poster / 3D) ---------- */
/* scéna v pásme medzi obsahom (38 %) a navigáciou vpravo (Jakub 2026-10-31: kocka nesmie prekrývať
   navigáciu ani logá): šírka max 52 %, inak voľné miesto / 0,86 (silueta zaberá ~84 % menšieho rozmeru),
   vycentrovaná v ňom. cqw = šírka .plochy, aby sa dal vypočítať aj presun do stredu v pohľade na kocku. */
.plocha {
  container-type: inline-size;
  --sirka-navigacie: calc(var(--okraj) + 220px);
  --volno: calc(62cqw - var(--sirka-navigacie) - 24px);
  --sirka-sceny: min(52cqw, calc(var(--volno) / 0.86));
  --lava-scena: calc(38cqw + 12px + (var(--volno) - var(--sirka-sceny)) / 2);
}
.scena {
  position: absolute;
  left: var(--lava-scena);
  top: 0;
  width: var(--sirka-sceny);
  /* kocka sa zmestí medzi hlavičku a posúvadlo (spodný pás + rovnaký odstup + riadok posúvadla) */
  height: calc(100% - var(--vyska-hlavicky) - var(--vnutro) - 36px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
  transition: transform 650ms cubic-bezier(0.22, 0.7, 0.2, 1);
}
/* „Späť na kocku“ (Jakub 2026-10-30): kocka sa presunie do stredu plochy a zväčší;
   späť do sekcie = oddialenie. Posun do vodorovného stredu plochy a mierne hore, nech spodok nezasahuje do posúvadla.
   3D zväčšuje kamera (ostrý obraz), poster zväčšuje CSS. */
body[data-state="object"] .scena { transform: translate(calc(50cqw - var(--lava-scena) - var(--sirka-sceny) / 2), -6%); }
body[data-mode="poster"][data-state="object"] .scena { transform: translate(calc(50cqw - var(--lava-scena) - var(--sirka-sceny) / 2), -6%) scale(1.15); }
.scena::after {
  /* mäkký tieň pod objektom */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 62%;
  height: 7%;
  /* --vznos (−1…1) nastavuje 3D pri nečinnom vznášaní: kocka hore = tieň menší a slabší */
  transform: translateX(-50%) scale(calc(1 - 0.05 * var(--vznos, 0)));
  opacity: calc(1 - 0.18 * var(--vznos, 0));
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(6px);
  z-index: -1;
}
.scena-poster {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
  transition: opacity 180ms ease;
}
.scena-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 180ms ease;
}
.scena-3d.tahatelne {
  /* .scena má pointer-events: none, plné 3D sa dá chytiť a otáčať;
     plátno presahuje scénu, aby sa natočená kocka neorezala */
  /* canvas je nahradený prvok, pri width: auto by sa neroztiahol podľa left/right */
  left: -14%;
  top: -14%;
  width: 128%;
  height: 128%;
  /* Tripo textúra je pri kalibrovanom svetle mdlá oproti kresbe */
  filter: contrast(1.12) saturate(1.18);
  pointer-events: auto;
  cursor: grab;
  touch-action: pan-y;
}
body[data-phase="dragging"] .scena-3d.tahatelne { cursor: grabbing; }

/* ---------- spojnica ---------- */
.spojnica {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
/* aj počas dotáčania po scrolle: inak sa na chvíľu ukáže čiara starej sekcie (Jakub 2026-10-31) */
body[data-phase="dragging"] .spojnica,
body[data-phase="settling"] .spojnica,
body[data-state="object"] .spojnica { opacity: 0; }
.spojnica { transition: opacity 150ms ease; }

/* ---------- obsahový panel ---------- */
.obsah {
  position: relative;
  z-index: 3;
  width: 38%;
  padding: 0 0 0 var(--okraj);
  opacity: 1;
  transform: none;
  transition: opacity var(--prechod-obsah) ease, transform var(--prechod-obsah) ease;
}
body[data-state="object"] .obsah {
  opacity: 0;
  pointer-events: none;
}
.obsah.menim {
  opacity: 0;
  transform: translateY(8px);
}

.spat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--vnutro);
  font-size: var(--pismo-male);
  line-height: 1.4;
  color: var(--text-tlmeny);
}
.spat:hover { color: var(--text); }
/* ikona lupy (Jakub 2026-10-31); výška 21 px ako pôvodný text, nech sedí línia s pravou navigáciou;
   väčšia plocha na ťuknutie cez padding so zápornými okrajmi */
.spat { height: 21px; padding: 10px; margin-left: -10px; margin-bottom: -10px; box-sizing: content-box; margin-top: calc(var(--vnutro) - 10px); }
.spat-ikona { width: 21px; height: 21px; transition: transform 180ms ease; }
.spat:hover .spat-ikona { transform: scale(1.08); }

.obsah-cislo {
  margin: 40px 0 0;
  font-size: var(--pismo-male);
  line-height: 1.4;
  color: var(--akcent);
}
.obsah-nazov {
  margin: 8px 0 0;
  font-size: var(--pismo-nazov);
  line-height: 1.2;
  font-weight: 400;
}
.obsah-telo { margin-top: 40px; }
.velke-riadky {
  margin: 0;
  font-size: clamp(48px, 5vw, 88px);   /* strop 88 px, nie „konské“ */
  line-height: 1.08;
  letter-spacing: -0.045em;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
}
.referencie-mriezka {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  --mierka: 1;
  /* Jakub 2026-10-30: bez mriežky (čiar) medzi logami, tesnejšie; logá budú pribúdať */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 8px;
  max-width: 560px;
}
.referencie-mriezka li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 84px;
  padding: 0 16px 0 0;
}
/* viac ako 12 lôg: štyri stĺpce a o kúsok menšie logá, nech sa zmestia nad posúvadlo */
.referencie-mriezka:has(li:nth-child(13)) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 640px;
  --mierka: 0.85;
}
.referencie-mriezka:has(li:nth-child(13)) li { height: 72px; }
/* úzke logo 1. Day by v stĺpci viselo vľavo, centruje sa všade (Jakub 2026-10-30) */
.referencie-mriezka li:has(img[src*="1day"]) { justify-content: center; }
.referencie-mriezka img {
  /* --logo-h nastaví vyrovnajLogo() v main.js podľa pomeru strán */
  height: calc(var(--logo-h, 28) * var(--mierka) * 1px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.referencie-mriezka img.biele {
  filter: brightness(0) invert(1);
}

.obsah-prazdne {
  margin: 8px 0 0;
  font-size: var(--pismo-male);
  line-height: 1.5;
  color: var(--text-tlmeny);
  max-width: 24em;
}

/* ---------- pravá navigácia ---------- */
.sekcie {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* prvá položka v jednej línii s číslom sekcie vľavo (Späť 21 px + odstup čísla 40 px) */
  padding-top: calc(var(--vnutro) + 61px);
  gap: clamp(64px, 10vh, 110px);
}
.sekcie-polozka {
  display: flex;
  align-items: center;
  text-align: left;
}
.sekcie-linka {
  width: 56px;
  transition: width 220ms ease, background-color 220ms ease;
  height: 1px;
  background: var(--draha);
  position: relative;
  margin-right: 18px;
  flex: none;
}
.sekcie-linka::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -2.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--draha);
}
.sekcie-text { padding-right: var(--okraj); }
.sekcie-cislo {
  display: block;
  font-size: var(--pismo-male);
  line-height: 1.4;
  color: var(--text-tlmeny);
}
.sekcie-nazov {
  display: block;
  font-size: var(--pismo-nazov);
  line-height: 1.25;
  color: var(--text);
}
.sekcie-polozka:hover .sekcie-nazov { color: #fff; }
/* každá sekcia má svoju stenu kocky: číslo, linka a bodka v jej farbe; aktívna sekcia určí akcent celej stránky */
body[data-state="services"], .sekcie-polozka[data-goto="services"], .hud-bod[data-id="services"] { --akcent: var(--kocka-modra); }
body[data-state="references"], .sekcie-polozka[data-goto="references"], .hud-bod[data-id="references"] { --akcent: var(--kocka-zelena); }
body[data-state="numbers"], .sekcie-polozka[data-goto="numbers"], .hud-bod[data-id="numbers"] { --akcent: var(--kocka-cervena); }
.sekcie-cislo { color: var(--akcent); }
.sekcie-polozka:not([aria-current="true"]) .sekcie-linka { background: var(--akcent); opacity: 0.55; }
/* aktívna sekcia ostáva v zozname (položky sa neposúvajú), zvýraznená dlhšou linkou */
.sekcie-polozka[aria-current="true"] .sekcie-linka,
.sekcie-polozka[aria-current="true"] .sekcie-linka::after { background: var(--akcent); }
.sekcie-polozka[aria-current="true"] .sekcie-linka { width: 80px; }
.sekcie-polozka:not([aria-current="true"]) .sekcie-nazov { color: var(--text-tlmeny); }
.sekcie-polozka:not([aria-current="true"]):hover .sekcie-nazov { color: var(--text); }
.sekcie-polozka:hover .sekcie-linka { width: 72px; }

/* ---------- spodné ovládanie ---------- */
.ovladac {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--vyska-hlavicky) + var(--vnutro));
  z-index: 3;
  /* Jakub 2026-10-31: dráha presne v strede stránky (pod nápisom v hlavičke), pokyn vľavo, počítadlo vpravo */
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px) 1fr;
  align-items: center;
  gap: 28px;
  padding: 0 var(--okraj);
}
.ovladac > .ovladac-pokyn { justify-self: end; }
.ovladac > .hud { justify-self: start; }
.ovladac-pokyn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--pismo-male);
  color: var(--text-tlmeny);
  white-space: nowrap;
}
.ovladac-ikona { display: inline-flex; width: 16px; height: 16px; }
.ovladac-ikona svg { width: 100%; height: 100%; }
.ovladac-draha {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 780px;
  height: 1px;
  background: var(--draha);
}
.ovladac-kruh {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--akcent);
}
body[data-mode="poster"] .ovladac-draha { opacity: 0.75; }
.ovladac-rozsah {
  /* natívny range je neviditeľný, vidno len dráhu a kruh; dotyková plocha 44 px */
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 44px;
  margin: 0;
  transform: translateY(-50%);
  opacity: 0;
  cursor: grab;
  touch-action: pan-y;
}
.ovladac-rozsah:active { cursor: grabbing; }
.ovladac-draha:focus-within .ovladac-kruh {
  outline: 2px solid var(--akcent);
  outline-offset: 4px;
}

/* ---------- kontakt, popisy, päta (plán krok 5) ---------- */
.len-citacka {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.riadok-popis {
  display: block;
  margin: 2px 0 16px;
  font-size: var(--pismo-male);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--text-tlmeny);
  animation: objav-logo 420ms ease both;
  animation-delay: calc(var(--i, 0) * 60ms + 200ms);
}
.riadok-popis:last-child { margin-bottom: 0; }
/* dlhý zoznam systémov sa zalomí vedľa kocky, nie pod ňu */
.riadok-popis { max-width: 470px; white-space: normal; }
/* odkazy na podstránky v zozname systémov: vzhľad ako text, pri myši biele a podčiarknuté */
.velke-riadky .riadok-popis a { color: inherit; text-decoration: none; transition: color 160ms ease; }
.velke-riadky .riadok-popis a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.obsah-cta[hidden] { display: none; }
.obsah-cta {
  position: relative;
  display: inline-block;
  margin-top: 40px;
  font-size: 18px;
  color: var(--text);
  padding-bottom: 4px;
}
.obsah-cta::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--akcent);
  transform-origin: left center;
  transition: transform 220ms ease;
}
.obsah-cta:hover::after { transform: scaleX(1.08); }
/* pri referenciách je mriežka lôg vysoká; výzva je v hlavičke aj v ostatných sekciách */
body[data-state="references"] .obsah-cta { display: none; }
.obsah-cta .sipka { display: inline-block; color: var(--akcent); transition: transform 180ms ease; }
.obsah-cta:hover .sipka,
.hlavicka-kontakt:hover .sipka { transform: translate(2px, -2px); }
.hlavicka-kontakt .sipka { display: inline-block; transition: transform 180ms ease; }
.paticka {
  position: absolute;
  left: var(--okraj);
  right: var(--okraj);
  bottom: 0;
  height: var(--vyska-hlavicky);   /* spodný pás, zrkadlo hlavičky: text v jeho strede */
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-size: 12px;            /* Jakub 2026-10-30: menšie a tmavšie, nech nepútajú pozornosť */
  color: #5E6166;
}
.paticka-odkazy { display: flex; gap: 20px; margin-left: auto; } /* firemné údaje z päty preč (Jakub 2026-10-30, súkromie) */
.paticka a:hover { color: var(--text-tlmeny); }
.paticka-odkazy { align-items: center; }
.paticka-linkedin { display: inline-flex; }   /* LinkedIn v päte, farba ako odkazy (Jakub 2026-10-31) */
.paticka-linkedin svg { width: 13px; height: 13px; }
/* odkazy na všetky služby vľavo v päte, rovnako nenápadné ako Podmienky (audit A01, A03, Jakub 2026-10-31);
   2026-11-01 zbalené pod „Služby“, zoznam sa otvorí nahor nad pätou */
.paticka-sluzby { position: relative; }
.paticka-sluzby summary { list-style: none; cursor: pointer; }
.paticka-sluzby summary::-webkit-details-marker { display: none; }
.paticka-sluzby summary:hover,
.paticka-sluzby[open] summary { color: var(--text-tlmeny); }
.paticka-sluzby nav {
  position: absolute;
  left: -14px;
  bottom: calc(100% + 12px);
  display: grid;
  gap: 8px;
  padding: 14px;
  white-space: nowrap;
  background: var(--pozadie);
  border: 1px solid var(--linka);
  border-radius: 10px;
}
.paticka-odkazy { flex: none; }   /* Podmienky a Ochrana údajov sa pri dlhom riadku služieb nezalomia */
/* viditeľný H1 pod „Stratégia / PPC / Externý CMO“, len v sekcii Čo robím (audit A01) */
.obsah-podtitul {
  margin: 28px 0 0;
  font-size: var(--pismo-male);
  line-height: 1.4;
  font-weight: 400;
  color: var(--text-tlmeny);
  animation: objav-logo 420ms ease both;
  animation-delay: 380ms;
}
body:not([data-state="services"]) .obsah-podtitul { display: none; }
/* odkaz pod mriežkou lôg na /referencie/ (audit 2026-10-31), malý ako popisy */
.obsah-viac {
  display: inline-block;
  margin-top: 18px;
  font-size: var(--pismo-male);
  color: var(--text-tlmeny);
  transition: color 160ms ease;
  animation: objav-logo 420ms ease both;
  animation-delay: 600ms;
}
.obsah-viac:hover { color: var(--text); }
.obsah-viac .sipka { display: inline-block; color: var(--akcent); transition: transform 180ms ease; }
.obsah-viac:hover .sipka { transform: translateX(2px); }

/* ---------- herný pocit (plán krok 4) ---------- */
/* odhalenie riadkov: text sa vysunie z masky, riadky s oneskorením 60 ms */
/* maska s rezervou hore (dĺžne, mäkčene) aj dole; záporný okraj drží pôvodnú výšku riadku */
/* riadky služieb sú odkazy na podstránky: vyzerajú rovnako, len pri prejdení myšou zružovejú */
.velke-riadky a { transition: color 160ms ease; }
.velke-riadky a:hover { color: var(--akcent); }
.velke-riadky .riadok { display: block; overflow: hidden; overflow: clip; padding: 0.12em 0 0.08em; margin: -0.12em 0 -0.08em; }
.velke-riadky .riadok > span {
  display: inline-block;
  animation: vysun-riadok 460ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes vysun-riadok {
  from { transform: translateY(105%); }
  to { transform: translateY(0); }
}
.referencie-mriezka li {
  animation: objav-logo 380ms ease both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes objav-logo {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
/* spojnica: bodka na logu vyskočí a pulzne, čiara sa nakreslí k textu, tam sa usadí druhá bodka
   (oneskorenia nastavuje main.js inline) */
.spojnica-bodka, .spojnica-pulz { transform-box: fill-box; transform-origin: center; }
.spojnica-bodka.objav { animation: objav-bodky 340ms cubic-bezier(0.3, 1.7, 0.5, 1) both; }
@keyframes objav-bodky {
  from { opacity: 0; transform: scale(0); }
  40% { opacity: 1; }
  to { opacity: 1; transform: scale(1); }
}
.spojnica-pulz { opacity: 0; }
.spojnica-pulz.bezi { animation: pulz-bodky 900ms ease-out 1 forwards; }
.spojnica { color: var(--akcent); }   /* čiara a bodky kreslia currentColor (main.js) */
.spojnica-iskra { filter: drop-shadow(0 0 4px currentColor); }
@keyframes pulz-bodky {
  from { opacity: 0.8; transform: scale(1); }
  to { opacity: 0; transform: scale(4); }
}

/* ---------- nestabilita lode (Jakub 2026-10-31, js/nestabilita.js) ----------
   kľukaté zatrasenie pozadia a kocky: ostré cik-cak výkyvy po priamkach (linear), každý menší,
   bez záblesku. Len samostatný `translate` (nebije sa s transformom scény), pevné prvky stoja. */
body[data-porucha="otras"] .scena { animation: otras-cikcak 560ms linear both; }
body[data-porucha="otras"] .plocha::before { animation: otras-cikcak-pozadie 560ms linear both; }
body[data-porucha="otras"] .spojnica { animation: otras-cikcak-jemne 560ms linear both; }
@keyframes otras-cikcak {
  0% { translate: 0 0; }
  7% { translate: 6px -4px; }
  15% { translate: -5px 3px; }
  24% { translate: 5px 2px; }
  33% { translate: -4px -3px; }
  44% { translate: 3px 2px; }
  56% { translate: -2px -1px; }
  70% { translate: 1px 1px; }
  100% { translate: 0 0; }
}
/* pozadie ide proti kocke: priestor sa zatrasie, nie len objekt */
@keyframes otras-cikcak-pozadie {
  0% { translate: 0 0; }
  7% { translate: -4px 3px; }
  15% { translate: 4px -2px; }
  24% { translate: -3px -2px; }
  33% { translate: 3px 2px; }
  44% { translate: -2px -1px; }
  56% { translate: 1px 1px; }
  100% { translate: 0 0; }
}
@keyframes otras-cikcak-jemne {
  0% { translate: 0 0; }
  7% { translate: 2px -1px; }
  15% { translate: -2px 1px; }
  24% { translate: 1.5px 0.6px; }
  33% { translate: -1px -0.6px; }
  56% { translate: 0.5px 0; }
  100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-porucha] .scena, body[data-porucha] .plocha::before, body[data-porucha] .spojnica { animation: none !important; }
}
/* rysky sekcií na posúvadle a číslo nad bodkou počas ťahania */
.ovladac-kruh { z-index: 1; pointer-events: none; } /* bodku chytá input pod ňou */
.ovladac-ryska {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 7px;
  background: var(--draha);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
body:not([data-mode="3d"]) .ovladac-ryska { display: none; }
.ovladac-kruh::after {
  content: attr(data-cislo);
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 4px);
  font-size: var(--pismo-male);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}
body[data-phase="dragging"] .ovladac-kruh::after { opacity: 1; transform: translate(-50%, 0); }
/* HUD: bodky postupu + číslo sekcie + nápoveda */
.hud {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--pismo-male);
  color: var(--text-tlmeny);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hud-body { display: flex; gap: 6px; }
.hud-bod {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--draha);
  transition: background-color 300ms ease, border-color 300ms ease, transform 300ms ease;
}
.hud-bod { border-color: var(--akcent); }
.hud-bod.videny { background: var(--draha); }
.hud-bod.aktivny { background: var(--akcent); border-color: var(--akcent); transform: scale(1.25); }
.hud-cislo { transition: opacity 200ms ease; }
.hud-cislo b { font-weight: 400; color: var(--text); }
body[data-state="object"] .hud-cislo { opacity: 0.35; }
.hud-pomoc {
  width: 24px;
  height: 24px;
  border: 1px solid var(--linka);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  color: var(--text-tlmeny);
  transition: border-color 160ms ease, color 160ms ease;
}
.hud-pomoc:hover, .hud-pomoc[aria-expanded="true"] { border-color: var(--akcent); color: var(--text); }
/* nápoveda klávesov */
.skratky {
  position: fixed;
  right: var(--okraj);
  bottom: calc(9.5% + 48px);
  z-index: 60;
  padding: 18px 22px;
  background: rgba(17, 19, 21, 0.92);
  border: 1px solid var(--linka);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: var(--pismo-male);
  animation: objav-logo 200ms ease both;
}
.skratky[hidden] { display: none; }
.skratky dl { display: grid; grid-template-columns: auto auto; gap: 10px 22px; margin: 0; }
.skratky dt { display: flex; gap: 4px; }
.skratky dd { margin: 0; color: var(--text-tlmeny); align-self: center; }
.skratky kbd {
  min-width: 22px;
  padding: 2px 6px;
  border: 1px solid var(--linka);
  border-radius: 5px;
  font: inherit;
  font-size: 13px;
  text-align: center;
  color: var(--text);
}
/* toast */
.toast {
  position: fixed;
  left: 50%;
  top: calc(var(--vyska-hlavicky) + 16px);
  z-index: 70;
  padding: 10px 16px;
  background: rgba(17, 19, 21, 0.94);
  border: 1px solid var(--linka);
  border-radius: 999px;
  font-size: var(--pismo-male);
  color: var(--text);
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translate(-50%, -8px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}
.toast.vidno { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: var(--akcent); }

/* ---------- úvodné načítavanie 3D ---------- */
.nacitavanie { display: none; }
html.nacitavam { overflow: hidden; }
html.nacitavam .nacitavanie,
.nacitavanie.odchadza {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 62% 55% at 50% 46%, var(--ambient) 0%, rgba(38, 40, 42, 0) 68%),
    var(--pozadie);
  transition: opacity 450ms ease;
}
.nacitavanie.odchadza { opacity: 0; pointer-events: none; }
.nacitavanie-obsah {
  width: min(360px, 72vw);
  text-align: center;
}
.nacitavanie-znacka {
  margin: 0 0 28px;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.nacitavanie-draha {
  position: relative;
  height: 2px;
  background: var(--linka);
  overflow: hidden;
}
.nacitavanie-plnenie {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: var(--akcent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms linear;
}
.nacitavanie-text {
  display: flex;
  justify-content: space-between;
  margin: 14px 0 0;
  font-size: var(--pismo-male);
  color: var(--text-tlmeny);
  font-variant-numeric: tabular-nums;
}

/* ---------- review režim (?review=1) ---------- */
body.review *, body.review *::before, body.review *::after {
  transition: none !important;
  animation: none !important;
}

/* ---------- obmedzený pohyb ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .scena-poster { transform: none !important; }
}

/* ---------- kompakt (768–1199 px alebo nízky desktop) ---------- */
@media (max-width: 1199px), (max-height: 820px) {
  .obsah-cislo { margin-top: 24px; }
  .obsah-telo { margin-top: 24px; }
  /* výška aj šírka: na nízkom notebooku sa musia zmestiť tri riadky s popismi */
  .velke-riadky { font-size: clamp(40px, min(5.4vw, 7.5vh), 76px); }
  .riadok-popis { margin-bottom: 8px; }
  .obsah-cta { margin-top: 24px; }
  /* tri položky navigácie: odsadenie podľa výšky (24 % by sa rátalo zo šírky) */
  .sekcie { padding-top: calc(var(--vnutro) + 45px); gap: clamp(40px, 7vh, 72px); }
}

/* ---------- mobil ---------- */
@media (max-width: 767px) {
  .toast { white-space: normal; width: max-content; text-align: center; border-radius: 16px; }
  .paticka {
    position: static;
    height: auto;
    order: 99;
    flex-direction: column;
    gap: 8px;
    margin: 40px 20px 0;
  }
  .paticka-sluzby nav { position: static; margin-top: 10px; padding: 0; border: 0; background: none; }
  .obsah-cta { margin-top: 28px; }
  .hud { display: none; }   /* na mobile je prehľad sekcií v navigácii pod kockou */
  .plocha::before {
    -webkit-mask-image: radial-gradient(ellipse 70% 30% at 50% 22%, #000 15%, transparent 70%);
    mask-image: radial-gradient(ellipse 70% 30% at 50% 22%, #000 15%, transparent 70%);
  }
  :root { --pismo-male: 14px; --pismo-nazov: 19px; }   /* tri položky hlavičky sa musia zmestiť do 375 px */
  body[data-state="object"] .scena,
  body[data-mode="poster"][data-state="object"] .scena { transform: none; }
  .hlavicka {
    position: sticky;
    top: 0;
    padding: 0 20px;
    gap: 12px;
    font-size: var(--pismo-male);
    background: var(--pozadie);
    z-index: 10;
  }
  .hlavicka-znacka { font-size: 11px; letter-spacing: 0.12em; margin-right: -0.12em; }

  .plocha {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .scena {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: clamp(260px, 38svh, 380px);
    order: 1;
    margin-top: 12px;
  }

  .sekcie {
    position: relative;
    right: auto;
    height: auto;
    order: 2;
    padding: 18px 20px 0;
    gap: 14px;
  }
  .sekcie-linka { display: none; }
  .sekcie-text { padding-right: 0; }
  .sekcie-polozka { gap: 10px; }
  .sekcie-cislo { display: inline; margin-right: 10px; font-size: var(--pismo-male); }
  .sekcie-nazov { display: inline; font-size: var(--pismo-nazov); }

  .obsah {
    order: 3;
    width: 100%;
    padding: 6px 20px 0;
  }
  .spat { margin-top: 8px; font-size: var(--pismo-male); }   /* 18 px mínus 10 px plochy na ťuknutie */
  .obsah-cislo { margin-top: 18px; font-size: var(--pismo-male); }
  .obsah-nazov { font-size: var(--pismo-nazov); }
  .obsah-telo { margin-top: 18px; }
  .velke-riadky {
    font-size: clamp(36px, 10.5vw, 52px);
    line-height: 1.12;
    letter-spacing: -0.04em;
    white-space: normal;
  }

  .ovladac { display: none; }
  body[data-mode="3d"] .ovladac {
    display: flex;
    position: relative;
    bottom: auto;
    order: 1;
    gap: 16px;
    padding: 6px 20px 0;
  }
  body[data-mode="3d"] .ovladac-pokyn { font-size: var(--pismo-male); }
  .spojnica { display: none; }

  .referencie-mriezka { --mierka: 0.72; }
  .referencie-mriezka li { height: 64px; padding: 0 10px 0 0; }
  /* od 13 lôg aj mobil 4 stĺpce, nech mriežka vyjde rovnako ako na desktope (Jakub: 16 = 4 × 4) */
  .referencie-mriezka:has(li:nth-child(13)) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 10px; --mierka: 0.6; }
  .referencie-mriezka:has(li:nth-child(13)) li { height: 56px; padding: 0; }
}

/* ---------- lišta súhlasu s cookies (js/suhlas.js, Jakub 2026-11-01) ---------- */
/* Odmietnuť a Súhlasím rovnako výrazné; odkaz Cookies v päte vyzerá ako ostatné odkazy päty */
.suhlas {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: min(580px, calc(100% - 32px));
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-tlmeny);
  background: var(--pozadie);
  border: 1px solid var(--linka);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.suhlas p { margin: 0; }
.suhlas a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.suhlas-tlacidla { display: flex; gap: 8px; flex: none; }
.suhlas button {
  font: inherit;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--draha);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
}
.suhlas button:hover, .suhlas button:focus-visible { border-color: var(--text); }
.paticka-cookies { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.paticka-cookies:hover { color: var(--text-tlmeny); }
@media (max-width: 560px) {
  .suhlas { flex-direction: column; align-items: stretch; gap: 12px; }
  .suhlas-tlacidla button { flex: 1; }
}