/* ═══ HERO (22-10-2026) · Gunpla-thema ════════════════════════════
   Elke kit zit in een gietraam (runner) met aanspuitpunten, een
   onderdeellabel en genummerde aanwijzers zoals in een bouwhandleiding.
   Achtergrond: pantserpaneellijnen en een Zaku-mono-eye die scant.
   Alleen de blauwe knop (.btn) heeft de schuine hoek; de rest is recht.
   Eigen klassen (zh-), los van de oude .hero-lagen in main.css. */

.zh{
  --zh-dur:7s;
  --acc:var(--scan);
  --plastic:#8b93a3;
  position:relative;overflow:hidden;overflow:clip;isolation:isolate;
  background:radial-gradient(120% 90% at 78% 30%,#18315f 0%,#0c1f45 45%,#070f22 100%);
  color:#fff;
}
.zh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── achtergrond ─────────────────────────────────────────────── */
.zh-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.zh-panels{position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);opacity:.22;animation:zh-drift 40s linear infinite alternate}
.zh-panels path{fill:none;stroke:#5f86c9;stroke-width:1}
.zh-panels .zh-rivet{fill:#5f86c9;stroke:none}
@keyframes zh-drift{to{transform:translate3d(-60px,-30px,0)}}
.zh-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(57,212,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(57,212,255,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}

/* Zaku-mono-eye: een donkere sleuf met een gloeiend roze oog dat heen en weer scant. */
.zh-mono{position:absolute;left:var(--gutter,24px);right:52%;top:26px;height:14px;background:linear-gradient(#02060f,#0a1530);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 30px rgba(0,0,0,.6)}
.zh-mono::before{content:"";position:absolute;top:50%;left:0;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 12%,#ff4d8d 22%,rgba(255,45,110,.55) 45%,transparent 70%);
  box-shadow:0 0 18px 6px rgba(255,45,110,.55),0 0 60px 20px rgba(255,45,110,.18);
  animation:zh-scan 5.5s cubic-bezier(.65,0,.35,1) infinite alternate}
.zh-mono::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,45,110,.10),transparent);background-size:30% 100%;background-repeat:no-repeat;animation:zh-sweep 5.5s cubic-bezier(.65,0,.35,1) infinite alternate}
@keyframes zh-scan{0%{left:2%}45%{left:60%}55%{left:60%}100%{left:98%}}
@keyframes zh-sweep{0%{background-position:0 0}100%{background-position:100% 0}}

/* ── slides ──────────────────────────────────────────────────── */
.zh-track{position:relative;display:grid;max-width:var(--max-w,1280px);margin:0 auto;padding:44px var(--gutter,16px) 24px}
.zh-slide{grid-area:1/1;display:grid;grid-template-columns:1fr;gap:28px;align-items:center;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.zh-slide.is-on{opacity:1;visibility:visible;transition:opacity .6s ease}
@media (min-width:900px){
  .zh-track{padding:64px var(--gutter,24px) 28px;min-height:520px}
  .zh-slide{grid-template-columns:1.05fr .95fr;gap:56px}
}

.zh-copy{max-width:560px}
.zh-kicker{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.zh-kicker span{font-family:var(--f-cond);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 9px;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.85);background:rgba(7,15,34,.4)}
.zh-kicker .zh-grade{background:var(--acc);border-color:var(--acc);color:#071022}

.zh-title{margin:0 0 16px;font-family:var(--f-display);font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:.01em;font-size:clamp(38px,6.2vw,76px)}
.zh-line{display:block}
.zh-line--acc{color:transparent;-webkit-text-stroke:1.5px var(--acc);text-shadow:0 0 32px color-mix(in srgb,var(--acc) 35%,transparent)}
.zh-lede{font-size:15px;line-height:1.6;color:rgba(255,255,255,.78);max-width:440px;margin:0 0 22px}
.zh-ctas{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.zh-ghost{display:inline-flex;align-items:center;min-height:48px;padding:12px 20px;border:1.5px solid rgba(255,255,255,.7);color:#fff;
  font-family:var(--f-cond);font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;transition:background .15s,border-color .15s}
.zh-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}

/* ── gietraam (runner) ───────────────────────────────────────── */
.zh-runner{position:relative;margin:0 auto;width:min(100%,460px);--pos:50% 50%}
.zh-frame{position:relative;padding:20px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--plastic) 70%,#fff),var(--plastic) 40%,color-mix(in srgb,var(--plastic) 70%,#000));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 30px 60px rgba(0,0,0,.45)}
/* binnenrand van het raam: het "gat" waarin het onderdeel hangt */
.zh-frame::before{content:"";position:absolute;inset:10px;background:#0b1630;box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.zh-part{position:relative;aspect-ratio:1/1;overflow:hidden;background:#fff}
.zh-part img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos)}
/* aanspuitpunten: dunne verbindingen van raam naar onderdeel */
.zh-gate{position:absolute;background:var(--plastic);z-index:1}
.zh-gate--t,.zh-gate--b{width:8px;height:10px}
.zh-gate--l,.zh-gate--r{width:10px;height:8px}
.zh-gate--t{top:10px;left:28%}.zh-gate--t2{top:10px;left:auto;right:28%}
.zh-gate--b{bottom:10px;left:50%;margin-left:-4px}
.zh-gate--l{left:10px;top:40%}.zh-gate--r{right:10px;top:62%}
/* onderdeellabel: het lipje aan het raam met de letter */
.zh-tag{position:absolute;top:-26px;left:20px;height:26px;min-width:44px;padding:0 10px;display:grid;place-items:center;
  background:var(--plastic);color:#0b1630;font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:.06em}
.zh-partno{margin:12px 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.62);text-transform:uppercase}
.zh-partno b{color:var(--acc);font-weight:600}

/* handleiding-aanwijzers: genummerd vakje met een lijn naar de kit */
.zh-call{position:absolute;display:flex;align-items:center;z-index:2;pointer-events:none}
.zh-call b{display:grid;place-items:center;width:26px;height:26px;background:#fff;color:#0b1630;font-family:var(--f-display);font-weight:700;font-size:14px}
.zh-call i{display:block;height:1.5px;width:56px;background:#fff;transform-origin:left center}
/* links: vakje op de linkerrand, lijn naar binnen; rechts: gespiegeld */
.zh-call--l{left:-13px;flex-direction:row}
.zh-call--r{right:-13px;flex-direction:row-reverse}
.zh-call--r i{transform-origin:right center}

/* ── stappen-navigatie (bouwhandleiding) ─────────────────────── */
.zh-steps{position:relative;display:flex;align-items:stretch;gap:6px;max-width:var(--max-w,1280px);margin:0 auto;padding:0 var(--gutter,16px) 28px}
.zh-step{flex:1;position:relative;display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 12px 14px;text-align:left;cursor:pointer;
  background:rgba(7,15,34,.55);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.7);font:inherit}
.zh-step:hover{border-color:rgba(255,255,255,.35);color:#fff}
.zh-step:focus-visible,.zh-arrow:focus-visible{outline:2px solid var(--scan);outline-offset:2px}
.zh-step-n{font-family:var(--f-display);font-weight:700;font-size:20px;line-height:1;color:#fff}
.zh-step-t{font-family:var(--f-cond);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:none}
.zh-step-n::before{content:"STAP ";font-family:var(--f-cond);font-size:10px;letter-spacing:.16em;color:rgba(255,255,255,.55);vertical-align:3px}
.zh-step.is-on{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(30,58,114,.55)}
.zh-step-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08)}
.zh-step-bar i{position:absolute;inset:0;background:var(--acc);transform:scaleX(0);transform-origin:left center}
.zh-step.is-on .zh-step-bar i{animation:zh-progress var(--zh-dur) linear forwards}
.zh.is-paused .zh-step.is-on .zh-step-bar i,.zh:hover .zh-step.is-on .zh-step-bar i,.zh:focus-within .zh-step.is-on .zh-step-bar i{animation-play-state:paused}
@keyframes zh-progress{to{transform:scaleX(1)}}
.zh-arrow,.zh-pause{flex:0 0 48px;display:grid;place-items:center;min-height:48px;background:rgba(7,15,34,.55);border:1px solid rgba(255,255,255,.14);color:#fff;cursor:pointer}
.zh-arrow:hover,.zh-pause:hover{border-color:rgba(255,255,255,.4)}
.zh-arrow svg,.zh-pause svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.zh-pause .zh-play{display:none}
.zh.is-paused .zh-pause .zh-play{display:block}
.zh.is-paused .zh-pause .zh-pz{display:none}
@media (min-width:900px){.zh-step-t{display:block}}

/* ── animaties bij het binnenkomen van een slide ──────────────── */
.zh-slide.is-on .zh-kicker span{animation:zh-up .5s cubic-bezier(.2,.8,.2,1) both}
.zh-slide.is-on .zh-kicker span:nth-child(2){animation-delay:.06s}
.zh-slide.is-on .zh-kicker span:nth-child(3){animation-delay:.12s}
.zh-slide.is-on .zh-line{animation:zh-wipe .7s cubic-bezier(.7,0,.2,1) both}
.zh-slide.is-on .zh-line:nth-child(2){animation-delay:.12s}
.zh-slide.is-on .zh-lede{animation:zh-up .6s .3s cubic-bezier(.2,.8,.2,1) both}
.zh-slide.is-on .zh-ctas{animation:zh-up .6s .4s cubic-bezier(.2,.8,.2,1) both}
.zh-slide.is-on .zh-frame{animation:zh-frame .7s cubic-bezier(.2,.8,.2,1) both}
.zh-slide.is-on .zh-part{animation:zh-snap .55s .45s cubic-bezier(.3,1.6,.4,1) both}
.zh-slide.is-on .zh-gate{animation:zh-gate .3s .35s ease-out both}
.zh-slide.is-on .zh-tag{animation:zh-up .4s .3s ease-out both}
.zh-slide.is-on .zh-call b{animation:zh-pop .35s .85s cubic-bezier(.3,1.6,.4,1) both}
.zh-slide.is-on .zh-call i{animation:zh-line .45s .7s cubic-bezier(.7,0,.2,1) both}
.zh-slide.is-on .zh-call--r b{animation-delay:1s}
.zh-slide.is-on .zh-call--r i{animation-delay:.85s}
.zh-slide.is-on .zh-partno{animation:zh-type .9s .6s steps(28) both}
@keyframes zh-up{from{opacity:0;transform:translateY(14px)}}
@keyframes zh-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes zh-frame{from{opacity:0;transform:scale(.94) rotate(-1.5deg)}}
@keyframes zh-snap{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes zh-gate{from{transform:scale(0)}}
@keyframes zh-pop{from{opacity:0;transform:scale(.4)}}
@keyframes zh-line{from{transform:scaleX(0)}}
@keyframes zh-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* licht zweven van het raam, zodat de hero ook stilstaand leeft */
.zh-slide.is-on .zh-runner{animation:zh-float 6s 1s ease-in-out infinite alternate}
@keyframes zh-float{to{transform:translateY(-8px)}}

/* ── per slide: accentkleur, plasticKleur, uitsnede ────────────── */
.zh-slide[data-kit="assemble"]{--acc:#39d4ff;--plastic:#9aa3b5}
.zh-slide[data-kit="sazabi"]{--acc:#ff3d6e;--plastic:#c2414f}
.zh-slide[data-kit="snaa"]{--acc:#4fe3c4;--plastic:#c9ced8}
.zh-slide[data-kit="stedi"]{--acc:#f2c14e;--plastic:#3a3f4a}
.zh-slide[data-kit="snaa"] .zh-runner{--pos:58% 50%}
.zh-slide[data-kit="stedi"] .zh-part img{transform:scale(1.55);transform-origin:78% 92%}
.zh-slide[data-kit="stedi"] .zh-tag{color:#f2c14e}
/* de mono-eye kleurt mee met de actieve kit */
.zh[data-active="sazabi"] .zh-mono::before{filter:saturate(1.3)}

/* ── mobiel ──────────────────────────────────────────────────── */
@media (max-width:899px){
  .zh-runner{width:min(100%,360px)}
  .zh-call i{width:28px}
  .zh-mono{left:var(--gutter,16px);right:var(--gutter,16px);top:16px;height:10px}
  .zh-track{padding-top:44px}
  .zh-step{padding:8px 10px 12px}
  .zh-step-n{font-size:16px}
  .zh-step-n::before{display:none}
}

@media (prefers-reduced-motion:reduce){
  .zh *,.zh *::before,.zh *::after{animation:none !important;transition:none !important}
  .zh-slide{transition:none}
}
html[lang="en"] .zh-step-n::before{content:"STEP "}