/* ==========================================================================
   TimLuks – xview.css
   „Rozložený pohľad“ na webstránku vpravo v hero: štyri sklenené vrstvy nad sebou
   (01 Pozadie, 02 Rozloženie, 03 Obsah, 04 Interakcia), medzi nimi jemná limetková žiara.
   Je to čisté HTML + CSS 3D (bez obrázkov a knižníc); myšou vrstvy naklápa a ťahá od seba
   assets/js/xview.js (mení premenné --rx, --rz a --spread na .xview__stack).

   Všetko sa mieri v „em“, takže sa celá scéna zväčšuje a zmenšuje spolu s voľným miestom
   vpravo od nadpisu (font-size scény = 1/32 šírky voľného miesta). Keď je voľného miesta
   príliš málo (menšie okno, mobil), scéna sa skryje; pri ešte menšom sa skryjú len popisky.
   Ladenie: pozri premenné hneď v .xview__stack.
   ========================================================================== */

/* Voľné miesto vpravo od nadpisu: od jeho pravého okraja po okraj hera. --hl (veľkosť nadpisu) je v headline.css;
   nadpis je široký ≈ 7 × --hl a je v strede, takže na každej strane ostáva 50vw − 3,5 × --hl. */
.xview {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;                       /* pod obsahom hera (viď .hero .container v base.css) */
  width: calc(50vw - 3.75 * var(--hl));   /* o štvrť veľkosti nadpisu menej než celé voľné miesto = malá rezerva medzi nadpisom a scénou */
  display: grid;
  place-items: center;
  container-type: inline-size;
  pointer-events: none;
}

.xview__scene {
  position: relative;
  width: 34em;
  height: 26em;
  font-size: calc(100cqw / 34 * 0.84);   /* 0,84 = o čosi menšia scéna, než by zaplnila celé voľné miesto */
  translate: 0 7vh;                      /* a posunutá nižšie */
  perspective: 100em;
  perspective-origin: 50% 42%;
}

/* Pri malom voľnom mieste (užšie ako 260 px) scénu radšej skryjeme, aby nezasahovala do nadpisu. */
@container (max-width: 259px) {
  .xview__scene { display: none; }
}
/* Pri menšom ako 430 px sú popisky príliš drobné, tak ich skryjeme. */
@container (max-width: 429px) {
  .xl__tag { display: none; }
}

/* Postupné „rozloženie“ pri načítaní: vrstvy sa zjavia zložené na sebe a rozídu sa. */
@property --ex {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

/* Kým sa nadpis nespustí (main.js pridá .is-ready), scéna nie je vidieť. Bez JS ju hneď zobrazí fallback. */
.js .hero:not(.is-ready) .xview {
  opacity: 0;
  animation: hero-fallback-xview 0s linear 3s forwards;
}
@keyframes hero-fallback-xview { to { opacity: 1; } }

.hero.is-ready .xview {
  animation: xv-fade 0.9s var(--ease-out) both;
}
.hero.is-ready .xview__stack {
  animation: xv-explode 1.7s var(--ease-out) both;
}
@keyframes xv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes xv-explode { from { --ex: 0.08; } to { --ex: 1; } }

/* ---------- Zásobník vrstiev (otočený do „izometrie“) ---------- */

.xview__stack {
  /* Natočenie a rozostup – JS ich za behu jemne mení podľa myši. */
  --rx: 58deg;                     /* sklon roviny k divákovi (90° = pohľad zhora, 0° = zvislo) */
  --rz: -34deg;                    /* otočenie okolo zvislej osi */
  --spread: 1;                     /* násobok rozostupu (JS ho pri priblížení myši mierne zväčší) */
  --gap: calc(5em * var(--spread) * var(--ex, 1));   /* vzdialenosť medzi vrstvami */

  position: absolute;
  left: 37.6%;                     /* doľava od stredu, aby vpravo zostalo miesto pre popisky */
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateZ(var(--rz)) translateZ(calc(var(--gap) * -1.5));
}

/* ---------- Sklenená vrstva ---------- */

.xl {
  --z: calc(var(--k) * var(--gap) + var(--dz, 0em));   /* výška vrstvy; --dz je jemné vznášanie z JS */

  position: absolute;
  left: -10em;
  top: -7em;
  width: 20em;
  height: 14em;
  border-radius: 1.1em;
  border: 1px solid rgba(214, 224, 246, 0.2);
  background:
    linear-gradient(135deg, rgba(190, 205, 240, 0.17), rgba(190, 205, 240, 0.045) 55%, rgba(var(--accent-rgb), 0.06)),
    rgba(14, 16, 22, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 2.6em rgba(160, 180, 230, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.25);
  transform-style: preserve-3d;
  transform: translateZ(var(--z));
}

/* Limetková žiara v medzere pod vrstvou (medzi ňou a nižšou vrstvou). */
.xl:not(.xl--bg)::before {
  content: "";
  position: absolute;
  inset: 8% 3%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.08) 60%, transparent);
  transform: translateZ(calc(var(--gap) / -2));
}

/* Zvislé vodiace čiary na rohoch (ako v technických výkresoch rozloženého pohľadu). */
.xview__rail {
  position: absolute;
  width: 1px;
  height: calc(var(--gap) * 3);
  transform-origin: 0 0;
  transform: rotateX(90deg);
  background: repeating-linear-gradient(to bottom, rgba(var(--accent-rgb), 0.75) 0 0.35em, transparent 0.35em 0.75em);
  opacity: 0.55;
}
.xview__rail--a { left: -10em; top: 7em; }     /* pravý (na obrazovke spodný) roh */
.xview__rail--b { left: 10em; top: 7em; }
.xview__rail--c { left: 10em; top: -7em; }

/* Popisok vrstvy: vždy čelom k divákovi, vpravo od pravého rohu vrstvy. */
.xl__tag {
  position: absolute;
  left: 100%;
  top: 100%;
  padding-left: 2.2em;
  white-space: nowrap;
  font-size: 0.66em;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);           /* sleduje režim hera – pevná biela by vo svetlom režime splynula s pozadím */
  transform-origin: 0 0;
  transform: rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--rx) * -1)) translateY(-50%);
}
.xl__tag::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 50%;
  width: 1.5em;
  height: 1px;
  background: rgba(var(--accent-text-rgb), 0.7);
}
.xl__tag b { color: var(--accent-text); font-weight: 700; margin-right: 0.5em; }

/* ---------- 01 Pozadie ---------- */

.xl--bg {
  border-color: rgba(var(--accent-rgb), 0.28);
  background:
    linear-gradient(135deg, rgba(170, 190, 240, 0.2), rgba(170, 190, 240, 0.05) 60%, rgba(var(--accent-rgb), 0.1)),
    rgba(14, 16, 22, 0.4);
}
.xl__glow {
  position: absolute;
  inset: 18% 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.45), rgba(var(--accent-rgb), 0.12) 65%, transparent);
  filter: blur(0.5em);
}
.xl__dots {
  position: absolute;
  inset: 0.8em;
  border-radius: 0.6em;
  background-image: radial-gradient(rgba(214, 224, 246, 0.42) 1px, transparent 1.4px);
  background-size: 1.1em 1.1em;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 85%);
  mask-image: linear-gradient(135deg, #000, transparent 85%);
}

/* ---------- 02 Rozloženie (drôtený model) ---------- */

.xl__box {
  position: absolute;
  border: 1px dashed rgba(var(--accent-rgb), 0.6);
  border-radius: 0.4em;
}
.xl__box--nav  { left: 1em;    top: 1em;   width: 18em;  height: 1.7em; }
.xl__box--hero { left: 1em;    top: 3.2em; width: 9.2em; height: 5.6em; }
.xl__box--pic  { left: 11em;   top: 3.2em; width: 8em;   height: 5.6em; }
.xl__box--c1   { left: 1em;    top: 9.6em; width: 5.2em; height: 3.4em; }
.xl__box--c2   { left: 7.4em;  top: 9.6em; width: 5.2em; height: 3.4em; }
.xl__box--c3   { left: 13.8em; top: 9.6em; width: 5.2em; height: 3.4em; }

/* ---------- 03 Obsah ---------- */

.xl__logo {
  position: absolute;
  left: 1.4em; top: 1.4em;
  width: 2.6em; height: 0.9em;
  border-radius: 0.25em;
  background: var(--accent);
}
.xl__line {
  position: absolute;
  border-radius: 0.5em;
  background: rgba(245, 244, 240, 0.9);
}
.xl__line--nav1 { right: 1.5em; top: 1.72em; width: 1.7em; height: 0.28em; background: rgba(245, 244, 240, 0.5); }
.xl__line--nav2 { right: 3.7em; top: 1.72em; width: 1.7em; height: 0.28em; background: rgba(245, 244, 240, 0.5); }
.xl__line--h1   { left: 1.4em; top: 3.7em; width: 7.2em; height: 0.95em; }
.xl__line--h2   { left: 1.4em; top: 4.95em; width: 5em;  height: 0.95em; }
.xl__line--p1   { left: 1.4em; top: 6.4em; width: 8em;   height: 0.3em; background: rgba(245, 244, 240, 0.3); }
.xl__line--p2   { left: 1.4em; top: 7em;   width: 6.2em; height: 0.3em; background: rgba(245, 244, 240, 0.3); }
.xl__cta {
  position: absolute;
  left: 1.4em; top: 7.6em;
  width: 3.4em; height: 1em;
  border-radius: 0.3em;
  background: var(--accent);
  box-shadow: 0 0 1em rgba(var(--accent-rgb), 0.45);
}
.xl__pic {
  position: absolute;
  left: 11.4em; top: 3.6em;
  width: 7.2em; height: 4.8em;
  border-radius: 0.5em;
  background:
    radial-gradient(circle at 70% 32%, rgba(255, 255, 255, 0.85) 0.55em, transparent 0.7em),
    linear-gradient(140deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.2) 62%, rgba(140, 158, 205, 0.3));
}
.xl__card {
  position: absolute;
  top: 9.8em;
  width: 4.8em; height: 3em;
  border-radius: 0.4em;
  background:
    radial-gradient(circle at 0.75em 0.8em, var(--accent) 0.3em, transparent 0.36em),
    linear-gradient(rgba(245, 244, 240, 0.62), rgba(245, 244, 240, 0.62)) 0.5em 1.55em / 2.6em 0.26em no-repeat,
    linear-gradient(rgba(245, 244, 240, 0.25), rgba(245, 244, 240, 0.25)) 0.5em 2.1em / 3.6em 0.22em no-repeat,
    rgba(245, 244, 240, 0.09);
}
.xl__card--1 { left: 1.2em; }
.xl__card--2 { left: 7.6em; }
.xl__card--3 { left: 14em; }

/* ---------- 04 Interakcia ---------- */

.xl--ui {
  border-color: rgba(var(--accent-rgb), 0.45);
  background:
    linear-gradient(135deg, rgba(190, 205, 240, 0.09), rgba(190, 205, 240, 0.02) 55%, rgba(var(--accent-rgb), 0.1)),
    rgba(14, 16, 22, 0.12);
}

/* Krúžok okolo tlačidla (najedenie / kliknutie): pulzuje. */
.xl__ring {
  position: absolute;
  left: 0.85em; top: 7.05em;
  width: 4.3em; height: 2.1em;
  border: 1px solid var(--accent);
  border-radius: 0.6em;
  box-shadow: 0 0 1.4em rgba(var(--accent-rgb), 0.55), inset 0 0 0.9em rgba(var(--accent-rgb), 0.25);
  animation: xv-ring 2.8s ease-out infinite;
}
@keyframes xv-ring {
  0%   { transform: scale(0.94); opacity: 1; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}

/* Označený obrázok (ako v dizajnérskom nástroji): limetkový rámik s úchytmi v rohoch. */
.xl__sel {
  position: absolute;
  left: 11.1em; top: 3.3em;
  width: 7.8em; height: 5.4em;
  border: 1px solid rgba(var(--accent-rgb), 0.85);
  border-radius: 0.3em;
}
.xl__sel::before {
  content: "";
  position: absolute;
  left: -0.3em; top: -0.3em;
  width: 0.55em; height: 0.55em;
  background: var(--accent);
  box-shadow: 7.8em 0 var(--accent), 0 5.4em var(--accent), 7.8em 5.4em var(--accent);
}

/* Kurzor a bublinka stoja kolmo na vrstvu a sú stále čelom k divákovi (otočenie sa ruší s otočením zásobníka). */
.xl__cursor,
.xl__chip {
  position: absolute;
  transform-origin: 0 0;
  transform: rotateZ(calc(var(--rz) * -1)) rotateX(calc(var(--rx) * -1));
}
.xl__cursor {
  left: 3.4em; top: 8.4em;
  width: 2.3em; height: 2.3em;
  overflow: visible;
  filter: drop-shadow(0 0.15em 0.25em rgba(0, 0, 0, 0.55));
  animation: xv-cursor 4.2s ease-in-out infinite;
}
.xl__cursor path {
  fill: #fff;
  stroke: rgba(10, 11, 14, 0.85);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
@keyframes xv-cursor {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0.5em 0.35em; }
}
.xl__chip {
  left: 5.4em; top: 6.9em;
  padding: 0.5em 0.9em;
  border: 1px solid rgba(var(--accent-rgb), 0.6);
  border-radius: 999px;
  background: rgba(10, 11, 14, 0.82);
  font-size: 0.7em;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--on-ink);
}
.xl__chip::before {
  content: "";
  display: inline-block;
  width: 0.55em; height: 0.55em;
  margin-right: 0.6em;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0.6em var(--accent);
}