/* =====================================================================
   heroKuzu — programmatic hero background for the "KuZu" slide (FIT
   Kundenzufriedenheit / customer-satisfaction survey). Recreates the
   DESKTOP start-frame of assets/kuzu/kuzu-2026.html natively (no image/
   video, no iframe): navy ambience + gold glows + micro-grid, plus the
   animated "path to perfection" (SVG route + looping traveler) drawn by
   js/heroKuzu.js. Layout is text-left: the route lives on the RIGHT, the
   hero text block sits on the LEFT over a left scrim.
   Values mirror kuzu-2026.html (brand constants + stroke styles).
   ===================================================================== */

.hero-kuzu {
    /* local brand tokens (kuzu-2026.html :root / [data-bg="dark"]) */
    --kz-navy: #253D66;
    --kz-navy-deep: #172a4a;
    --kz-gold: #FCBA00;
    --kz-glow: rgba(252,186,0,.26);
    --kz-texture: rgba(255,255,255,.05);
    --kz-hair: rgba(255,255,255,.22);
    --kz-ink-mut: #94a6c2;

    position: absolute;
    inset: 0;
    z-index: 1;                 /* same layer as .hero-media (below scrim/content) */
    overflow: hidden;
    /* radial hotspot top-right over the navy gradient (kuzu --bg-grad) */
    background:
        radial-gradient(120% 90% at 85% -10%, #34568f 0%, rgba(52,86,143,0) 55%),
        linear-gradient(160deg, var(--kz-navy) 0%, var(--kz-navy-deep) 100%);
}

/* micro grid, masked toward the centre (kuzu .stage::before) */
.hero-kuzu__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(var(--kz-texture) 1px, transparent 1px);
    background-size: 30px 30px;
    -webkit-mask: radial-gradient(120% 100% at 50% 40%, #000, transparent 80%);
            mask: radial-gradient(120% 100% at 50% 40%, #000, transparent 80%);
}

/* gold glows (kuzu .glow / .glow2) — top-right + bottom-left */
.hero-kuzu__glow,
.hero-kuzu__glow2 {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, var(--kz-glow), transparent 60%);
}
.hero-kuzu__glow  { width: 66vmax; height: 66vmax; right: -16vmax; top: -22vmax; }
.hero-kuzu__glow2 { width: 46vmax; height: 46vmax; left: -14vmax; bottom: -16vmax;
                    background: radial-gradient(circle, var(--kz-glow), transparent 62%); }

/* SVG host for the "path to perfection" — fills the slide; the route geometry
   keeps itself in the RIGHT ~40% (js/heroKuzu.js), leaving the left free for text. */
.hero-kuzu__map {
    position: absolute;
    inset: 0;
    z-index: 2;                 /* over the grid/glows, still below the scrim (z3) */
    pointer-events: none;
}
.hero-kuzu__map svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* stroke styles — mirror kuzu-2026.html .smap .route-* / .traveler / .pulse / .ndot / .cover-ico */
.hero-kuzu__map .route-bg   { fill: none; stroke: var(--kz-hair); stroke-width: 2; }
.hero-kuzu__map .route-fg   { fill: none; stroke: var(--kz-gold); stroke-width: 3; stroke-linecap: butt; stroke-linejoin: miter; }
.hero-kuzu__map .route-flow { fill: none; stroke: var(--kz-gold); stroke-width: 2; opacity: .4; stroke-dasharray: 2 11; stroke-linecap: round; stroke-linejoin: miter; }
.hero-kuzu__map .pulse      { fill: none; stroke: var(--kz-gold); stroke-width: 1.5; }
.hero-kuzu__map .traveler   { fill: var(--kz-gold); }
.hero-kuzu__map .cover-ico  { fill: var(--kz-gold); }
.hero-kuzu__map .ndot       { transition: fill .35s; }

/* gold glow so the travelled trail, traveler and icons read as the hero's highlight
   (stroke-widths themselves are set/scaled by js/heroKuzu.js) */
.hero-kuzu__map .route-fg,
.hero-kuzu__map .traveler,
.hero-kuzu__map .cover-ico { filter: drop-shadow(0 0 8px rgba(252,186,0,.45)); }

/* KuZu big stat — a giant gold count-up number (mirrors kuzu-2026.html .hero h1 .big).
   The count-up (0 → 99) is driven by js/heroKuzu.js when the slide becomes active. */
.hero-kuzu-num {
    display: block;
    color: var(--fityellow);
    font-size: clamp(72px, 17vw, 210px);
    font-weight: 800;
    line-height: .82;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    text-shadow: 0 2px 24px rgba(6,14,28,.4);
}
.hero-slide.kuzu .hero-headline { line-height: 1.02; }   /* the "% …" line sits tight under the big number */

/* once the count-up has filled, the "99%" glows (class toggled by js/heroKuzu.js) */
.hero-kuzu-num.is-glow { animation: hero-kuzu-glow 2.4s ease-in-out infinite; }
@keyframes hero-kuzu-glow {
    0%, 100% { text-shadow: 0 0 12px rgba(252,186,0,.14), 0 0 26px rgba(252,186,0,.08), 0 2px 24px rgba(6,14,28,.4); }
    50%      { text-shadow: 0 0 20px rgba(252,186,0,.25), 0 0 44px rgba(252,186,0,.16), 0 2px 24px rgba(6,14,28,.4); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-kuzu-num.is-glow { animation: none; text-shadow: 0 0 16px rgba(252,186,0,.20), 0 2px 24px rgba(6,14,28,.4); }
}

/* The KuZu slide adopts the KuZu deck's typeface — the hero may break with the site's conventions. */
.hero-slide.kuzu .hero-content { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }

/* Mobile: keep the route visible (upper-right; the text band sits below it), soften the glows,
   and size the big number so it still reads without crowding the 4:5 bottom band. */
@media (max-width: 767px) {
    .hero-kuzu__glow  { width: 90vmax; height: 90vmax; opacity: .85; }
    .hero-kuzu__glow2 { width: 70vmax; height: 70vmax; opacity: .85; }
    .hero-kuzu-num { font-size: clamp(60px, 22vw, 104px); }
}

/* reduced motion: js draws a single static end-frame; nothing else needed here. */