/* =========================================================
   Ella / baflekcz — vrstva pohybu (motion layer)
   Doplněk k style.css. Nemění barvy, písma ani text —
   jen to, jak se věci hýbou.

   Architektura (viz motion.js):
     VRSTVA 1  #main a obsah stránky        (normální tok)
     VRSTVA 2  .curtain                     z-index 400
     VRSTVA 3  .cursor, .blend-bar          z-index 500 / 200

   Vrstvy 2 a 3 jsou přímí potomci <body>. Nikdy nesmí ležet
   uvnitř prvku, který animuje transform / filter / opacity —
   takový prvek vytvoří nový containing block a fixed overlay
   by se začal posouvat spolu se stránkou.
   ========================================================= */

/* ---------- 1. Tokeny pohybu (jediný zdroj pravdy) ---------- */
:root {
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-in:     cubic-bezier(.7, 0, .84, 0);

  --dur-micro:   .25s;
  --dur-base:    .6s;
  --dur-slow:    .9s;
  --dur-curtain: 1.1s;

  --stagger-word: .04s;
  --stagger-item: .06s;

  /* výška spodního blend pásu — o tolik se zvedne plovoucí CTA */
  --blend-bar-h: 0px;   /* přepne se na výšku pásu, až se pás objeví */
}

/* =========================================================
   2. VRSTVA 2 — opona mezi stránkami (§5.C)
   Dvě plochy v barvě pozadí se zavřou přes viewport, stránka
   se vymění za nimi a plochy se zase otevřou. Animuje se
   jediná vlastnost (height) na dvou prvcích.
   ========================================================= */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
}
.curtain__panel {
  position: absolute;
  left: 0;
  width: 100%;
  /* 50.5 % místo 50 % — půl procenta zabije subpixelovou spáru
     na displejích s vysokým DPI */
  height: 50.5%;
  background: var(--bg);
  /* Animuje se scaleY, ne height. Výška by byla změna layoutu:
     prohlížeč by ji započítal do CLS a přepočítal na každý snímek.
     scaleY je čistý transform — jede na kompozitoru a CLS je nula. */
  transform: scaleY(0);
  transition: transform var(--dur-base) var(--ease-in-out);
}
.curtain__panel--top    { top: 0;    transform-origin: top; }
.curtain__panel--bottom { bottom: 0; transform-origin: bottom; }

.curtain.is-closed .curtain__panel { transform: scaleY(1); }

/* Odchod na jinou stránku smí být pomalejší než příchod:
   opona tam schovává překreslení nové stránky. */
.curtain.is-leaving .curtain__panel { transition-duration: var(--dur-curtain); }

/* =========================================================
   3. VRSTVA 3 — kurzor (§5.J)
   Jen na zařízeních s myší. mix-blend-mode: difference znamená,
   že je kurzor čitelný na každém podkladu bez jediné podmínky.
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  html.cursor-none,
  html.cursor-none * { cursor: none; }
}

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 500;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  pointer-events: none;
  mix-blend-mode: difference;
  display: grid;
  place-content: center;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  will-change: transform;
  transition:
    width   var(--dur-micro) var(--ease-out),
    height  var(--dur-micro) var(--ease-out),
    opacity .2s ease;
}
.cursor.is-visible { opacity: 1; }
.cursor__label { opacity: 0; transition: opacity .15s ease; }
.cursor.is-wide .cursor__label { opacity: 1; }

/* =========================================================
   4. VRSTVA 3 — spodní běžící pás v blend režimu (§5.I)
   ========================================================= */
.blend-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 200;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: difference;
  color: #fff;
  /* Pevná výška znamená, že --blend-bar-h nemusí nic měřit:
     plovoucí CTA se posadí rovnou nad pás a nic sebou necukne. */
  height: 42px;
  display: flex;
  align-items: center;
  transform: translateY(120%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.blend-bar.is-visible { transform: translateY(0); }

.blend-bar__track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: blend-marquee 34s linear infinite;
}
.blend-bar__item {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}
.blend-bar__dash {
  flex-shrink: 0;
  width: clamp(30px, 2.6vw, 50px);
  height: clamp(2px, .26vw, 4px);
  background: currentColor;
  margin: 0 clamp(10px, 1.2vw, 24px);
}
@keyframes blend-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Plovoucí CTA se zvedne nad pás, aby ho nepřekrýval. */
.cta-float { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + var(--blend-bar-h)); }
@media (min-width: 940px) {
  .cta-float { bottom: calc(1.6rem + var(--blend-bar-h)); }
}

/* =========================================================
   5. Ukazatel průběhu čtení (§5.K)
   ========================================================= */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 300;
  pointer-events: none;
  background: var(--accent);
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  will-change: transform;
}

/* =========================================================
   6. Nadpis po slovech (§5.E) — jen nadpisy, nikdy odstavce
   Slova vyjíždějí zpod masky. Žádné prolínání: práci odvede
   maska. Ten jeden detail dělá většinu rozdílu mezi
   „animovaným" a „drahým".
   ========================================================= */
.mtx-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.mtx-inner {
  display: inline-block;
  white-space: pre;
  transform: translateY(115%);
  transition: transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger-word));
}
.is-revealed .mtx-inner { transform: translateY(0); }

/* =========================================================
   7. Odkrytí maskou přes clip-path (§5.G)
   Levnější než animovat výšku a nikdy nespustí layout.
   ========================================================= */
[data-reveal="clip"] {
  --mask-progress: 0;
  clip-path: inset(0 0 calc((100 - var(--mask-progress)) * 1%) 0);
}

/* =========================================================
   8. Postupné odkrývání skupin (§5.E)
   Rozestup dělá seznam živým, aniž by se cokoli hýbalo v layoutu.
   ========================================================= */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
[data-stagger].is-revealed > * {
  opacity: 1;
  transform: none;
}
[data-stagger].is-revealed > *:nth-child(1) { transition-delay: calc(0 * var(--stagger-item)); }
[data-stagger].is-revealed > *:nth-child(2) { transition-delay: calc(1 * var(--stagger-item)); }
[data-stagger].is-revealed > *:nth-child(3) { transition-delay: calc(2 * var(--stagger-item)); }
[data-stagger].is-revealed > *:nth-child(4) { transition-delay: calc(3 * var(--stagger-item)); }
[data-stagger].is-revealed > *:nth-child(5) { transition-delay: calc(4 * var(--stagger-item)); }
[data-stagger].is-revealed > *:nth-child(6) { transition-delay: calc(5 * var(--stagger-item)); }
[data-stagger].is-revealed > *:nth-child(n+7) { transition-delay: calc(6 * var(--stagger-item)); }

/* =========================================================
   9. Paralaxa (§5.H)
   Hloubka vzniká z rozdílu rychlostí, ne z velkého pohybu.
   Na tělo textu se nikdy nepoužívá — zhoršuje čtení.
   ========================================================= */
[data-parallax] > * { will-change: transform; }

/* =========================================================
   10. Rámeček videa v hero sekci — podpisový moment (§5.F)
   Video se nikdy nezvětšuje. Vyplňuje celou plochu a je
   oříznuté maskou; při scrollu se otevírá jen ta maska.
   Proto to působí jako clona, ne jako zoom.
   ========================================================= */
.hero__video {
  --frame: 0;                      /* 0 = rámeček, 1 = celá plocha */
  --frame-inset: 5vw;
  --frame-radius: var(--radius-lg);
  clip-path: inset(
    calc(var(--frame-inset) * (1 - var(--frame)))
    calc(var(--frame-inset) * (1 - var(--frame)))
    calc(var(--frame-inset) * (1 - var(--frame)))
    calc(var(--frame-inset) * (1 - var(--frame)))
    round calc(var(--frame-radius) * (1 - var(--frame)))
  );
}
@media (max-width: 720px) {
  .hero__video { --frame-inset: 3vw; }
}

/* =========================================================
   11. Magnetická tlačítka (§5.D)
   Obal je magnetické pole: neviditelné, neklikatelné.
   Posun drží obal, takže vlastní :hover transform tlačítka
   (translateY) zůstává nedotčený.
   ========================================================= */
.magnet {
  /* Obal musí v layoutu zabírat přesně to co tlačítko — ani pixel navíc.
     Padding by z něj udělal jiný flex item a tlačítko by přestalo
     dorovnávat výšku sousedům (51 → 49 px). Magnetické pole proto
     nese pseudoprvek, který se layoutu nedotýká vůbec. */
  display: inline-flex;
  position: relative;
}
.magnet::before {
  content: "";
  position: absolute;
  inset: -26px;          /* dosah magnetu */
}
.magnet__pull {
  display: inline-flex;
  /* nad pseudoprvkem, jinak by pole polykalo kliknutí */
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  will-change: transform;
}
.magnet__pull > * { flex: 1 1 auto; }

/* =========================================================
   12. Mikrointerakce (§5.K)
   ========================================================= */

/* Podtržení odkazu: najede zleva, odjede doprava */
.link-wipe { position: relative; display: inline-block; }
.link-wipe::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.link-wipe:hover::after,
.link-wipe:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* Médium dýchá, rámeček drží */
.media-hover { overflow: hidden; }
.media-hover > img,
.media-hover > video,
.media-hover > .video-card__thumb {
  transition: transform .7s var(--ease-out);
}
.media-hover:hover > img,
.media-hover:hover > video,
.media-hover:hover > .video-card__thumb { transform: scale(1.04); }

/* =========================================================
   13. Přístupnost — vše výše se vypíná najednou (§4)
   Obsah zůstává čitelný a dosažitelný, jen se nehýbe.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .cursor,
  .blend-bar,
  .scroll-progress { display: none !important; }

  .curtain { display: none !important; }

  .mtx-inner { transform: none !important; transition: none !important; }

  [data-reveal="clip"] { clip-path: none !important; }

  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  [data-parallax] > * { transform: none !important; }

  .hero__video { clip-path: none !important; }

  .magnet__pull { transform: none !important; }

  .blend-bar__track { animation: none !important; }
}

/* Bez JavaScriptu se nic neskrývá. */
html:not(.js) .mtx-inner { transform: none; }
html:not(.js) [data-stagger] > * { opacity: 1; transform: none; }
html:not(.js) [data-reveal="clip"] { clip-path: none; }