/*
  SkinGraph — Hero Component
  Zahrnout do každé landing page před page-specific <style>:
  <link rel="stylesheet" href="hero.css">

  Závisí na CSS custom properties definovaných v :root každé stránky:
  --deep, --ink, --ink-2, --ink-3, --line, --line-2,
  --shadow-2, --ease

  HTML šablona hero sekce:
  ─────────────────────────────────────────────────
  <div class="wrap">
    <div class="hero">

      <div class="hero-left">
        <span class="eyebrow">
          <span class="dot"></span>
          <span class="mono">Popis stránky</span>
        </span>
        <h1 class="hero-h">Nadpis se <em>zvýrazněním</em>.</h1>
        <p class="hero-sub2">Popis benefitu.</p>
        <div class="hero-cta">
          <a href="#" class="btn btn-primary btn-lg">CTA text →</a>
        </div>
        <div class="trust">
          <div class="trust-i">
            <svg viewBox="0 0 24 24">…</svg>
            <div><span><strong>Benefit</strong><br>popis benefitu</span></div>
          </div>
          …
        </div>
      </div>

      <div class="face-stage">
        <div class="carousel-wrap">
          <img src="…" class="face-bg-photo carousel-slide active" alt="…">
        </div>
        <svg class="face-svg" viewBox="0 0 360 480"
             preserveAspectRatio="xMidYMid slice" aria-hidden="true">
          … hx-* overlay …
        </svg>
        <svg class="face-svg-mob" viewBox="0 139 360 202"
             preserveAspectRatio="xMidYMid meet" aria-hidden="true">
          … mobile hx-* overlay …
        </svg>
      </div>

    </div>
  </div>
  ─────────────────────────────────────────────────
*/

/* ---------- layout ---------- */
.hero{padding:72px 0 56px;display:grid;grid-template-columns:3fr 2fr;gap:56px;align-items:stretch}
.hero-left{min-width:0}
.hero-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
h1.hero-h{font-size:clamp(38px,5.2vw,60px);margin-bottom:22px}
h1.hero-h em{font-style:italic;color:var(--deep)}
.hero-sub2{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:90%;margin-bottom:32px}
.hero-sub2 b{color:var(--ink);font-weight:600}

/* ---------- eyebrow ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.6);margin-bottom:26px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--deep);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- trust bar ---------- */
.trust{display:grid;grid-template-columns:repeat(3,max-content);gap:24px;margin-top:38px;padding-top:28px;border-top:1px solid var(--line)}
.trust-i{display:flex;gap:12px;align-items:flex-start}
.trust-i > svg{width:20px;height:20px;stroke:var(--deep);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:3px}
.trust-i strong{font-weight:700}
.trust-i span{display:block;font-size:13px;color:var(--ink-3);margin-top:2px;white-space:nowrap}

/* ---------- face stage ---------- */
.face-stage{position:relative;aspect-ratio:3/4;border-radius:24px;box-shadow:var(--shadow-2);background:linear-gradient(160deg,#EDE9FC 0%,#ddd6f8 100%);max-width:400px;margin-left:auto}
.face-bg-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%}
.face-stage::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 62% 68% at 50% 38%,transparent 45%,rgba(237,233,252,.92) 78%,#EDE9FC 100%)}
.face-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2}

/* ---------- hx neural overlay ---------- */
.hx-ring{fill:none;stroke:var(--deep);opacity:.14;stroke-width:.8;stroke-dasharray:2 7;transform-box:fill-box;transform-origin:center;animation:hxspin 40s linear infinite}
.hx-ring.rev{animation-duration:28s;animation-direction:reverse;opacity:.09}
@keyframes hxspin{to{transform:rotate(360deg)}}
.hx-edge{fill:none;stroke:var(--deep);stroke-width:.9;opacity:.22;stroke-dasharray:3 6;animation:hxflow 5s linear infinite}
@keyframes hxflow{to{stroke-dashoffset:-36}}
.hx-node{fill:var(--deep)}
.hx-halo{fill:none;stroke:var(--deep);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:hxhalo 3.4s ease-out infinite}
@keyframes hxhalo{0%{opacity:.55;transform:scale(.4)}70%{opacity:0;transform:scale(2.6)}100%{opacity:0;transform:scale(2.6)}}
.hx-sweep{stroke:var(--deep);stroke-width:2.5;opacity:.7;filter:drop-shadow(0 0 6px var(--deep));animation:hxsweep 6s var(--ease) infinite}
@keyframes hxsweep{0%{transform:translateY(0);opacity:0}8%{opacity:.7}44%{transform:translateY(200px);opacity:.7}54%{transform:translateY(260px);opacity:0}100%{transform:translateY(260px);opacity:0}}
.hx-chip{transform-box:fill-box;transform-origin:center;opacity:0;animation:hxchip 6s var(--ease) infinite}
@keyframes hxchip{0%{opacity:0;transform:translateY(5px)}7%{opacity:1;transform:none}62%{opacity:1}72%{opacity:0}100%{opacity:0}}
.hx-chip-mob{transform-box:fill-box;transform-origin:center;opacity:0;animation:hxchip-mob 9s var(--ease) infinite}
@keyframes hxchip-mob{0%{opacity:0;transform:translateY(4px)}5%{opacity:1;transform:none}28%{opacity:1}33%{opacity:0}100%{opacity:0}}
.hx-chipbg{fill:rgba(255,255,255,.97);stroke:rgba(0,0,0,.07);stroke-width:1;filter:drop-shadow(0 2px 14px rgba(0,0,0,.13))}
.hx-lbl{font-family:'IBM Plex Mono',monospace;font-size:9px;fill:var(--ink-3);letter-spacing:.09em}
.hx-val{font-family:'Plus Jakarta Sans',serif;font-size:18px;font-weight:700}
.hx-prod{font-family:'IBM Plex Mono',monospace;font-size:9px;fill:#6C4CE0;letter-spacing:.04em}
.hx-status{font-family:'IBM Plex Mono',monospace;font-size:8px;fill:rgba(255,255,255,.75);letter-spacing:.12em}
.hx-live{fill:#8B6CF0;animation:pulse 1.8s infinite}
.hx-status-bg{fill:rgba(20,16,40,.55)}

/* ---------- mobile face overlay ---------- */
.face-svg-mob{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2;display:none}
@media(max-width:900px){
  .face-svg{display:none}
  .face-svg-mob{display:block}
  .face-svg-mob .hx-sweep{animation:hxsweep-mob 6s var(--ease) infinite}
}
@keyframes hxsweep-mob{0%{transform:translateY(0);opacity:0}8%{opacity:.7}44%{transform:translateY(190px);opacity:.7}54%{transform:translateY(215px);opacity:0}100%{transform:translateY(215px);opacity:0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------- carousel ---------- */
.carousel-wrap{position:absolute;inset:0;overflow:hidden;border-radius:24px}
.carousel-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;opacity:0;transition:opacity 1.2s ease}
.carousel-slide.active{opacity:1}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:0;padding:0 0 20px;align-items:start}
  .face-stage{order:-1;max-width:none;margin:0 -24px;width:calc(100% + 48px);border-radius:0;aspect-ratio:16/9}
  .carousel-wrap{border-radius:0}
  .hx-chip{display:none}
  .hero-left{padding-top:40px}
  .eyebrow{margin-bottom:20px}
  .hero-sub2{font-size:15px;margin-bottom:24px}
  .hero-cta{flex-direction:column;align-items:stretch;gap:14px}
  .hero-cta .btn-lg{width:100%;justify-content:center}
  .trust{grid-template-columns:1fr;gap:10px;margin-top:20px;padding-top:16px}
}
@media(max-width:600px){
  .face-stage{margin:0 -16px;width:calc(100% + 32px);aspect-ratio:16/9}
  h1.hero-h{font-size:28px}
}
@media(max-width:480px){
  h1.hero-h{font-size:26px;line-height:1.15}
  .hero-sub2{font-size:14.5px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}