/* ══════════════════════════════════════════════════════════════
   KZS SVG — Animated Inline SVG Shortcode
   Loaded lazily via [kzs_svg] shortcode only.
   ══════════════════════════════════════════════════════════════ */

.kzs-svg-wrap {
  display: block;
  position: relative; /* allows z-index to work when set explicitly via shortcode */
  z-index: 0; /* default: keep decorative SVG below nearby text layers */
  max-width: 100%;
  margin: 0 auto;
}

/* Size variants */
.kzs-svg-wrap[data-size="small"]  { width: 400px; }
.kzs-svg-wrap[data-size="medium"] { width: 600px; }
.kzs-svg-wrap[data-size="large"]  { width: 800px; }
.kzs-svg-wrap[data-size="full"]   { width: 100%; }

.kzs-svg-wrap svg {
  display: block;
  position: relative;
  z-index: 0;
  width: 100%;
  height: auto;
  pointer-events: none; /* no hit-testing on individual path shapes; hover handled by wrap div */
}

/* Always use the default cursor — interaction is purely visual (parallax repulsion) */
.kzs-svg-wrap {
  cursor: default;
}

/* ── Initial state: all paths hidden ── */
.kzs-svg-wrap svg path {
  opacity: 0;
  transform-origin: center;
  will-change: opacity, transform;
}

/* ── Reveal: JS adds .kzs-svg-revealed ── */
.kzs-svg-wrap.kzs-svg-revealed svg path {
  animation: kzsPathReveal
    var(--kzs-dur, 0.35s)
    calc( var(--i, 0) * var(--kzs-stagger, 8ms) )
    both
    ease-out;
}

@keyframes kzsPathReveal {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Outro: JS adds .kzs-svg-outro — paths fade out in reverse stagger order ── */
.kzs-svg-wrap.kzs-svg-outro svg path {
  animation: kzsPathOutro
    var(--kzs-dur, 0.35s)
    calc( (var(--kzs-path-count, 250) - 1 - var(--i, 0)) * var(--kzs-stagger, 8ms) )
    both
    ease-in;
}

@keyframes kzsPathOutro {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.97);
  }
}

/* ── Hover active: JS lerp handles all smoothing — no CSS transition needed ── */

/* ── Responsive ── */
@media (max-width: 768px) {
  .kzs-svg-wrap[data-size="small"],
  .kzs-svg-wrap[data-size="medium"],
  .kzs-svg-wrap[data-size="large"] {
    width: min(90vw, 100%);
  }
}

/* ── Reduced motion: skip animation, show immediately; outro hides instantly ── */
@media (prefers-reduced-motion: reduce) {
  .kzs-svg-wrap svg path {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .kzs-svg-wrap.kzs-svg-outro svg path {
    animation: none !important;
    opacity: 0 !important;
  }
}