/* ╔═══════════════════════════════════════════════════════════════╗
   ║  NAVRHWEB — MOTION LIBRARY  ·  navrh-motion.css                  ║
   ║  Centrální phantom-grade motion vrstva. Jeden zdroj pravdy.     ║
   ║  Žádný projekt nedělá vlastní animace, když existuje device.    ║
   ║  Self-contained, zero deps. Přebij --c1/--c2/--accent per brand.║
   ╚═══════════════════════════════════════════════════════════════╝ */
:root{
  /* DUOTONE — přepiš per brand */
  --c1:#F1ECE3;            /* ink */
  --c2:#0b0b0d;            /* paper/bg */
  --accent:#C9A24B;
  --accent2:#e7cd8c;
  --hair:color-mix(in srgb, var(--c1) 14%, transparent);
  --muted:color-mix(in srgb, var(--c1) 60%, transparent);
  --radius:40px;
  /* EASE SLOVNÍK (zákon — žádné ease/linear/náhodné beziery) */
  --e-sig:cubic-bezier(.7,0,.2,1);     /* signature reveal */
  --ease:cubic-bezier(.16,1,.3,1);     /* standard out */
  --e-list:cubic-bezier(0,.81,.22,1);  /* list stagger */
  --e-hero:cubic-bezier(.53,.02,0,1);
  --e-over:cubic-bezier(.93,-.24,.4,1.17);
  --f-d:'Space Grotesk',ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  --f-s:'Cormorant Garamond',Georgia,"Times New Roman",serif;
  --f-m:'Space Mono',ui-monospace,"SF Mono",Menlo,monospace;
}
.nm-on *{box-sizing:border-box}

/* ── 02/15 SPLIT TEXT / LINE-MASK REVEAL (CZ-diakritika safe) ── */
.nm-lm{display:block;overflow:hidden;padding:.14em 0 .06em;margin:-.14em 0 -.06em}
.nm-lm>span{display:block;transform:translateY(112%);transition:transform .8s var(--e-sig);transition-delay:calc(var(--i,0)*.08s)}
.is-in .nm-lm>span,.nm-ready .nm-lm>span{transform:none}
.nm-split [data-ch]{display:inline-block;transform:translateY(110%);opacity:0;transition:transform .7s var(--e-sig),opacity .7s var(--e-sig);transition-delay:calc(var(--i,0)*.022s)}
.nm-split.is-in [data-ch]{transform:none;opacity:1}

/* ── reveal (fade-up, stagger via --i) ── */
.nm-rv{opacity:0;transform:translateY(24px);transition:opacity .55s var(--e-list),transform .55s var(--e-list);transition-delay:calc(var(--i,0)*.06s)}
.is-in .nm-rv,.nm-ready .nm-rv{opacity:1;transform:none}
.nm-sec{opacity:0;transition:opacity .6s var(--ease)}
.nm-sec.is-in{opacity:1}

/* ── 13 MAGNETIC BUTTON ── */
.nm-btn{position:relative;display:inline-flex;align-items:center;gap:.6em;padding:1.05em 2.2em;border-radius:var(--radius);
  font-family:var(--f-m);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  border:1px solid var(--hair);background:transparent;color:var(--c1);cursor:pointer;
  transition:transform .3s var(--e-over),background .3s var(--ease),color .35s,border-color .3s}
.nm-btn:hover{transform:translateY(-2px)}.nm-btn:active{transform:scale(.96)}
.nm-btn--solid{background:var(--accent);color:var(--c2);border-color:var(--accent)}
.nm-btn--solid:hover{filter:brightness(1.08)}

/* ── 14 RESULT REVEAL (count-up target gets tabular nums) ── */
.nm-count{font-variant-numeric:tabular-nums}

/* ── 01 PIXEL REVEAL (canvas mosaic→sharp pro <img data-motion="pixel-reveal">) ── */
.nm-pixel{position:relative;display:block;overflow:hidden}
.nm-pixel canvas{display:block;width:100%;height:auto}
.nm-pixel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease)}
.nm-pixel.is-done img{opacity:1}

/* ── 16 PARALLAX LAYERS ── */
.nm-parallax{will-change:transform}

/* ── 17 AMBIENT MOTION (jemný věčný float) ── */
@keyframes nm-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.nm-ambient{animation:nm-float 6s ease-in-out infinite}
.nm-ambient--slow{animation-duration:9s}.nm-ambient--fast{animation-duration:4s}

/* ── 10 FLOATING OBJECTS ── */
.nm-floaters{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.nm-floaters i{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--accent2),transparent 70%);opacity:.5;animation:nm-float 8s ease-in-out infinite}

/* ── 12 FULLSCREEN TRANSITION ── */
.nm-trans{position:fixed;inset:0;z-index:9000;background:var(--c2);transform:translateY(100%);pointer-events:none}
.nm-trans.is-in{transform:translateY(0);transition:transform .5s var(--e-sig)}
.nm-trans.is-out{transform:translateY(-100%);transition:transform .5s var(--e-sig)}

/* ── 18 VIDEO TEXTURE LAYER ── */
.nm-videotex{position:relative;overflow:hidden}
.nm-videotex video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) brightness(.9)}
.nm-videotex>.nm-vt-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,13,.3),transparent 40%,rgba(11,11,13,.7))}

/* ── HAIRLINE GRID (chrome podpis) ── */
.nm-hairgrid{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.nm-hairgrid>*{background:var(--c2)}
.nm-rule{height:1px;background:var(--hair);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.is-in .nm-rule{transform:scaleX(1)}

/* ── CUSTOM CURSOR (desktop) ── */
.nm-cursor{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--accent);
  pointer-events:none;z-index:9100;mix-blend-mode:difference;transform:translate(-50%,-50%);will-change:transform}
.nm-cursor .nm-chip{position:absolute;left:16px;top:-5px;font-family:var(--f-m);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;color:var(--c1);opacity:0;transition:opacity .25s}
.nm-cursor.show .nm-chip{opacity:1}
@media (hover:hover) and (pointer:fine){body.nm-cursor-on,body.nm-cursor-on *{cursor:none!important}}
@media (hover:none),(pointer:coarse){.nm-cursor{display:none}}

/* ── GRAIN + VIGNETTE (atmosféra) ── */
.nm-grain{position:fixed;inset:0;pointer-events:none;z-index:9050;mix-blend-mode:overlay;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.nm-vignette{position:fixed;inset:0;pointer-events:none;z-index:9040;background:radial-gradient(125% 95% at 50% 50%,transparent 52%,rgba(5,5,6,.7) 100%)}

/* ── 21 TILT + GLARE (3D holo karta — phantom doc 26) ── */
[data-motion="tilt"]{transform-style:preserve-3d;will-change:transform;transition:transform .18s var(--e-list)}
[data-motion="tilt"] .nm-glare{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:3;
  transition:opacity .3s;background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.08),transparent 60%)}
[data-motion="tilt"]:hover .nm-glare{opacity:1}

/* ── reduced-motion kill switch (a11y — to NÁŠ náskok) ── */
@media (prefers-reduced-motion:reduce){
  .nm-on *{animation:none!important;transition-duration:.01ms!important}
  .nm-lm>span,.nm-rv,.nm-sec,.nm-split [data-ch]{transform:none!important;opacity:1!important}
  .nm-ambient,.nm-floaters i{animation:none!important}
  [data-motion="tilt"]{transform:none!important}
}