/* ═══════════════════════════════════════════════════════════════════════
   MOTION LAYER — cinematic surface pro noedis.me/lukasplant
   Načítá se po styles.css (tokeny zůstávají v styles.css).

   01  preloader / page-load choreografie
   02  kurzor (tečka + prstenec + kontextový label)
   03  textové revealy (slova a znaky v maskách)
   04  hero: hloubka, revolve (3D), světlo, vstup
   05  přechody sekcí a marquee
   06  mikrointerakce (karty, tlačítka, pole, volby)
   07  reduced-motion a dotykové varianty
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ AURA · světelné pole v hero ══════════════════════════════════ */
.aura{position:absolute;inset:0;width:100%;pointer-events:none;z-index:1;mix-blend-mode:screen;opacity:.6}
html[data-theme="light"] .aura{mix-blend-mode:multiply;opacity:.28}

/* ═══ POČÍTADLO NAČÍTÁNÍ + RŮST VÝHONKU ═════════════════════════════ */
.preload__num{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.22em;color:var(--ink-ghost);margin:14px 0 0}
.preload__num i{font-style:normal;opacity:.5}
.preload__mark-img{transform-origin:50% 100%;animation:plant-grow 1.15s var(--ease-out) both}
@keyframes plant-grow{0%{transform:scale(.35) translateY(14px);opacity:0}55%{opacity:1}100%{transform:scale(1);opacity:1}}

/* ═══ SPRING PŘÍCHOD CHIPŮ V HERO ══════════════════════════════════ */
.hero__chips li{animation:chip-pop .72s var(--spring) both}
.hero__chips li:nth-child(2){animation-delay:.06s}
.hero__chips li:nth-child(3){animation-delay:.12s}
.hero__chips li:nth-child(4){animation-delay:.18s}
.hero__chips li:nth-child(5){animation-delay:.24s}
@keyframes chip-pop{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}

/* ═══ SCROLL-DRIVEN ANIMACE (nativní, motion.dev styl) ══════════════ */
@supports (animation-timeline: view()){
  .card__num{animation:num-in linear both;animation-timeline:view();animation-range:entry 6% cover 28%}
  @keyframes num-in{from{opacity:0;transform:translateY(16px) rotate(-9deg)}to{opacity:1;transform:none}}
  .foot__big{animation:foot-in linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  @keyframes foot-in{from{opacity:.25;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .hero__chips li,.card__num,.chips li,.foot__big{animation:none!important;opacity:1!important;transform:none!important}
}

/* ═══ SPRING TOKENY (motion.dev styl) ══════════════════════════════ */
:root{--spring:cubic-bezier(.34,1.5,.64,1);--spring-soft:cubic-bezier(.22,1,.36,1)}

/* ═══ VIEW TRANSITIONS (přepnutí denního režimu) ═══════════════════ */
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root){animation-name:vt-out}
::view-transition-new(root){animation-name:vt-in}
@keyframes vt-out{to{opacity:0;transform:scale(.985)}}
@keyframes vt-in{from{opacity:0;transform:scale(1.015)}}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .preload__mark-img{animation:none}
}

:root {
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .28s;
  --t-mid: .6s;
  --t-slow: 1s;
}

body { cursor: default; }
@media (pointer: fine) {
  body.is-ready { cursor: none; }
  input, textarea, select { cursor: auto; }
}

/* ═══ 01 · PRELOADER ════════════════════════════════════════════════ */
.preload {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--void);
  overflow: hidden;
}
.preload::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 50% 40%, rgba(45,212,191,.16), transparent 70%),
    radial-gradient(40% 40% at 78% 70%, rgba(153,246,228,.14), transparent 70%);
}
.preload__inner { position: relative; display: grid; justify-items: center; gap: 22px; text-align: center; }
.preload__mark {
  font-family: var(--display); font-weight: 900; font-size: 13px;
  letter-spacing: .34em; text-transform: uppercase; color: var(--ink-mute);
}
.preload__name {
  font-family: var(--display); font-weight: 900; font-size: clamp(30px, 6vw, 58px);
  letter-spacing: -.03em; line-height: 1;
  background: var(--grad-gateway); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pl-rise .9s var(--ease-out) both;
}
.preload__bar { width: min(260px, 46vw); height: 2px; background: rgba(255,255,255,.10); border-radius: 99px; overflow: hidden; }
.preload__bar b { display: block; height: 100%; width: 0; background: var(--spectrum); animation: pl-fill 1.05s var(--ease-soft) .1s forwards; }
.preload__tag { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-ghost); }
@keyframes pl-rise { from { opacity: 0; transform: translateY(18px); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pl-fill { to { width: 100%; } }

/* opona: celý preloader se vysune nahoru jako závěs */
.preload { transition: transform .78s var(--ease-out); }
.preload.is-done { transform: translateY(-100%); }
.preload.is-done .preload__inner { opacity: 0; transform: translateY(-14px); transition: opacity .3s ease, transform .5s var(--ease-out); }

/* tělo je uzamčené, dokud se nenačte */
body:not(.is-ready) { overflow: hidden; }

/* ═══ 02 · KURZOR ═══════════════════════════════════════════════════ */
.cursor { position: fixed; inset: 0; z-index: 120; pointer-events: none; display: none;
  width: 100vw; height: 100vh; margin: 0; background: none; border: 0; filter: none; transform: none; }
@media (pointer: fine) {
  .cursor { display: block; }
}
.cursor::before, .cursor::after { content: ""; position: fixed; border-radius: 50%; }
/* tečka */
.cursor::before {
  left: var(--cx, 50%); top: var(--cy, 50%);
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  background: var(--cyan); box-shadow: 0 0 14px rgba(127,240,230,.9);
  transition: width .25s var(--ease-out), height .25s var(--ease-out), background .25s;
}
/* prstenec + světlo */
.cursor::after {
  left: var(--rx, 50%); top: var(--ry, 50%);
  width: 300px; height: 300px; margin: -150px 0 0 -150px;
  background: radial-gradient(circle, rgba(127,240,230,.10), rgba(45,212,191,.05) 42%, transparent 68%);
  border: 1px solid rgba(127,240,230,.16);
  transition: width .4s var(--ease-out), height .4s var(--ease-out), border-color .3s, background .3s;
}
.cursor.is-hot::after {
  width: 380px; height: 380px; margin: -190px 0 0 -190px;
  border-color: rgba(176,124,255,.34);
  background: radial-gradient(circle, rgba(176,124,255,.14), rgba(45,212,191,.06) 44%, transparent 70%);
}
.cursor.is-hot::before { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: #fff; }
.cursor__label {
  position: fixed; left: var(--cx, 50%); top: var(--cy, 50%);
  transform: translate(14px, 14px) scale(.9);
  padding: 5px 10px; border-radius: 99px;
  background: rgba(7,16,38,.92); border: 1px solid var(--line-2);
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  opacity: 0; transition: opacity .25s, transform .35s var(--ease-out);
  white-space: nowrap; backdrop-filter: blur(8px);
}
.cursor__label.is-on { opacity: 1; transform: translate(14px, 14px) scale(1); }

/* ═══ 03 · TEXT-SPLIT REVEALY ═══════════════════════════════════════ */
.u-word { display: inline-block; overflow: hidden; vertical-align: bottom;
  /* Ořezový rámeček musí být vyšší než text — jinak uřízne háček u „š"
     nebo kroužek u „ů" vodorovně (stalo se u jména Lukáš). */
  padding-block: .38em; margin-block: -.38em; }
.u-word-in {
  display: inline-block; transform: translateY(112%);
  transition: transform .95s var(--ease-out);
}
.u-word.is-on .u-word-in { transform: none; }
.u-char {
  display: inline-block; opacity: 0; transform: translateY(70%) rotateX(-70deg);
  transform-origin: 50% 100%;
  transition: opacity .5s var(--ease-out), transform .7s var(--ease-out);
}
.u-word.is-on .u-char { opacity: 1; transform: none; }
/* Gradientový nadpis se dělí na slova — gradient proto musí nést každý
   vnitřní span sám. Když zůstane jen na rodiči, jsou slova průhledná
   (color:transparent) a v nadpisu chybí. */
.grad-text .u-word-in,
.grad-text.is-split .u-word-in {
  background: var(--grad-gateway);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ═══ 04 · HERO: hloubka, světlo, revolve ═══════════════════════════ */
.hero { position: relative; }
.hero__inner { position: relative; z-index: 3; }
[data-enter] {
  opacity: 0; transform: translateY(30px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
[data-enter].is-in { opacity: 1; transform: none; }

/* světelné vrstvy za jménem */
.hero__light {
  position: absolute; pointer-events: none; border-radius: 50%; filter: blur(90px);
  z-index: 1; will-change: transform;
}
.hero__light--1 { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; left: 4%; top: 12%;
  background: radial-gradient(circle, rgba(45,212,191,.30), transparent 68%); }
.hero__light--2 { width: 34vw; height: 34vw; max-width: 460px; max-height: 460px; right: 8%; top: 40%;
  background: radial-gradient(circle, rgba(204,251,241,.18), transparent 70%); }

/* 3D revolve s oblastmi */
.revolve {
  position: absolute; right: clamp(24px, 9vw, 170px); top: 50%; z-index: 2;
  width: 260px; height: 190px; margin-top: -95px;
  perspective: 1500px; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.revolve__stage {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: revolve-spin 34s linear infinite;
}
.revolve__face {
  position: absolute; inset: 0; margin: auto;
  width: 214px; height: 138px;
  display: grid; align-content: center; gap: 7px; padding: 17px;
  border-radius: 16px; border: 1px solid var(--line-2);
  background: linear-gradient(160deg, rgba(13,26,49,.92), rgba(5,11,24,.86));
  box-shadow: 0 30px 60px -40px #000, inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
  backface-visibility: hidden;
}
.revolve__face b { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: -.01em; }
.revolve__face span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-ghost); }
.revolve__face i { position: absolute; left: 20px; right: 20px; top: 0; height: 2px; border-radius: 99px; background: var(--accent, var(--grad-gateway)); }
.revolve__face--1 { transform: rotateY(0deg)   translateZ(176px); --accent: var(--framework); }
.revolve__face--2 { transform: rotateY(60deg)  translateZ(176px); --accent: var(--system); }
.revolve__face--3 { transform: rotateY(120deg) translateZ(176px); --accent: var(--cyan); }
.revolve__face--4 { transform: rotateY(180deg) translateZ(176px); --accent: var(--product); }
.revolve__face--5 { transform: rotateY(240deg) translateZ(176px); --accent: var(--hub); }
.revolve__face--6 { transform: rotateY(300deg) translateZ(176px); --accent: var(--green); }
@keyframes revolve-spin { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); } }
@media (max-width: 1080px) { .revolve { display: none; } }

/* scroll cue */
.scroll-cue span { animation: cue 2.2s var(--ease-soft) infinite; }
@keyframes cue {
  0%   { transform: translateY(-6px); opacity: 0; }
  40%  { transform: translateY(0);    opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}

/* ═══ 05 · PŘECHODY SEKCÍ A MARQUEE ═════════════════════════════════ */
.sec { position: relative; }
.sec::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--grad-gateway); opacity: .28;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 1.3s var(--ease-out);
}
.sec.is-seen::before { transform: scaleX(1); }
.sec__head .u-word-in { transition-duration: 1.05s; }

/* jemný náklon podle rychlosti scrollu */
[data-skew] { will-change: transform; }
[data-par] { will-change: transform; }

.marquee {
  position: relative; overflow: hidden; padding: 22px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(7,16,38,.6), rgba(3,6,15,.2));
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex; width: max-content; gap: 46px;
  animation: marquee 34s linear infinite;
}
.marquee__track span {
  font-family: var(--display); font-weight: 800; font-size: clamp(15px, 2vw, 26px);
  letter-spacing: -.01em; color: var(--ink-mute); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 46px;
}
.marquee__track span::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px rgba(127,240,230,.7);
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ═══ 06 · MIKROINTERAKCE ═══════════════════════════════════════════ */
/* spotlight uvnitř karet podle kurzoru */
.card, .ref, .steps li { position: relative; }
.card::after {
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent, var(--cyan)) 22%, transparent), transparent 62%) !important;
  opacity: 0; transition: opacity .45s var(--ease-soft);
}
.card:hover::after { opacity: 1; }
.card { transition: transform .5s var(--ease-out), border-color .4s, box-shadow .5s var(--ease-out); }

.ref, .steps li {
  transition: transform .5s var(--ease-out), border-color .4s, background .5s;
}
.ref:hover, .steps li:hover { transform: translateY(-3px); }

/* tlačítka: přejezd světla + stav nahrávání */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.28) 46%, transparent 72%);
  transform: translateX(-120%); transition: transform .8s var(--ease-out);
}
.btn:hover::before { transform: translateX(120%); }
.btn.is-loading { pointer-events: none; }
.btn.is-loading > span:first-child::after {
  content: ""; display: inline-block; vertical-align: -1px; margin-left: 9px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* volby v poptávce */
.opt { transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), background var(--t-fast); }
.opt:hover { transform: translateY(-2px); }
.opt input:checked + span { position: relative; }
.opt input:checked + span::before {
  content: ""; position: absolute; inset: -7px -12px; border-radius: 99px;
  border: 1px solid var(--cyan); opacity: .55;
  animation: opt-pop .45s var(--ease-out);
}
@keyframes opt-pop { from { transform: scale(.82); opacity: 0; } to { transform: scale(1); opacity: .55; } }

/* pole: světelný obrys při fokusu */
.field input, .field textarea, .field select { transition: border-color .3s, box-shadow .4s var(--ease-out), background .3s; }
.field input:focus, .field textarea:focus, .field select:focus {
  box-shadow: 0 0 0 3px rgba(127,240,230,.12), 0 12px 34px -22px rgba(127,240,230,.6);
}

/* čísla a jemné detaily */
.stat b { font-variant-numeric: tabular-nums; }
::selection { background: rgba(127,240,230,.28); color: #fff; }

/* scrollbar */
* { scrollbar-width: thin; scrollbar-color: rgba(127,240,230,.28) transparent; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(45,212,191,.5), rgba(153,246,228,.5)); border-radius: 99px; border: 2px solid var(--void); }

/* jiskry v animaci spuštění */
.spark {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  animation: spark 1.6s var(--ease-out) forwards; pointer-events: none;
}
@keyframes spark {
  0%   { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); opacity: 0; }
}
body.is-locked { overflow: hidden; }

/* ═══ 07 · PŘÍSTUPNOST A DOTYK ══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  [data-enter], .u-word-in, .u-char { opacity: 1 !important; transform: none !important; }
  .cursor { display: none !important; }
  body.is-ready { cursor: default; }
  .revolve__stage { animation: none; }
  .revolve__face--1, .revolve__face--6 { opacity: 1; }
  .sec::before { transform: scaleX(1); }
}
@media (max-width: 900px), (pointer: coarse) {
  .cursor { display: none !important; }
  [data-par], [data-skew] { transform: none !important; }
  .marquee__track { animation-duration: 22s; }
}