/* ==================================================================
   3D ekosystém v hero úvodnej stránky (src/klient/ekosystem.js).

   Vrstva `.eko` leží v hero na mieste znaku z častíc: nad fotkou hmloviny
   a aurorou, pod textom. Text hero má `pointer-events: none` (okrem odkazov
   a tlačidiel), takže ťahanie myšou aj prstom ide rovno do plátna.
   Kým three.js nedobehne, plátno je priehľadné a hero vyzerá ako doteraz;
   bez WebGL (`html.eko-nogl`) sa vráti znak z častíc.
   ================================================================== */

.eko {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.eko__platno {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  cursor: grab;
  /* Zvislý posun prstom ostáva stránke, vodorovný otáča scénu. */
  touch-action: pan-y;
  transition: opacity 1.2s var(--ease);
}
.eko-gl .eko__platno { opacity: 1; }
.eko.je-tahane .eko__platno { cursor: grabbing; }

/* Text vľavo musí ostať čitateľný aj nad svietiacou scénou. */
.eko::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 10, 16, 0.92) 0%, rgba(7, 10, 16, 0.7) 30%, rgba(7, 10, 16, 0) 58%),
    linear-gradient(0deg, rgba(7, 10, 16, 0.85) 0%, rgba(7, 10, 16, 0) 26%);
}
@media (max-width: 899px) {
  .eko::after {
    background: linear-gradient(0deg, rgba(7, 10, 16, 0.96) 0%, rgba(7, 10, 16, 0.82) 48%, rgba(7, 10, 16, 0) 72%);
  }
}

/* Znak z častíc je od teraz len záloha bez WebGL. */
.dp-hero:has(.eko) .dp-hero__platno { display: none; }
.eko-nogl .dp-hero .dp-hero__platno { display: block; }
.eko-nogl .eko { display: none; }

/* ---------- Štítky uzlov ----------
   Skript im každý snímok nastaví `transform` na bod v scéne. Samotné
   tlačidlo má nulový rozmer, bod aj text visia okolo neho. */
.eko__stitky {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.eko-stitok {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  opacity: 0;
  cursor: pointer;
  pointer-events: auto;
  will-change: transform, opacity;
}
.eko-stitok__bod {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8fd1f7;
  box-shadow: 0 0 0 4px rgba(143, 209, 247, 0.18), 0 0 18px rgba(111, 195, 245, 0.9);
}
.eko-stitok__bod::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(143, 209, 247, 0.55);
  animation: eko-pulz 2.4s ease-out infinite;
}
@keyframes eko-pulz {
  from { transform: scale(0.5); opacity: 1; }
  to { transform: scale(1.8); opacity: 0; }
}
.eko-stitok__text {
  position: absolute;
  left: 16px;
  bottom: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 7px 11px 8px;
  border: 1px solid rgba(143, 209, 247, 0.22);
  border-radius: 12px;
  background: rgba(9, 15, 25, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  text-align: left;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.eko-stitok__text::before {
  content: "";
  position: absolute;
  left: -12px;
  bottom: -4px;
  width: 12px;
  height: 1px;
  background: rgba(143, 209, 247, 0.5);
  transform: rotate(-30deg);
  transform-origin: right;
}
.eko-stitok b {
  font: 700 14px/1.1 var(--font-heading);
  letter-spacing: 0.01em;
}
.eko-stitok span span {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eko-stitok__stav {
  margin-top: 3px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #4de0c2;
}
.eko-stitok__stav--proto { color: #ffc46b; }
.eko-stitok__stav--draft { color: #b69cff; }
.eko-stitok--tichy .eko-stitok__text { padding: 5px 9px 6px; }
.eko-stitok--tichy .eko-stitok__bod { background: #ffc46b; box-shadow: 0 0 0 4px rgba(255, 196, 107, 0.16), 0 0 14px rgba(255, 196, 107, 0.8); }
.eko-stitok--tichy .eko-stitok__bod::after { border-color: rgba(255, 196, 107, 0.5); }
.eko-stitok:hover .eko-stitok__text,
.eko-stitok.je-zap .eko-stitok__text { border-color: rgba(143, 209, 247, 0.55); }
.eko-stitok:hover .eko-stitok__text { transform: translateY(-2px); }

/* ---------- Ovládanie: režimy, legenda, tip ---------- */
.eko__ovladanie {
  position: absolute;
  top: calc(var(--dp-hlavicka, 72px) + 22px);
  right: max(20px, calc((100% - var(--container)) / 2));
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.8s 0.6s var(--ease);
}
.eko-gl .eko__ovladanie { opacity: 1; }
.eko__rezimy {
  display: flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid rgba(143, 209, 247, 0.2);
  border-radius: 999px;
  background: rgba(9, 15, 25, 0.66);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.eko__rezimy button {
  min-height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.eko__rezimy button:hover { color: var(--text); }
.eko__rezimy button[aria-pressed="true"] {
  background: #e8f3ff;
  color: #0b1422;
}
.eko__legenda {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eko__legenda li { display: flex; align-items: center; gap: 8px; }
.eko-bod {
  width: 18px;
  height: 3px;
  border-radius: 3px;
  background: #6fc3f5;
  box-shadow: 0 0 10px currentColor;
}
.eko-bod--katalog { background: #6fc3f5; color: #6fc3f5; }
.eko-bod--objednavky { background: #ffc46b; color: #ffc46b; }
.eko-bod--telemetria { background: #b69cff; color: #b69cff; }
.eko-bod--erp { background: #4de0c2; color: #4de0c2; }
.eko__tip {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(170, 180, 195, 0.7);
}
.eko__tip::before { content: "⟲ "; }

@media (max-width: 899px) {
  .eko__ovladanie { top: calc(var(--dp-hlavicka, 69px) + 12px); right: 16px; gap: 8px; }
  .eko__legenda,
  .eko__tip { display: none; }
  .eko__rezimy button { min-height: 30px; padding: 0 11px; font-size: 10px; }
  .eko-stitok b { font-size: 12px; }
  .eko-stitok span span,
  .eko-stitok__stav { display: none; }
  .eko-stitok__text { padding: 4px 8px 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .eko-stitok__bod::after { animation: none; }
  .eko__platno,
  .eko__ovladanie { transition: none; }
}

/* ---------- 3D text v hero ----------
   Obsah hero je jeden blok v perspektíve: štítok, nadpis, úvod a tlačidlá
   stoja v rôznej hĺbke (vlastnosť `translate`, nie `transform`, aby sa
   nebila so vstupnými animáciami) a celý blok sa natáča za myšou a spolu
   s kamerou 3D scény. Uhly --eko-rx / --eko-ry nastavuje ekosystem.js.
   Nadpis má vytlačenú hĺbku: reťaz tieňov v tmavomodrej, ktorá sa kreslí
   cez `filter`, lebo `text-shadow` by pri lesklom riadku (background-clip:
   text) prekryl jeho prechod. */
.dp-hero:has(.eko) .dp-hero__obsah {
  transform-style: preserve-3d;
  transform: perspective(1700px) rotateX(var(--eko-rx, 0deg)) rotateY(var(--eko-ry, 0deg));
  /* Bod perspektívy na spodnej hrane bloku: tlačidlá dole sa pri
     zväčšení hĺbkou neposúvajú nadol do rovnice, rastie sa smerom hore. */
  transform-origin: 30% 100%;
  will-change: transform;
}
.dp-hero:has(.eko) .dp-hero__stitok { translate: 0 0 60px; }
.dp-hero:has(.eko) .dp-hero__nadpis {
  translate: 0 0 120px;
  /* Hĺbka zväčšuje nadpis smerom hore (bod perspektívy je dole), preto
     väčší odstup od štítku nad ním. */
  margin: 38px 0 20px;
  font-size: clamp(2.25rem, 4.9vw, 4.5rem); /* o štvrtinu menšie (28. 9. 2026) */
  /* Vytlačenie: desať vrstiev, každá o pixel nižšie a trochu doprava,
     od svetlomodrej hrany po takmer čiernu pätu, pod tým vrhnutý tieň. */
  filter:
    drop-shadow(0.7px 1.2px 0 #3d7fd0)
    drop-shadow(0.7px 1.2px 0 #3470bd)
    drop-shadow(0.7px 1.2px 0 #2b61a8)
    drop-shadow(0.7px 1.2px 0 #245494)
    drop-shadow(0.7px 1.2px 0 #1d4780)
    drop-shadow(0.7px 1.2px 0 #183c6d)
    drop-shadow(0.7px 1.2px 0 #13315b)
    drop-shadow(0.7px 1.2px 0 #0f274a)
    drop-shadow(0.7px 1.2px 0 #0b1e3a)
    drop-shadow(0.7px 1.2px 0 #08162b)
    drop-shadow(4px 26px 30px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 40px rgba(30, 136, 229, 0.3));
}
.dp-hero:has(.eko) .dp-hero__uvod {
  translate: 0 0 80px;
  text-shadow: 0.5px 1px 0 #13315b, 1px 2px 0 #0b1e3a, 0 10px 18px rgba(0, 0, 0, 0.7);
}
.dp-hero:has(.eko) .dp-hero__akcie { translate: 0 0 60px; transform-style: preserve-3d; margin-top: 28px; }
.dp-hero:has(.eko) .dp-hero__akcie .tlacidlo {
  box-shadow: 0 1px 0 #2a5a96, 0 2px 0 #1d4780, 0 3px 0 #13315b, 0 4px 0 #0f274a, 0 5px 0 #0b1e3a, 0 6px 0 #08162b, 0 22px 34px -12px rgba(0, 0, 0, 0.85);
}
.dp-hero:has(.eko) .dp-hero__akcie .tlacidlo--hlavne {
  box-shadow: 0 1px 0 #1565c0, 0 2px 0 #13579f, 0 3px 0 #104a88, 0 4px 0 #0d3d70, 0 5px 0 #0a3059, 0 6px 0 #082a4e, 0 24px 36px -10px rgba(30, 136, 229, 0.8);
}
/* Obsah hero hore pod hlavičkou, nie v strede — scéna má pod ním miesto. */
@media (min-width: 900px) {
  .dp-hero:has(.eko) {
    justify-content: flex-start;
    padding-top: calc(var(--dp-hlavicka) + 76px);
    padding-bottom: 168px;
  }
  /* Tlačidlá sedia dole, tesne nad rovnicou produktov (28. 9. 2026). */
  .dp-hero:has(.eko) .dp-hero__obsah {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .dp-hero:has(.eko) .dp-hero__akcie { margin-top: auto; padding-top: 28px; }
}

/* Rovnica produktov ako rad 3D dlaždíc. */
.dp-hero:has(.eko) .dp-rovnica__rad {
  perspective: 900px;
}
.dp-hero:has(.eko) .dp-rovnica__clen {
  transform: rotateX(var(--eko-rx, 0deg)) rotateY(var(--eko-ry, 0deg)) translateZ(0);
  box-shadow: 0 1px 0 #1b4072, 0 2px 0 #163562, 0 3px 0 #112a50, 0 4px 0 #0c2040, 0 14px 22px -8px rgba(0, 0, 0, 0.8);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.dp-hero:has(.eko) .dp-rovnica__clen:hover,
.dp-hero:has(.eko) .dp-rovnica__clen.je-zapnuty {
  transform: rotateX(var(--eko-rx, 0deg)) rotateY(var(--eko-ry, 0deg)) translateY(-4px) translateZ(20px);
  box-shadow: 0 1px 0 #2a5a96, 0 2px 0 #214c83, 0 3px 0 #1b4072, 0 4px 0 #163562, 0 5px 0 #112a50, 0 6px 0 #0c2040, 0 20px 30px -8px rgba(30, 136, 229, 0.55);
}

@media (max-width: 899px) {
  .dp-hero:has(.eko) .dp-hero__nadpis {
    filter:
      drop-shadow(0.5px 1px 0 #2a5a96)
      drop-shadow(0.5px 1px 0 #1b4072)
      drop-shadow(0.5px 1px 0 #112a50)
      drop-shadow(0.5px 1px 0 #0c2040)
      drop-shadow(0 10px 16px rgba(0, 0, 0, 0.6));
  }
}
@media (prefers-reduced-motion: reduce) {
  .dp-hero:has(.eko) .dp-hero__obsah { transform: none; }
}

/* Na úzkej obrazovke stojí scéna nad textom, nie pod ním: obsah hero sa
   posunie do spodnej časti a kamera (ekosystem.js) scénu vycentruje hore. */
@media (max-width: 899px) {
  .dp-hero:has(.eko) {
    justify-content: flex-end;
    padding-top: calc(var(--dp-hlavicka, 69px) + 40svh);
  }
}

/* Štítok pri pravom okraji sa otočí doľava, aby ho okno neorezalo. */
.eko-stitok.je-vlavo .eko-stitok__text { left: auto; right: 16px; align-items: flex-end; text-align: right; }
.eko-stitok.je-vlavo .eko-stitok__text::before { left: auto; right: -12px; transform: rotate(30deg); transform-origin: left; }

/* Na telefóne by hĺbka (translateZ v perspektíve) text a tlačidlá zväčšila
   za okraj okna — ostáva len vytlačenie, bez vrstiev v hĺbke. */
@media (max-width: 899px) {
  .dp-hero:has(.eko) .dp-hero__stitok,
  .dp-hero:has(.eko) .dp-hero__nadpis,
  .dp-hero:has(.eko) .dp-hero__uvod,
  .dp-hero:has(.eko) .dp-hero__akcie { translate: none; }
}

/* Vykreslenie obsahu hero ako v blueprint scéne (28. 9. 2026): nadpis sa
   najprv nakreslí svetlým obrysom — pero ide po riadkoch zľava doprava —
   a potom sa do obrysu naleje farba. Úvod, tlačidlá a rovnica sa odkryjú
   rovnakým ťahom. Bez pohybu (prefers-reduced-motion) je všetko hneď
   hotové. */
@media (prefers-reduced-motion: no-preference) {
  .js .dp-hero:has(.eko) .dp-hero__riadok > span {
    position: relative;
    transform: none;
    -webkit-text-stroke: 1.2px rgba(143, 200, 255, 0);
    animation: eko-kresli-text 1.9s calc(0.1s + var(--i, 0) * 0.32s) cubic-bezier(0.45, 0.05, 0.25, 1) both;
  }
  .js .dp-hero:has(.eko) .dp-hero__riadok > .dp-hero__lesk {
    background-repeat: repeat-x;
    animation:
      eko-kresli-lesk 1.9s calc(0.1s + var(--i, 0) * 0.32s) cubic-bezier(0.45, 0.05, 0.25, 1) both,
      dp-lesk 6s 2.6s linear infinite;
  }
  /* Hrot pera: svietiaca zvislá čiarka na okraji kreslenia. */
  .js .dp-hero:has(.eko) .dp-hero__riadok > span::after {
    content: "";
    position: absolute;
    top: 8%;
    bottom: 8%;
    left: 0;
    width: 3px;
    border-radius: 3px;
    background: #e8f5ff;
    box-shadow: 0 0 12px #8fc8ff, 0 0 26px #4ba3ee;
    opacity: 0;
    animation: eko-pero 1.1s calc(0.1s + var(--i, 0) * 0.32s) cubic-bezier(0.45, 0.05, 0.25, 1) both;
  }
  .js .dp-hero:has(.eko) .dp-hero__stitok,
  .js .dp-hero:has(.eko) .dp-hero__uvod,
  .js .dp-hero:has(.eko) .dp-hero__akcie,
  .js .dp-hero:has(.eko) .dp-rovnica {
    animation: eko-odkryt 1s cubic-bezier(0.45, 0.05, 0.25, 1) both;
  }
  .js .dp-hero:has(.eko) .dp-hero__stitok { animation-delay: 0s; }
  .js .dp-hero:has(.eko) .dp-hero__uvod { animation-delay: 1.15s; }
  .js .dp-hero:has(.eko) .dp-hero__akcie { animation-delay: 1.45s; }
  .js .dp-hero:has(.eko) .dp-rovnica { animation-delay: 1.75s; }
}
@keyframes eko-kresli-text {
  0% { clip-path: inset(-25% 100% -25% 0); color: rgba(238, 242, 247, 0); -webkit-text-stroke-color: rgba(143, 200, 255, 0.95); }
  58% { clip-path: inset(-25% 0 -25% 0); color: rgba(238, 242, 247, 0); -webkit-text-stroke-color: rgba(143, 200, 255, 0.95); }
  100% { clip-path: inset(-25% 0 -25% 0); color: #eef2f7; -webkit-text-stroke-color: rgba(143, 200, 255, 0); }
}
@keyframes eko-kresli-lesk {
  0% { clip-path: inset(-25% 100% -25% 0); background-size: 200% 0%; -webkit-text-stroke-color: rgba(143, 200, 255, 0.95); }
  58% { clip-path: inset(-25% 0 -25% 0); background-size: 200% 0%; -webkit-text-stroke-color: rgba(143, 200, 255, 0.95); }
  100% { clip-path: inset(-25% 0 -25% 0); background-size: 200% 100%; -webkit-text-stroke-color: rgba(143, 200, 255, 0); }
}
@keyframes eko-pero {
  0% { left: 0; opacity: 1; }
  92% { left: calc(100% - 3px); opacity: 1; }
  100% { left: calc(100% - 3px); opacity: 0; }
}
@keyframes eko-odkryt {
  from { opacity: 0; clip-path: inset(-30% 100% -30% -2%); }
  to { opacity: 1; clip-path: inset(-30% -2% -30% -2%); }
}

/* Stmavenie pod textom siaha presne po jeho pravý okraj — ten meria
   ekosystem.js a dáva ho do --eko-text (px od ľavého okraja scény). */
@media (min-width: 900px) {
  .eko::after {
    background:
      linear-gradient(90deg, rgba(7, 10, 16, 0.94) 0, rgba(7, 10, 16, 0.8) calc(var(--eko-text, 640px) - 80px), rgba(7, 10, 16, 0) calc(var(--eko-text, 640px) + 140px)),
      linear-gradient(0deg, rgba(7, 10, 16, 0.85) 0%, rgba(7, 10, 16, 0) 26%);
  }
}

/* ---------- Terminál s popisom zvoleného objektu ---------- */
.eko-terminal { display: none; }
.eko-gl .eko-terminal {
  display: block;
  position: relative;
  max-width: 540px;
  min-height: calc(2 * 1.65em + 24px);
  margin: 20px 0 0;
  padding: 10px 16px;
  border: 1px solid rgba(143, 184, 255, 0.18);
  border-left: 2px solid #4ba3ee;
  border-radius: 4px;
  background:
    linear-gradient(rgba(143, 184, 255, 0.05) 1px, transparent 1px) 0 0 / 100% 1.65em,
    rgba(9, 15, 25, 0.84);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(6px);
  font: 400 13px/1.65 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
  color: #d6e9ff;
  text-shadow: 0 0 10px rgba(111, 195, 245, 0.35);
  pointer-events: none;
}
.eko-terminal__cesta { color: rgba(143, 184, 255, 0.75); }
.eko-terminal__kurzor {
  display: inline-block;
  width: 0.62em;
  height: 1.2em;
  margin-left: 1px;
  vertical-align: -0.22em;
  background: rgba(111, 195, 245, 0.55);
  box-shadow: 0 0 12px rgba(111, 195, 245, 0.7);
  animation: eko-kurzor 1.05s steps(1) infinite;
}
.eko-terminal.je-pise .eko-terminal__kurzor { animation: none; }
@keyframes eko-kurzor { 50% { opacity: 0; } }
@media (min-width: 900px) {
  .dp-hero:has(.eko) .eko-terminal { translate: 0 0 70px; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .dp-hero:has(.eko) .eko-terminal { animation: eko-odkryt 0.8s 1.3s cubic-bezier(0.45, 0.05, 0.25, 1) both; }
}
@media (max-width: 899px) {
  .eko-gl .eko-terminal { margin-top: 18px; font-size: 12px; }
  .dp-hero:has(.eko) .dp-hero__nadpis { margin: 22px 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .eko-terminal__kurzor { animation: none; }
}

/* Tip „Ťahaním scénu otočíte" v jednom riadku vľavo od prepínača režimov. */
@media (min-width: 900px) {
  .eko__tip {
    position: absolute;
    top: 0;
    right: calc(100% + 16px);
    width: max-content;
    line-height: 44px;
    white-space: nowrap;
  }
}

/* Legenda vpravo vedľa prepínača režimov, nie pod ním (28. 9. 2026). */
@media (min-width: 900px) {
  .eko__ovladanie {
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
  }
  .eko__legenda { align-items: flex-start; padding-top: 2px; }
  .eko__legenda li { flex-direction: row; }
}