/*
 * vision-blok.css - blok "Vision" (D-034, napad N9), vklada assets/pmc/stranky/vision-blok.php.
 *
 * Vse pres celou obrazovku (100vw x 100vh). Stav sceny nastavuje vision-blok.js jen pres CSS promenne:
 *   na sekci:  --vis-vstup (0..1 roztazeni videa z ramecku), --vis-tma (ztmaveni videa),
 *              --vis-odjezd (0..1 odjezd textu nahoru), --vis-s (meritko plochy), --vis-po (pruhlednost plochy),
 *              --vis-py (parallax plochy), --vis-drift (pootoceni oblouku), --vis-akce, --vis-zaver
 *   na radku textu: --r (0..1 najeti zdola, prolnuti, rozostreni -> ostre)
 *   na panelu: --e (0..1 rozvinuti panelu na oblouk)
 *
 * Geometrie oblouku: divak stoji v ose valce o polomeru --vis-r. Panel = rotateY(--vis-a) translateZ(-R),
 * cela plocha translateZ(+R), takze stredni panel lezi v rovine obrazovky (ostry, bez prerastrovani)
 * a bocni panely se k divakovi stacheji. Kamera (perspective --vis-p) stoji za osou valce.
 *
 * Bez tridy .is-ziva (bez JS, prefers-reduced-motion) plati staticka verze: plakat, nadpis,
 * plocha rovnou rozvinuta, bez sticky.
 */

.vis-blok {
  --vis-delka: 440vh;
  --vis-r: 62vw;                 /* polomer oblouku */
  --vis-p: 140vw;                /* perspektiva (vzdalenost kamery) */
  --vis-hloubka: 60vw;           /* odkud panely priletaji (za plochou) */
  --vis-radius: clamp(10px, 1.05vw, 30px);
  --vis-pozadi: #fff;
  --vis-text: #f5f5f7;
  --vis-pismo-nadpis: ui-rounded, "SF Pro Rounded", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", var(--pmc-pismo, "Helvetica Neue", Helvetica, Arial, sans-serif);

  /* vychozi stav = staticka verze (vse zobrazene) */
  --vis-vstup: 1;
  --vis-tma: .5;
  --vis-odjezd: 0;
  --vis-s: 1;
  --vis-po: 1;
  --vis-py: 0px;
  --vis-drift: 0deg;
  --vis-akce: 1;
  --vis-zaver: 0;

  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  background: var(--vis-pozadi);
  color: var(--vis-text);
  font-family: var(--pmc-pismo, -apple-system, "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif);
  overflow-x: clip;
}
.vis-blok--tmavy { --vis-pozadi: #000; }
.vis-blok *, .vis-blok *::before, .vis-blok *::after { box-sizing: border-box; }

/* ---------- Scena ---------- */
.vis-scena {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--pmc-lista-vyska, 72px) + 6vh) 0 8vh;
}
@supports (height: 100svh) { .vis-scena { min-height: 100svh; } }

.vis-blok.is-ziva { height: var(--vis-delka); }
.vis-blok.is-ziva .vis-scena {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
  padding: 0;
  display: block;
}
@supports (height: 100svh) { .vis-blok.is-ziva .vis-scena { height: 100svh; } }

/* ---------- 1) Video ---------- */
.vis-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #111 var(--vis-poster, none) center / cover no-repeat;
  clip-path: inset(calc((1 - var(--vis-vstup)) * 9vh) calc((1 - var(--vis-vstup)) * 7vw) round calc((1 - var(--vis-vstup)) * 44px + 1px));
}
.vis-video__prvek {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* D-041: bez videa a plakatu = pomalu se prelevajici svetlo (zadne druhe video pod hero) */
.vis-video--svetlo {
  background:
    radial-gradient(60% 55% at 30% 35%, rgba(77, 141, 255, .55) 0%, rgba(77, 141, 255, 0) 70%),
    radial-gradient(55% 60% at 75% 70%, rgba(168, 120, 255, .4) 0%, rgba(168, 120, 255, 0) 70%),
    radial-gradient(70% 70% at 50% 110%, rgba(255, 170, 90, .25) 0%, rgba(255, 170, 90, 0) 70%),
    #05070c;
  background-size: 160% 160%, 160% 160%, 100% 100%, auto;
  animation: vis-svetlo 18s ease-in-out infinite alternate;
}
@keyframes vis-svetlo {
  from { background-position: 0% 0%, 100% 100%, 50% 50%, 0 0; }
  to   { background-position: 100% 60%, 0% 30%, 50% 50%, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .vis-video--svetlo { animation: none; } }
.vis-tma {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 55%, rgba(4, 6, 10, .82) 0%, rgba(4, 6, 10, 1) 100%);
  opacity: var(--vis-tma);
}

/* ---------- 2) Text ---------- */
.vis-text {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 var(--pmc-okraj, 5vw);
  text-align: center;
  pointer-events: none;
}
.vis-blok.is-ziva .vis-text {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate3d(0, calc(-50% - var(--vis-odjezd) * 42vh), 0);
}
.vis-stitek {
  margin: 0 0 .45em;
  font-family: var(--vis-pismo-nadpis);
  font-size: clamp(18px, 1.55vw, 44px);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--vis-text);
}
.vis-nadpis {
  margin: 0;
  font-family: var(--vis-pismo-nadpis);
  font-size: clamp(40px, 5.6vw, 168px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--vis-text);
  text-wrap: balance;
}
.vis-nadpis__radek { display: block; }
.vis-stitek, .vis-nadpis__radek {
  --r: 1;
  opacity: calc(var(--r) * (1 - var(--vis-odjezd) * 1.25));
  transform: translate3d(0, calc((1 - var(--r)) * .55em), 0);
  filter: blur(calc((1 - var(--r)) * 14px + var(--vis-odjezd) * 6px));
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.vis-blok:not(.is-ziva) .vis-stitek,
.vis-blok:not(.is-ziva) .vis-nadpis__radek { filter: none; }

/* ---------- 3) Zakrivena plocha ---------- */
.vis-prostor {
  position: relative;
  z-index: 2;
  width: 100%;
  height: clamp(320px, 62vh, 1100px);
  margin-top: 4vh;
  perspective: var(--vis-p);
  perspective-origin: 50% 46%;
}
.vis-blok.is-ziva .vis-prostor {
  position: absolute;
  inset: 0;
  height: auto;
  margin: 0;
}
.vis-plocha {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
  transform: translate3d(0, var(--vis-py), 0) scale3d(var(--vis-s), var(--vis-s), var(--vis-s)) translateZ(var(--vis-r)) rotateY(var(--vis-drift));
}
.vis-blok.is-ziva .vis-plocha { top: 47%; }

.vis-panel {
  --e: 1;
  --vis-a: 0deg;
  --vis-w: 46vw;
  --vis-y: 0vh;
  --vis-poradi: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--vis-w);
  margin: 0;
  transform-origin: 50% 50%;
  transform:
    translate(-50%, -50%)
    rotateY(calc(var(--vis-a) * (.35 + .65 * var(--e))))
    translateZ(calc(-1 * var(--vis-r) - (1 - var(--e)) * var(--vis-hloubka)))
    translateY(calc(var(--vis-y) + (1 - var(--e)) * 7vh));
  opacity: calc(var(--e) * var(--vis-po));
  backface-visibility: hidden;
}
/* Pozice: 0 stred (velky), 1 vlevo, 2 vpravo, 3 vlevo dal, 4 vpravo dal */
.vis-panel--0 { --vis-w: 46vw; --vis-a: 0deg;   --vis-y: -1vh; z-index: 3; }
.vis-panel--1 { --vis-w: 25vw; --vis-a: 34deg;  --vis-y: 4vh;  z-index: 2; }
.vis-panel--2 { --vis-w: 25vw; --vis-a: -34deg; --vis-y: 2vh;  z-index: 2; }
.vis-panel--3 { --vis-w: 19vw; --vis-a: 56deg;  --vis-y: -7vh; z-index: 1; }
.vis-panel--4 { --vis-w: 19vw; --vis-a: -56deg; --vis-y: -5vh; z-index: 1; }

.vis-okno {
  position: relative;
  display: block;
  border-radius: var(--vis-radius);
  overflow: hidden;
  background: rgba(36, 38, 44, .55);
  box-shadow:
    0 clamp(16px, 2vw, 50px) clamp(40px, 5vw, 130px) rgba(0, 0, 0, .5),
    0 2px 8px rgba(0, 0, 0, .3);
}
.vis-okno img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 0;
}
/* sklo: jemny okraj a odlesk */
.vis-okno::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .26);
  background: linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .06) 100%);
  pointer-events: none;
}
.vis-panel__nazev,
.vis-panel__uchop {
  display: table;
  margin: clamp(8px, .7vw, 18px) auto 0;
  padding: .35em 1em;
  border-radius: 999px;
  background: rgba(40, 42, 48, .55);
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .92);
  font-size: clamp(12px, .78vw, 20px);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  white-space: nowrap;
}
.vis-panel__uchop { width: 14%; min-width: 40px; height: 6px; padding: 0; border: 0; background: rgba(255, 255, 255, .45); }
.vis-panel__odkaz { display: block; color: inherit; text-decoration: none; border-radius: var(--vis-radius); }
.vis-panel__odkaz:focus-visible { outline: 3px solid #4da3ff; outline-offset: 4px; }
.vis-panel__odkaz:hover .vis-okno::after { border-color: rgba(255, 255, 255, .5); }

/* Tlacitko pod plochou */
.vis-akce {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(28px, 7vh, 110px);
  margin: 0;
  text-align: center;
  z-index: 4;
  opacity: calc(var(--vis-akce) * var(--vis-po));
  transform: translate3d(0, calc((1 - var(--vis-akce)) * 20px), 0);
}
.vis-blok:not(.is-ziva) .vis-scena { padding-bottom: calc(8vh + 4em); }
.vis-blok:not(.is-ziva) .vis-prostor { height: max(34vw, 360px); }
.vis-blok:not(.is-ziva) .vis-akce { top: 100%; bottom: auto; margin-top: 2vh; }
.vis-blok.is-ziva .vis-akce { pointer-events: none; }
.vis-blok.is-ziva.is-akce .vis-akce { pointer-events: auto; }
.vis-akce__tl {
  display: inline-block;
  padding: .8em 1.6em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #111;
  font-size: var(--pmc-fs-text, clamp(16px, calc(.83vw + 2px), 24px));
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s linear;
}
.vis-akce__tl:hover { background: #fff; }
.vis-akce__tl:focus-visible { outline: 3px solid #4da3ff; outline-offset: 3px; }

/* ---------- 4) Dobeh do barvy pozadi ---------- */
.vis-zaver {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--vis-pozadi);
  opacity: var(--vis-zaver);
  pointer-events: none;
}
.vis-blok:not(.is-ziva) .vis-zaver { display: none; }

/* Pauza / prehrat videa */
.vis-pauza {
  position: absolute;
  z-index: 6;
  right: var(--pmc-okraj, 4vw);
  bottom: clamp(20px, 4vh, 60px);
  width: clamp(40px, 2.5vw, 60px);
  height: clamp(40px, 2.5vw, 60px);
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  background: rgba(0, 0, 0, .3);
  color: #fff;
  cursor: pointer;
  opacity: calc(1 - var(--vis-zaver));
}
.vis-pauza[hidden] { display: none; }
.vis-pauza:hover { background: rgba(0, 0, 0, .55); }
.vis-pauza:focus-visible { outline: 3px solid #4da3ff; outline-offset: 3px; }
.vis-pauza span { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.vis-pauza[aria-pressed="true"] span { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent currentColor; margin-left: 3px; }

/* Vykon: will-change jen pri aktivni scene */
.vis-blok.is-aktivni .vis-panel,
.vis-blok.is-aktivni .vis-text { will-change: transform, opacity; }
.vis-blok.is-aktivni .vis-plocha { will-change: transform; } /* bez opacity: ta by zplostila preserve-3d */
.vis-blok.is-aktivni .vis-tma,
.vis-blok.is-aktivni .vis-zaver { will-change: opacity; }

/* ---------- Siroke okno: o kousek mene zakriveni, vetsi stred ---------- */
@media (min-aspect-ratio: 2/1) {
  .vis-panel--0 { --vis-w: 40vw; }
  .vis-panel--1, .vis-panel--2 { --vis-w: 22vw; }
  .vis-panel--1 { --vis-a: 31deg; }
  .vis-panel--2 { --vis-a: -31deg; }
  .vis-panel--3 { --vis-w: 17vw; --vis-a: 53deg; }
  .vis-panel--4 { --vis-w: 17vw; --vis-a: -53deg; }
}

/* ---------- Vyssi nez siroke okno (tablet na vysku, mobil): 1 velky nahore + 2 mensi pod nim v malem oblouku ---------- */
@media (max-aspect-ratio: 5/4), (max-width: 760px) {
  .vis-blok { --vis-r: 120vw; --vis-p: 190vw; --vis-hloubka: 90vw; --vis-delka: 400vh; }
  .vis-panel--0 { --vis-w: 86vw; --vis-a: 0deg;   --vis-y: -9vh; }
  .vis-panel--1 { --vis-w: 40vw; --vis-a: 10.8deg;  --vis-y: 11vh; }
  .vis-panel--2 { --vis-w: 40vw; --vis-a: -10.8deg; --vis-y: 11vh; }
  .vis-panel--3, .vis-panel--4 { display: none; }
  .vis-panel__nazev { font-size: 12px; padding: .3em .8em; }
  .vis-blok.is-ziva .vis-plocha { top: 46%; }
  .vis-blok:not(.is-ziva) .vis-prostor { height: max(118vw, 360px); }
  .vis-blok:not(.is-ziva) .vis-plocha { top: 45%; }
  .vis-nadpis { font-size: clamp(36px, 10.5vw, 96px); }
  .vis-stitek { font-size: clamp(16px, 4.4vw, 32px); }
  .vis-video { clip-path: inset(calc((1 - var(--vis-vstup)) * 5vh) calc((1 - var(--vis-vstup)) * 5vw) round calc((1 - var(--vis-vstup)) * 28px + 1px)); }
}
@media (max-width: 760px) and (min-aspect-ratio: 5/4) {
  /* telefon na sirku: nizka plocha */
  .vis-panel--0 { --vis-w: 52vw; --vis-y: 0vh; }
  .vis-panel--1 { --vis-w: 26vw; --vis-a: 30deg; --vis-y: 2vh; }
  .vis-panel--2 { --vis-w: 26vw; --vis-a: -30deg; --vis-y: 2vh; }
}

@media (prefers-reduced-motion: reduce) {
  .vis-stitek, .vis-nadpis__radek { filter: none; }
}