/* ═══════════════════════════════════════════════════════════
   LIŠTA — sprievodná lišta celého webu

   Pri scrollovaní nadol sa stiahne do svetelnej čiary a zmizne,
   pri návrate nahor sa premietne späť. Tlačidlo Menu otvára mapu
   celého webu. Skrývanie ide cez transform, opacity a clip-path —
   vlastnosti, ktoré prehliadač zvládne bez prekresľovania stránky.
   ═══════════════════════════════════════════════════════════ */

.lista {
  position: fixed; top: 0; left: 0; right: 0; margin: 0 auto;
  z-index: 100;
  width: min(1280px, calc(100% - 2rem));
  height: 58px;
  padding: 0 0.55rem 0 1.4rem;
  display: flex; align-items: center; gap: 1rem;
  background: rgba(9,9,13,0.94);
  border: 1px solid rgba(255,255,255,0.09);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.45);
  /* odkrytá lišta má orezanie mimo seba, aby tieň zostal celý */
  clip-path: inset(-2px -40px -80px -40px);
  transition: transform 0.5s cubic-bezier(0.7,0,0.2,1), opacity 0.35s ease,
              clip-path 0.5s cubic-bezier(0.7,0,0.2,1), scale 0.3s ease;
  transform-origin: 50% 0;
}
/* Pri scrollovaní nadol sa zloží do zvislej čiary v strede a zmizne.
   Podrží ju len fokus z klávesnice — po kliknutí myšou ostáva fokus
   na tlačidle Menu a lišta by sa potom už nikdy neskryla. */
.lista-skryta .lista:not(:has(:focus-visible)) {
  transform: translateY(-18px); opacity: 0; pointer-events: none;
  clip-path: inset(0 50% 0 50%);
}
/* hlbšie v stránke sa stiahne, nech zaberá menej */
/* Hlbšie v stránke sa jemne zmenší. Cez scale, nie šírku a výšku — zmena rozmerov
   by posúvala logo aj odkazy a prehliadač by to rátal ako posun rozloženia (CLS). */
.lista-hlboko .lista { scale: 0.95; }

/* riadkovanie hologramu a svietiaca hrana */
.lista::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(200,240,53,0.035) 0 1px, transparent 1px 3px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.lista-hrana, .lista-luc, .lista-postup { position: absolute; bottom: -1px; height: 1px; pointer-events: none; }
.lista-hrana { left: 22px; right: 22px; opacity: 0.45;
  background: linear-gradient(90deg, transparent, rgba(200,240,53,0.8) 25%, rgba(123,110,246,0.8) 75%, transparent); }
/* lúč, ktorý prebehne po hrane pri každom zjavení */
.lista-luc { left: 0; right: 0; height: 2px; opacity: 0; transform: scaleX(0);
  background: #fff; box-shadow: 0 0 10px 2px rgba(200,240,53,0.9), 0 0 40px 6px rgba(123,110,246,0.5); }
/* koľko stránky je prečítané — ide priamo so scrollom */
.lista-postup { left: 22px; right: 22px; display: none; transform-origin: left center;
  background: linear-gradient(90deg, var(--accent), var(--accent2)); box-shadow: 0 0 8px rgba(200,240,53,0.6); }

.lista .logo { position: relative; z-index: 1; flex: none; }

/* ── odkazy na široké obrazovky ── */
.lista-odkazy {
  position: relative;   /* ukazovateľ sa polohuje voči tomuto obalu */
  margin-left: auto;
}
.lista-odkazy ul { display: flex; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.lista-odkazy a {
  display: block; position: relative; z-index: 1;
  padding: 0.45rem 0.72rem;
  color: var(--muted); text-decoration: none;
  font-size: 0.86rem; font-weight: 500; letter-spacing: 0.02em;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.lista-odkazy a::after {
  content: ''; position: absolute; left: 0.72rem; right: 0.72rem; bottom: 0.2rem; height: 1px;
  background: var(--accent); box-shadow: 0 0 8px var(--accent);
  transform: scaleX(0); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.lista-odkazy a:hover { color: var(--text); text-shadow: 0 0 12px rgba(200,240,53,0.45); }
.lista-odkazy a:hover::after { transform: scaleX(1); }
.lista-odkazy a.lista-zvyraznene, .lista-odkazy a.akt, .lista-odkazy a[aria-current="page"] { color: var(--accent); }

/* posuvný ukazovateľ sekcie — polohu a šírku mu dáva skript pri zmene sekcie */
.lista-ukaz {
  position: absolute; left: 0; top: 0; height: 100%; pointer-events: none;
  transform: translateX(var(--x, 0px)); width: var(--w, 0px);
  border-radius: 999px;
  background: rgba(200,240,53,0.08);
  border: 1px solid rgba(200,240,53,0.38);
  box-shadow: inset 0 0 12px rgba(200,240,53,0.14), 0 0 16px rgba(200,240,53,0.12);
  transition: transform 0.42s cubic-bezier(0.16,1,0.3,1), width 0.42s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease;
}
html:not(.lista-ma-akt) .lista-ukaz { opacity: 0; }

/* ── tlačidlo menu ──
   Hranatý panel so zrezanými rohmi. Ikona je mriežka 3×3 svetelných
   bodov — pri otvorení zhasnú stredy hrán a zo zvyšných piatich je X.
   Orezanie by odrezalo vonkajší obrys aj žiaru, preto sú zameranie
   klávesnicou aj žiara vnútri tlačidla. */
.lista-menu-tl {
  --zrez: 9px;
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 0.7rem;
  height: 38px; padding: 0 0.95rem 0 0.85rem;
  border: 1px solid rgba(200,240,53,0.3);
  border-radius: 0;
  clip-path: polygon(var(--zrez) 0, 100% 0, 100% calc(100% - var(--zrez)), calc(100% - var(--zrez)) 100%, 0 100%, 0 var(--zrez));
  background:
    linear-gradient(100deg, transparent 35%, rgba(200,240,53,0.28) 50%, transparent 65%) -160% 0 / 70% 100% no-repeat,
    linear-gradient(180deg, rgba(200,240,53,0.08), rgba(200,240,53,0.02));
  color: var(--text); cursor: pointer;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  transition: border-color 0.25s, box-shadow 0.25s, background-position 0.7s cubic-bezier(0.16,1,0.3,1);
}
/* svetelné hrany na skosených rohoch */
.lista-menu-tl::before, .lista-menu-tl::after {
  content: ''; position: absolute; width: calc(var(--zrez) * 1.42); height: 1px;
  background: var(--accent); box-shadow: 0 0 6px var(--accent);
  transform-origin: left center; pointer-events: none;
}
.lista-menu-tl::before { left: 0; top: var(--zrez); transform: rotate(-45deg); }
.lista-menu-tl::after { left: calc(100% - var(--zrez)); bottom: 0; transform: rotate(-45deg); }
.lista-odkazy + .lista-menu-tl { margin-left: 0.35rem; }
.lista-menu-tl:hover {
  border-color: rgba(200,240,53,0.75);
  background-position: 260% 0, 0 0;
  box-shadow: inset 0 0 16px rgba(200,240,53,0.16);
}
.lista-menu-tl:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.lista-menu-text { min-width: 7.6ch; padding-left: 0.7rem; border-left: 1px solid rgba(200,240,53,0.3); line-height: 14px; text-align: left; }
.lista-ikona { order: -1; display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; }
.lista-ikona i { width: 4px; height: 4px; background: currentColor; opacity: 0.85;
  transition: transform 0.35s cubic-bezier(0.7,0,0.2,1), opacity 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; }
.lista-ikona i:nth-child(5) { background: var(--accent); box-shadow: 0 0 6px var(--accent); opacity: 1; }
/* otvorené: stredy hrán zhasnú, rohy a stred svietia ako X */
.lista-otvorene .lista-ikona i:nth-child(even) { transform: scale(0); opacity: 0; }
.lista-otvorene .lista-ikona i:nth-child(odd) { background: var(--accent); box-shadow: 0 0 6px var(--accent); opacity: 1; }
.lista-otvorene .lista-menu-tl { border-color: rgba(200,240,53,0.6); }

/* Osem odkazov sa do kapsuly vojde až od 1100 px — nižšie ostáva logo a menu */
@media (max-width: 1100px) {
  .lista-odkazy { display: none; }
  /* odkazy sú skryté, ale stále v DOM — selektor so súrodencom treba prebiť rovnakou silou */
  .lista-menu-tl, .lista-odkazy + .lista-menu-tl { margin-left: auto; }
}
@media (max-width: 640px) {
  .lista { width: calc(100% - 1rem); height: 56px; padding: 0 0.45rem 0 1.1rem; }
}
/* na úzkych telefónoch sa logo aj tlačidlo zmenšia, aby sa vošli vedľa seba */
@media (max-width: 430px) {
  .lista { gap: 0.6rem; padding-left: 0.95rem; }
  .lista .logo { font-size: 1.05rem; }
  .lista-menu-tl { gap: 0.55rem; padding: 0 0.7rem 0 0.65rem; letter-spacing: 0.14em; }
  .lista-menu-text { min-width: 0; padding-left: 0.55rem; }
}
/* najužšie telefóny: ostane len ikona, popis zostáva pre čítačky obrazovky */
@media (max-width: 359px) {
  .lista-menu-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ═══ MAPA WEBU ═══ */
/* kým je menu otvorené, stránka pod ním stojí; miesto po posuvníku ostáva,
   aby sa obsah do strany nepohol */
html.lista-otvorene { overflow: hidden; scrollbar-gutter: stable; }
.lista-menu {
  position: fixed; inset: 0; z-index: 99;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 100px 5vw 3rem;
  background:
    radial-gradient(90% 70% at 50% 0%, transparent 40%, rgba(3,3,6,0.92) 100%),
    linear-gradient(rgba(200,240,53,0.045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(200,240,53,0.045) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(70% 55% at 50% 0%, rgba(123,110,246,0.16), transparent 70%),
    radial-gradient(60% 50% at 85% 100%, rgba(200,240,53,0.07), transparent 70%),
    rgba(3,3,6,0.97);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.45s cubic-bezier(0.7,0,0.2,1), visibility 0s linear 0.45s;
}
.lista-otvorene .lista-menu {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.6s cubic-bezier(0.7,0,0.2,1), visibility 0s;
}
/* skenovacia čiara, ktorá menu premietne zhora nadol */
.lista-menu-luc { position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff 15%, #fff 85%, transparent);
  box-shadow: 0 0 14px 3px rgba(200,240,53,0.8), 0 0 70px 12px rgba(123,110,246,0.45); }

.lista-mapa {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: 2.8rem 2.6rem;
}
.lista-nazov {
  display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1.1rem;
  color: var(--accent);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
}
.lista-nazov::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(200,240,53,0.45), transparent); }
.lista-skupina ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.lista-skupina a {
  display: inline-block; padding: 0.32rem 0;
  color: var(--text); text-decoration: none;
  font-size: 1rem; line-height: 1.35;
  transition: color 0.2s, text-shadow 0.2s, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.lista-skupina a:hover { color: var(--accent); text-shadow: 0 0 14px rgba(200,240,53,0.5); transform: translateX(4px); }
.lista-skupina a[aria-current="page"] { color: var(--accent); }
.lista-skupina-hlavna a {
  font-family: var(--font-display); font-weight: 800; white-space: nowrap;
  font-size: clamp(1.6rem, 2.5vw, 2.3rem); letter-spacing: -0.02em; line-height: 1.12;
}
.lista-menu-kontakt {
  max-width: 1280px; margin: 3.2rem auto 0; padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem;
  font-size: 0.88rem; color: var(--muted);
}
.lista-menu-kontakt div { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; }
.lista-menu-kontakt a { color: var(--text); text-decoration: none; transition: color 0.2s, text-shadow 0.2s; }
.lista-menu-kontakt a:hover { color: var(--accent); text-shadow: 0 0 12px rgba(200,240,53,0.45); }
.lista-menu-kontakt small { color: var(--muted); font-size: 0.8rem; }
.lista-menu-kontakt .lista-pravne a { color: var(--muted); font-size: 0.8rem; }

@media (max-width: 960px) {
  .lista-mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 2rem; }
  .lista-skupina-hlavna { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .lista-menu { padding: 88px 6vw 2.5rem; }
  .lista-mapa { grid-template-columns: 1fr; gap: 2.2rem; }
  .lista-skupina-hlavna a { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .lista-menu-kontakt { flex-direction: column; margin-top: 2.4rem; }
}

/* ═══ POHYB ═══ */
@media (prefers-reduced-motion: no-preference) {
  /* pri zjavení prebehne po hrane lúč a odkazy sa rozsvietia jeden po druhom */
  .lista.lista-zjav .lista-luc { animation: listaLuc 0.95s cubic-bezier(0.7,0,0.2,1); }
  @keyframes listaLuc { 0% { transform: scaleX(0); opacity: 1 } 55% { transform: scaleX(1); opacity: 1 } 100% { transform: scaleX(1); opacity: 0 } }
  .lista.lista-zjav :is(.logo, .lista-odkazy li, .lista-menu-tl) { animation: listaBlik 0.7s steps(1, end) calc(var(--i, 0) * 45ms + 0.12s) backwards; }
  @keyframes listaBlik { 0% { opacity: 0 } 25% { opacity: .85 } 38% { opacity: .15 } 55% { opacity: 1; text-shadow: 0 0 14px rgba(200,240,53,.9) } 100% { opacity: 1 } }
  .lista .logo { --i: 0; }
  .lista-odkazy li:nth-child(1) { --i: 1; } .lista-odkazy li:nth-child(2) { --i: 2; } .lista-odkazy li:nth-child(3) { --i: 3; }
  .lista-odkazy li:nth-child(4) { --i: 4; } .lista-odkazy li:nth-child(5) { --i: 5; } .lista-odkazy li:nth-child(6) { --i: 6; }
  .lista-odkazy li:nth-child(7) { --i: 7; }
  .lista-menu-tl { --i: 8; }
  /* pri prejdení myšou body mriežky pulzujú jeden po druhom */
  .lista-menu-tl:hover .lista-ikona i { animation: listaBod 0.6s ease calc(var(--b, 0) * 45ms); }
  @keyframes listaBod { 40% { background: var(--accent); box-shadow: 0 0 8px var(--accent); opacity: 1 } }
  .lista-ikona i:nth-child(2), .lista-ikona i:nth-child(4) { --b: 1; }
  .lista-ikona i:nth-child(3), .lista-ikona i:nth-child(5), .lista-ikona i:nth-child(7) { --b: 2; }
  .lista-ikona i:nth-child(6), .lista-ikona i:nth-child(8) { --b: 3; }
  .lista-ikona i:nth-child(9) { --b: 4; }

  /* menu sa premietne zhora, položky sa rozsvietia v poradí */
  .lista-otvorene .lista-menu-luc { animation: listaSken 0.6s cubic-bezier(0.7,0,0.2,1); }
  @keyframes listaSken { 0% { transform: translateY(0); opacity: 1 } 90% { opacity: 1 } 100% { transform: translateY(100vh); opacity: 0 } }
  .lista-otvorene .lista-polozka { animation: listaPolozka 0.6s ease calc(0.24s + var(--p, 0) * 28ms) backwards; }
  @keyframes listaPolozka { 0% { opacity: 0; transform: translateY(10px) } 30% { opacity: .85 } 40% { opacity: .2 } 55% { opacity: 1; text-shadow: 0 0 16px rgba(200,240,53,.8) } 100% { opacity: 1; transform: none } }

  /* ukazovateľ prečítania ide priamo so scrollom */
  @supports (animation-timeline: scroll()) {
    .lista-postup { display: block; animation: listaPostup linear both; animation-timeline: scroll(root); }
    @keyframes listaPostup { from { transform: scaleX(0) } to { transform: scaleX(1) } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .lista, .lista-menu { transition: opacity 0.2s ease, visibility 0s; }
  .lista-skryta .lista:not(:has(:focus-visible)) { transform: none; clip-path: none; }
  .lista-menu, .lista-otvorene .lista-menu { clip-path: none; }
  .lista-menu { opacity: 0; }
  .lista-otvorene .lista-menu { opacity: 1; }
}