/* ═══════════════════════════════════════════════════════════════════════════
   landing3d.css — vrstva priestorovej hĺbky nad `landing.css`.

   Zapína ju atribút `data-dizajn="3d"` na <html> (nastavuje index.php).
   Bez neho je súbor neúčinný a stránka vyzerá presne ako doteraz.

   Prečo tu takmer nie je vlastnosť `transform`:
   Pôvodné odkrývanie (`html.js .reveal.is-visible { transform: … }`) má
   vyššiu špecificitu a transformáciu odkrývaných prvkov by prepísalo.
   Namiesto súboja o `transform` sú tu samostatné vlastnosti `translate`,
   `rotate` a `scale` — skladajú sa s `transform` nezávisle, takže pôvodné
   odkrývanie beží ďalej a hĺbka sa k nemu len pripočíta.

   Premenné nastavuje landing3d.js:
     --naklon-x / --naklon-y   uhol hlavičky v stupňoch
     --posun-x  / --posun-y    číslo −1 … 1 (na pixely sa násobí až tu)
   Uhly a dĺžky sú zámerne oddelené — `translate` so stupňami je neplatný
   a prehliadač by celú deklaráciu potichu zahodil. Na tom padla prvá verzia.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-dizajn="3d"] {
  --naklon-x: 0deg;
  --naklon-y: 0deg;
  --posun-x: 0;
  --posun-y: 0;
}

/* ─── Hlavička ako scéna s vrstvami ──────────────────────────────────────── */

[data-dizajn="3d"] .lhero {
  position: relative;
  overflow: hidden;
  perspective: 1300px;
  perspective-origin: 50% 38%;
}

/* Hmla medzi pozadím a písmom — hýbe sa inak než obsah a tým vytvára vzduch. */
[data-dizajn="3d"] .lhero::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(38% 30% at 22% 28%, rgba(227, 183, 183, 0.22), transparent 70%),
    radial-gradient(32% 26% at 78% 66%, rgba(201, 162, 39, 0.14), transparent 72%);
  translate: calc(var(--posun-x) * -18px) calc(var(--posun-y) * -18px);
  transition: translate 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Obal obsahu nie je `.reveal`, takže sa smie nakláňať celý cez `transform`. */
[data-dizajn="3d"] .lhero__content {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
  transform: rotateX(var(--naklon-x)) rotateY(var(--naklon-y));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hĺbka detí cez `translate` — odkrývanie cez `transform` ostáva nedotknuté. */
[data-dizajn="3d"] .lhero__title     { translate: 0 0 70px; text-wrap: balance; }
[data-dizajn="3d"] .lhero__sub,
[data-dizajn="3d"] .lhero__quick     { translate: 0 0 34px; }
[data-dizajn="3d"] .lhero__eyebrow,
[data-dizajn="3d"] .lhero__badges,
[data-dizajn="3d"] .lhero__trust,
[data-dizajn="3d"] .lhero__quicknote { translate: 0 0 14px; }

/* Vtáčiky sú najhlbšie a hýbu sa proti smeru — to oko číta ako diaľku. */
[data-dizajn="3d"] .lhero__birds {
  translate: calc(var(--posun-x) * -14px) calc(var(--posun-y) * -10px) -60px;
  transition: translate 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─── Ľúbostné motívy v hĺbke hlavičky ───────────────────────────────────── */
/* Kresby zo `sablona/laska-ozdoby.html`. Blízke motívy (vyššie --z) sú
   väčšie, sýtejšie a hýbu sa viac; vzdialené menšie, bledšie a skoro stoja.
   Stredový pás pod nadpisom ostáva čistý, aby sa dal čítať. */

.laska-vrstvy { display: none; }

[data-dizajn="3d"] .laska-vrstvy {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform-style: preserve-3d;
}

[data-dizajn="3d"] .lz {
  --x: 50%; --y: 50%; --z: 0px; --w: 56px; --r: 0deg; --sila: 1;
  --farba: var(--terra, #A03A50);
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--w);
  overflow: visible;
  color: var(--farba);
  opacity: 0.55;
  translate: calc(var(--posun-x) * var(--sila) * 16px)
             calc(var(--posun-y) * var(--sila) * 16px)
             var(--z);
  rotate: var(--r);
  transition: translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  /* Vznášanie ide cez `transform`, takže sa nebije s posunom za kurzorom. */
  animation: lz-vznos var(--t, 11s) ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}

[data-dizajn="3d"] .lz--1 { --x: 7%;  --y: 18%; --z: 120px; --w: 74px;  --r: -12deg; --sila: 2.6; --t: 12s; opacity: .62; }
[data-dizajn="3d"] .lz--2 { --x: 84%; --y: 16%; --z: 40px;  --w: 84px;  --r: 9deg;   --sila: 1.3; --t: 14s; --d: -3s; }
[data-dizajn="3d"] .lz--3 { --x: 17%; --y: 70%; --z: 160px; --w: 28px;  --r: 14deg;  --sila: 3.2; --t: 9s;  --d: -2s; opacity: .8; }
[data-dizajn="3d"] .lz--4 { --x: 88%; --y: 64%; --z: 90px;  --w: 62px;  --r: -8deg;  --sila: 2.1; --t: 13s; --d: -6s; }
[data-dizajn="3d"] .lz--5 { --x: 60%; --y: 7%;  --z: -40px; --w: 120px; --r: 4deg;   --sila: .6;  --t: 16s; --d: -4s; opacity: .38; }
[data-dizajn="3d"] .lz--6 { --x: 30%; --y: 86%; --z: -80px; --w: 220px; --r: -3deg;  --sila: .4;  --t: 18s; --d: -8s; opacity: .32; }
[data-dizajn="3d"] .lz--7 { --x: 76%; --y: 40%; --z: 60px;  --w: 22px;  --sila: 1.8; --t: 7s;  --d: -1s; --farba: #C9A227; }
[data-dizajn="3d"] .lz--8 { --x: 3%;  --y: 48%; --z: 30px;  --w: 20px;  --r: -20deg; --sila: 1.2; --t: 10s; --d: -5s; opacity: .7; }
[data-dizajn="3d"] .lz--9 { --x: 23%; --y: 9%;  --z: -20px; --w: 18px;  --sila: .8;  --t: 8s;  --d: -7s; --farba: #C9A227; }

@keyframes lz-vznos {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

[data-dizajn="3d"] .lhero--foto .lz { --farba: #F0C2C2; }

@media (max-width: 40rem) {
  [data-dizajn="3d"] .lz--1, [data-dizajn="3d"] .lz--2, [data-dizajn="3d"] .lz--4,
  [data-dizajn="3d"] .lz--7, [data-dizajn="3d"] .lz--8 { display: none; }
  [data-dizajn="3d"] .lz--6 { --w: 150px; --x: 10%; }
}

/* ─── Karty: naklonenie k polohe kurzora ─────────────────────────────────── */
/* Jedna rotácia okolo osi kolmej na smer ku kurzoru — presne ten pohyb,
   aký človek čaká, keď „zatlačí" na roh karty. Os aj uhol počíta JS. */

[data-dizajn="3d"] .why__grid,
[data-dizajn="3d"] .gallery__grid,
[data-dizajn="3d"] .pricing__grid,
[data-dizajn="3d"] .steps {
  perspective: 1000px;
}

[data-dizajn="3d"] .why__card,
[data-dizajn="3d"] .price-card,
[data-dizajn="3d"] .steps__item,
[data-dizajn="3d"] .gcard {
  --os-x: 0; --os-y: 1; --uhol: 0deg; --z: 0px; --px: 0px; --py: 0px;
  transform-style: preserve-3d;
  rotate: var(--os-x) var(--os-y) 0 var(--uhol);
  translate: 0 0 var(--z);
  transition: rotate 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              translate 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease,
              opacity 0.7s ease, transform 0.7s ease;
}

[data-dizajn="3d"] .why__card:hover,
[data-dizajn="3d"] .price-card:hover,
[data-dizajn="3d"] .steps__item:hover {
  box-shadow: 0 18px 40px -22px rgba(62, 42, 42, 0.45);
}

[data-dizajn="3d"] .gcard { overflow: hidden; }
[data-dizajn="3d"] .gcard__photo {
  translate: var(--px) var(--py);
  scale: 1.06;
  transition: translate 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-dizajn="3d"] .gcard:hover {
  box-shadow: 0 26px 50px -26px rgba(62, 42, 42, 0.55);
}

/* ─── Pás s fotkou: text bližšie než fotka ───────────────────────────────── */

[data-dizajn="3d"] .pas {
  perspective: 1200px;
  transform-style: preserve-3d;
}
[data-dizajn="3d"] .pas__text { translate: 0 0 60px; }
[data-dizajn="3d"] .pas__doodle {
  animation: doodle-dych 14s ease-in-out infinite alternate;
}
@keyframes doodle-dych {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-6px) scale(1.015); }
}

/* ─── Scrollom riadené animácie priamo v CSS ─────────────────────────────── */
/* Beží mimo hlavného vlákna, bez JavaScriptu. Staršie prehliadače blok
   preskočia a dostanú pôvodné odkrývanie. Animuje sa `opacity`, `scale`
   a `rotate` — nie `translate`, ten patrí hĺbke kariet. */

@supports (animation-timeline: view()) {
  [data-dizajn="3d"] .case {
    animation: karta-prilet linear both;
    animation-timeline: view();
    animation-range: entry 8% cover 34%;
    transform-origin: 50% 100%;
  }

  [data-dizajn="3d"] .why__grid,
  [data-dizajn="3d"] .steps,
  [data-dizajn="3d"] .pricing__grid,
  [data-dizajn="3d"] .gallery__grid {
    animation: mriezka-hore linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }

  /* Paralaxa pásu bez JS a bez `background-attachment: fixed`,
     ktorý na iOS poskakuje. */
  [data-dizajn="3d"] .pas {
    animation: pas-hlbka linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

@keyframes karta-prilet {
  from { opacity: 0; rotate: x 9deg; scale: 0.96; }
  to   { opacity: 1; rotate: x 0deg; scale: 1; }
}
@keyframes mriezka-hore {
  from { opacity: 0.2; scale: 0.975; }
  to   { opacity: 1;   scale: 1; }
}
@keyframes pas-hlbka {
  from { background-position: center 30%; }
  to   { background-position: center 70%; }
}

/* ─── Kde pohyb nemá zmysel ──────────────────────────────────────────────── */

/* Na dotyku by sa karta naklonila až pod prstom — keď už z nej nič nevidno. */
@media (hover: none) {
  [data-dizajn="3d"] .why__card,
  [data-dizajn="3d"] .price-card,
  [data-dizajn="3d"] .steps__item,
  [data-dizajn="3d"] .gcard { rotate: none; translate: none; }
}

/* Len prvky, ktoré tento súbor hýbe. Plošné `* { … }` by rozbilo aj statické
   transformácie pôvodného dizajnu — práve u ľudí, ktorí animácie vypli. */
@media (prefers-reduced-motion: reduce) {
  [data-dizajn="3d"] .lhero::after,
  [data-dizajn="3d"] .lhero__title,
  [data-dizajn="3d"] .lhero__sub,
  [data-dizajn="3d"] .lhero__quick,
  [data-dizajn="3d"] .lhero__eyebrow,
  [data-dizajn="3d"] .lhero__badges,
  [data-dizajn="3d"] .lhero__trust,
  [data-dizajn="3d"] .lhero__quicknote,
  [data-dizajn="3d"] .lhero__birds,
  [data-dizajn="3d"] .lz,
  [data-dizajn="3d"] .why__card,
  [data-dizajn="3d"] .price-card,
  [data-dizajn="3d"] .steps__item,
  [data-dizajn="3d"] .gcard,
  [data-dizajn="3d"] .gcard__photo,
  [data-dizajn="3d"] .pas,
  [data-dizajn="3d"] .pas__text,
  [data-dizajn="3d"] .pas__doodle,
  [data-dizajn="3d"] .case,
  [data-dizajn="3d"] .why__grid,
  [data-dizajn="3d"] .steps,
  [data-dizajn="3d"] .pricing__grid,
  [data-dizajn="3d"] .gallery__grid {
    animation: none !important;
    transition: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
  }
  [data-dizajn="3d"] .lhero__content { transform: none !important; }
}

/* ═══════════ FILM — úvodná obrazovka, ktorú prehráva scroll ════════════
   Film je prvé, čo návštevník uvidí: cez celý displej na počítači aj na
   mobile, menu leží cez neho. Dráha je vysoká 4,2 obrazovky, scéna v nej
   prilepená — kým sa po dráhe scrolluje, film sa prehráva, texty sa
   striedajú a na konci sa na tmavobordovej nakreslí srdce s heslom.
   Obraz sa kreslí „cover", takže na mobile na výšku ostane stred záberu. */

[data-dizajn="3d"] .film {
  position: relative;
  background: #25070c;       /* farba, do ktorej sa video stmieva */
  color: #FBF3F0;
}
[data-dizajn="3d"] .film__draha { height: 420vh; }

[data-dizajn="3d"] .film__scena {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;            /* na mobile bez preskakovania lišty prehliadača */
  overflow: hidden;
}

[data-dizajn="3d"] .film__ram { position: absolute; inset: 0; }
[data-dizajn="3d"] .film__platno { display: block; width: 100%; height: 100%; }

/* Stmavenie pod textom — na počítači zľava (tam je text), na mobile zdola,
   a jemne zhora pod menu. Pri závere zmizne, obraz je už tmavý sám. */
[data-dizajn="3d"] .film__scena::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 7, 9, 0.5) 0%, transparent 16%),
    linear-gradient(90deg, rgba(11, 7, 9, 0.78) 0%, rgba(11, 7, 9, 0.35) 38%, transparent 62%),
    linear-gradient(0deg, rgba(11, 7, 9, 0.8) 0%, rgba(11, 7, 9, 0.4) 14%, transparent 32%);
  z-index: 1;
  transition: opacity 0.8s ease;
}
[data-dizajn="3d"] .film__scena--koniec::after { opacity: 0; }

/* Vety ležia každá na svojom mieste: prvé dve vľavo (krabička je vtedy
   ešte malá v strede), tretia dole v strede — pri kartičke zblízka zaberá
   krabička celý stred obrazu a text by ju zakryl. */
[data-dizajn="3d"] .film__texty {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
[data-dizajn="3d"] .film__krok {
  position: absolute;
  left: clamp(1.5rem, 7vw, 7rem);
  top: 50%;
  width: min(34rem, 42vw);
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 3.4vw, 3.6rem);
  line-height: 1.16;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  translate: 0 calc(-50% + 18px);
  transition: opacity 0.6s ease, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-dizajn="3d"] .film__krok.je { opacity: 1; translate: 0 -50%; }
[data-dizajn="3d"] .film__krok:nth-child(3) {
  left: 50%;
  top: auto;
  bottom: 6vh;
  width: min(48rem, 86vw);
  font-size: clamp(1.5rem, 2.3vw, 2.5rem);
  text-align: center;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
  translate: -50% 18px;
}
[data-dizajn="3d"] .film__krok:nth-child(3).je { translate: -50% 0; }

/* Záver: srdce a heslo v strede. */
[data-dizajn="3d"] .film__koniec {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 1.4rem;
  text-align: center;
  pointer-events: none;
}
[data-dizajn="3d"] .film__srdce {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(36rem, 86vw);
  translate: -50% -54%;
  overflow: visible;
}
[data-dizajn="3d"] .film__srdce path {
  fill: none;
  stroke: #c3313f;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(195, 49, 63, 0.45));
}
[data-dizajn="3d"] .film__heslo,
[data-dizajn="3d"] .film__heslo-pod,
[data-dizajn="3d"] .film__cta {
  position: relative;
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.7s ease, translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-dizajn="3d"] .film__heslo {
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.2rem, 4.6vw, 4.4rem);
  line-height: 1.12;
  color: #FBF3F0;
}
[data-dizajn="3d"] .film__heslo span { display: inline-block; white-space: nowrap; }
[data-dizajn="3d"] .film__heslo-pod {
  margin: 1rem 0 0;
  max-width: 30ch;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: rgba(251, 243, 240, 0.72);
  transition-delay: 0.15s;
}
[data-dizajn="3d"] .film__cta { margin-top: 1.8rem; transition-delay: 0.3s; }
[data-dizajn="3d"] .film__koniec.je { pointer-events: auto; }
[data-dizajn="3d"] .film__koniec.je .film__heslo,
[data-dizajn="3d"] .film__koniec.je .film__heslo-pod,
[data-dizajn="3d"] .film__koniec.je .film__cta { opacity: 1; translate: 0 0; }

/* Šípka dole — na prvej obrazovke hovorí „scrolluj". Po prvom pohybe zmizne. */
[data-dizajn="3d"] .film__sipka {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 3.2vh;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 2px solid rgba(251, 243, 240, 0.7);
  border-radius: 14px;
  transition: opacity 0.4s ease;
}
[data-dizajn="3d"] .film__sipka::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: rgba(251, 243, 240, 0.85);
  animation: film-koliesko 1.6s ease-in-out infinite;
}
@keyframes film-koliesko {
  0%   { translate: 0 0; opacity: 1; }
  70%  { translate: 0 12px; opacity: 0; }
  100% { translate: 0 0; opacity: 0; }
}
[data-dizajn="3d"] .film__sipka.prec { opacity: 0; }

[data-dizajn="3d"] .film__zdroj {
  position: absolute;
  z-index: 2;
  right: clamp(1rem, 3vw, 2rem);
  bottom: 0.9rem;
  margin: 0;
  font-size: 0.72rem;
  color: rgba(251, 243, 240, 0.5);
}

/* Menu cez film: pripnuté navrchu, kým je film na obrazovke priehľadné
   so svetlým písmom, potom sa vráti do bežného vzhľadu. */
[data-dizajn="3d"].ma-film .nav {
  position: fixed;
  left: 0;
  right: 0;
  transition: background-color 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}
[data-dizajn="3d"] .nav.nav--film {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
[data-dizajn="3d"] .nav--film .nav__logo,
[data-dizajn="3d"] .nav--film .nav__links a:not(.btn) { color: #FBF3F0; }
[data-dizajn="3d"] .nav--film .nav__logo em { color: #f0a7b0; }
[data-dizajn="3d"] .nav--film .nav__links a:not(.btn):hover { color: #f0a7b0; }
/* Film zaberá miesto, ktoré predtým držalo menu — hlavička pod filmom
   potrebuje odstup, aby jej nadpis neležal pod pripnutým menu. */
[data-dizajn="3d"].ma-film .lhero { padding-top: calc(clamp(4rem, 9vw, 7rem) + 4.5rem); }

/* Mobil na výšku: text dole cez stmavenie zdola. */
@media (max-aspect-ratio: 1/1) {
  [data-dizajn="3d"] .film__scena::after {
    background:
      linear-gradient(180deg, rgba(11, 7, 9, 0.55) 0%, transparent 14%),
      linear-gradient(0deg, rgba(11, 7, 9, 0.9) 0%, rgba(11, 7, 9, 0.55) 32%, transparent 58%);
  }
  [data-dizajn="3d"] .film__krok,
  [data-dizajn="3d"] .film__krok:nth-child(3) {
    left: 1.4rem;
    right: 1.4rem;
    top: auto;
    bottom: 11vh;
    width: auto;
    font-size: clamp(1.6rem, 6.6vw, 2.2rem);
    text-align: left;
    translate: 0 18px;
  }
  [data-dizajn="3d"] .film__krok.je,
  [data-dizajn="3d"] .film__krok:nth-child(3).je { translate: 0 0; }
  [data-dizajn="3d"] .film__heslo { font-size: clamp(2rem, 9vw, 2.8rem); }
}

/* Vypnuté animácie: bez dlhej dráhy — jedna obrazovka s kartičkou,
   vetami a heslom. */
[data-dizajn="3d"] .film--staticky .film__draha { height: auto; }
[data-dizajn="3d"] .film--staticky .film__scena { position: relative; height: auto; min-height: 100svh; }
[data-dizajn="3d"] .film--staticky .film__texty { position: relative; padding: 7rem clamp(1.4rem, 7vw, 7rem) 0; }
[data-dizajn="3d"] .film--staticky .film__krok { position: static; width: auto; opacity: 1; translate: none; margin-bottom: 1rem; text-align: left; }
[data-dizajn="3d"] .film--staticky .film__sipka,
[data-dizajn="3d"] .film--staticky .film__srdce { display: none; }
[data-dizajn="3d"] .film--staticky .film__koniec { position: relative; inset: auto; padding: 2rem 1.4rem 4rem; }