/* ============================================================
   ZÓNA24 — zona-fx.css · awwwards FX layer (v1)
   Additive presentation layer. Every rule is scoped under
   html.zfx, which zona-fx.js adds ONLY on desktop pointers with
   prefers-reduced-motion: no-preference. Mobile + reduced motion
   never see any of this. No existing rule is overridden except
   where explicitly noted (grow image reveal).
   Accent: cyan by default; html[data-zfx-accent="gold"] switches
   to the calm corporate variant (no glitch grammar).
   ============================================================ */

html.zfx{
  --zfx-a:var(--cyan-base,#71E2FC);
  --zfx-a-glow:rgba(113,226,252,.5);
}
html.zfx[data-zfx-accent="gold"]{
  --zfx-a:var(--gold-base,#D89C01);
  --zfx-a-glow:rgba(216,156,1,.5);
}

/* ============================================================
   1. NAV — depth on scroll
   ============================================================ */
html.zfx .nav{transition:box-shadow .5s var(--ease-smooth),border-color .5s}
html.zfx.zfx-scrolled .nav{
  box-shadow:0 16px 44px rgba(0,0,0,.5),0 1px 0 rgba(113,226,252,.08);
}

/* nav link micro-glitch (one-shot on hover-in, cyan pages only —
   JS never adds .zfx-g on the gold page) */
html.zfx .nav__menu a.zfx-g{animation:zfxNavG .16s steps(2) 1}
@keyframes zfxNavG{
  0%{transform:translate(0,0)}
  34%{transform:translate(-1px,.5px);text-shadow:1.5px 0 var(--cyan-base),-1.5px 0 rgba(255,255,255,.55)}
  67%{transform:translate(1px,-.5px);text-shadow:-1.5px 0 var(--cyan-base)}
  100%{transform:translate(0,0)}
}

/* ============================================================
   2. SCROLL TELEMETRY RAIL: ODSTRANĚNO (na přání)
   ============================================================ */

/* ============================================================
   3. HERO — cinematic scroll-out (index)
   JS drives transforms; CSS supplies the veil + hints.
   ============================================================ */
html.zfx .zfx-heroveil{
  position:absolute;inset:0;z-index:1;background:var(--bg-primary,#0B0D14);
  opacity:0;pointer-events:none;
}
html.zfx .hero__bg{will-change:transform;backface-visibility:hidden}
html.zfx .hero__content{will-change:transform,opacity}

/* first-load entrance (skipped when the page-fx glitch entrance ran) */
@keyframes zfxUp{
  from{opacity:0;transform:translateY(16px);filter:blur(5px)}
  to{opacity:1;transform:none;filter:none}
}
html.zfx.zfx-enter .hero .eyebrow{animation:zfxUp .65s var(--ease-smooth) .12s both}
html.zfx.zfx-enter .hero .hero__lead{animation:zfxUp .65s var(--ease-smooth) .27s both}
html.zfx.zfx-enter .hero .hero__cta{animation:zfxUp .65s var(--ease-smooth) .52s both}

/* page-hero (Hry / Firemní) — staggered settle on every arrival.
   The h1 is excluded: it is handled by decode/cascade. */
html.zfx .page-hero .page-eyebrow{animation:zfxUp .6s var(--ease-smooth) .12s both}
html.zfx .page-hero .page-subline{animation:zfxUp .6s var(--ease-smooth) .3s both}
html.zfx .page-hero .hstats,
html.zfx .page-hero .page-meta{animation:zfxUp .6s var(--ease-smooth) .46s both}
html.zfx .page-hero .container{will-change:transform,opacity}

/* ============================================================
   4. SECTION TITLE DECODE (cyan pages) — signal-decrypt reveal
   ============================================================ */
html.zfx .zfx-decode .word,
html.zfx .zfx-cascade .word{display:inline-block;white-space:nowrap}
html.zfx .zfx-decode .zl{display:inline-block;position:relative}
html.zfx .zfx-decode:not(.run) .zl{opacity:0}
html.zfx .zfx-decode .zl.scr{color:transparent;text-shadow:none}
html.zfx .zfx-decode .zl.scr::after{
  content:attr(data-s);position:absolute;left:0;top:0;width:100%;
  text-align:center;color:var(--zfx-a);opacity:.5;
  text-shadow:0 0 14px var(--zfx-a-glow);
}
html.zfx .zfx-decode .zl.onn{animation:zfxResolve .45s var(--ease-smooth) both}
@keyframes zfxResolve{
  0%{opacity:.15;text-shadow:0 0 16px var(--zfx-a)}
  60%{opacity:1;text-shadow:0 0 10px var(--zfx-a-glow)}
  100%{opacity:1;text-shadow:none}
}

/* ============================================================
   5. TITLE CASCADE (gold / corporate page) — calm, no glitch
   ============================================================ */
html.zfx .zfx-cascade .zl{
  display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(6px);
  transition:opacity .55s var(--ease-smooth),transform .6s var(--ease-smooth),filter .55s var(--ease-smooth);
  transition-delay:calc(var(--i)*24ms);
}
html.zfx .zfx-cascade.go .zl{opacity:1;transform:none;filter:none}
/* gold hairline draws under section titles after the cascade */
html.zfx h2.stitle.zfx-cascade{position:relative}
html.zfx h2.stitle.zfx-cascade::after{
  content:"";position:absolute;left:0;bottom:-12px;height:1px;width:0;
  background:linear-gradient(90deg,var(--gold-base,#D89C01),transparent);
  box-shadow:0 0 10px rgba(216,156,1,.45);
  transition:width .9s var(--ease-smooth) .4s;
}
html.zfx h2.stitle.zfx-cascade.go::after{width:160px}

/* ============================================================
   6. GLITCH TICKS — section numbers / game numbers (cyan only)
   ============================================================ */
html.zfx .zfx-tick{animation:zfxTick .3s steps(3) 1}
@keyframes zfxTick{
  0%{transform:translate(0,0);text-shadow:0 0 8px var(--zfx-a-glow)}
  33%{transform:translate(-2px,1px);text-shadow:2px 0 var(--zfx-a),-2px 0 rgba(255,255,255,.65)}
  66%{transform:translate(2px,-1px);text-shadow:-2px 0 var(--zfx-a),2px 0 rgba(255,255,255,.45)}
  100%{transform:translate(0,0)}
}

/* ambient micro-glitch on decoded titles (rare, cyan only) */
html.zfx .zfx-amb{animation:zfxAmb .18s steps(2) 1}
@keyframes zfxAmb{
  0%{transform:translate(0,0)}
  50%{transform:translate(-2px,1px);opacity:.75;
      text-shadow:2px 0 var(--zfx-a),-2px 0 rgba(255,255,255,.5)}
  100%{transform:translate(0,0)}
}


/* ============================================================
   8. HRY — image curtain reveal + settle + hover life
   (the dashed-placeholder ::after is display:none for .has-img,
    so it is safely repurposed as the reveal curtain)
   ============================================================ */
html.zfx .grow__ph.has-img::after{
  display:block;content:"";position:absolute;inset:0;border:0;clip-path:none;
  background:linear-gradient(to top,var(--bg-secondary,#14171F),var(--bg-primary,#0B0D14));
  transform:scaleY(1);transform-origin:top;z-index:2;pointer-events:none;
  transition:transform .9s var(--ease-smooth) .08s;
}
html.zfx .grow.flip .grow__ph.has-img::after{transform-origin:bottom}
html.zfx .grow.is-revealed .grow__ph.has-img::after{transform:scaleY(0)}
html.zfx .grow__img{
  transform:scale(1.12);filter:saturate(.8) brightness(.85);
  transition:transform 1s var(--ease-smooth),filter .8s linear;
  will-change:transform;
}
html.zfx .grow.is-revealed .grow__img{
  transform:scale(1.001);filter:none;
  transition:transform .6s var(--ease-smooth),filter .6s linear;
}
html.zfx .grow.is-revealed:hover .grow__img{transform:scale(1.045)}
html.zfx .grow.is-revealed:hover .grow__ph{border-color:var(--cyan-base)}
html.zfx .grow__ph{transition:border-color .35s}

/* ============================================================
   9. SAFETY
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html.zfx .zfx-decode:not(.run) .zl,
  html.zfx .zfx-cascade .zl{opacity:1;transform:none;filter:none}
}