/*
 * K&Z Fashions — cinematic particle hero (no video dependency).
 *
 * Art direction: a premium buying-house palette — charcoal, deep navy,
 * soft white, gold and a whisper of K&Z green as rare accents only. The
 * primary visual is a canvas particle field (textile fibre / fabric dust,
 * see kz-hero-cinematic.js) that reacts to the cursor. The SVG threads
 * below are deliberately secondary — quiet, low-opacity, corner-composed —
 * so they read as a fine textile detail rather than competing with the
 * particles for attention.
 *
 * Additive, self-contained, scoped under .kz-hero so it never touches
 * existing Astra/Elementor/WooCommerce styles.
 */

/* Brand-colour correction, unrelated to the hero: the "Why Choose Us"
   icon badges (…Final-Design.png/.jpg) are flat red circles baked
   directly into the raster image, not a CSS colour — a hue-rotate is the
   practical way to bring them onto the K&Z green without new artwork. */
img[src*="Final-Design"] {
  filter: hue-rotate(104deg) saturate(.85);
}

.kz-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #08080a;
  height: min(82vh, 900px);
  min-height: 520px;
}

.kz-hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* static fine grain — a fixed texture, not animated, cheap and adds
   editorial-photography feel without extra compute */
.kz-hero__grain {
  position: absolute; inset: -10%;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 280px 280px;
}

/* quiet threads + one stitch-line, composed into the corners */
.kz-hero__threads {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  /* opacity is the one-shot reveal transition; transform (parallax) is
     driven continuously by JS, already lerped smooth — no CSS transition
     on transform here for the same reason as the canvas above */
  transition: opacity 2.2s ease-out 1.4s;
  will-change: transform, opacity;
}
.kz-hero.is-ready .kz-hero__threads { opacity: .26; }

.kz-hero__threads path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; will-change: opacity, transform; }
.kz-hero__threads path.kz-t-a { stroke-width: 1; stroke: rgba(255,255,255,.20); animation: kzThreadDrift 21s ease-in-out infinite; }
.kz-hero__threads path.kz-t-b { stroke-width: 1; stroke: rgba(255,255,255,.14); animation: kzThreadDrift 17s ease-in-out infinite 4.5s; }
.kz-hero__threads path.kz-t-c { stroke-width: 1; stroke: rgba(196,161,94,.20); animation: kzThreadDrift 24s ease-in-out infinite 9s; }
.kz-hero__threads path.kz-stitch {
  stroke-width: 1;
  stroke: rgba(255,255,255,.22);
  stroke-dasharray: 2 7;
  animation: kzStitchDrift 34s linear infinite;
}

@keyframes kzThreadDrift {
  0%,100% { opacity: 0;   transform: translate3d(0,5px,0); }
  18%     { opacity: .55; }
  50%     { opacity: .28; transform: translate3d(4px,-4px,0); }
  82%     { opacity: .55; }
}
@keyframes kzStitchDrift {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -180; }
}

/* ---- hero content: heading + subtext + CTA (left) and a real K&Z
   product photo (right) — sits above the canvas/threads by DOM order
   alone, no z-index needed. Wrapper is pointer-events:none so it never
   steals clicks from the rest of the page; the CTA link opts back in. ---- */
.kz-hero__inner {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5vw;
  padding: 0 6vw;
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.1s cubic-bezier(.22,.61,.36,1) .5s, transform 1.1s cubic-bezier(.22,.61,.36,1) .5s;
}
.kz-hero.is-ready .kz-hero__inner { opacity: 1; transform: translateY(0); }

.kz-hero__content { max-width: 560px; }
.kz-hero .kz-hero__eyebrow {
  display: block;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgb(196,161,94);
  margin-bottom: 18px;
}
/* .kz-hero prefix raises specificity above the scraped theme's own
   ".entry-content h1" rule, which would otherwise win and paint this
   dark grey instead of the near-white it's meant to be */
.kz-hero .kz-hero__heading {
  margin: 0 0 18px;
  color: #edf0f4;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.12;
  font-weight: 600;
}
.kz-hero .kz-hero__subtext {
  margin: 0 0 30px;
  color: rgba(225,230,238,.72);
  font-size: clamp(.95rem, 1.1vw, 1.08rem);
  line-height: 1.6;
  max-width: 460px;
}
.kz-hero .kz-hero__cta {
  pointer-events: auto;
  display: inline-block;
  padding: 13px 30px;
  border: 1px solid rgba(225,230,238,.4);
  border-radius: 999px;
  color: #edf0f4;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.kz-hero .kz-hero__cta:hover {
  border-color: rgb(196,161,94);
  background-color: rgba(196,161,94,.12);
  color: rgb(230,205,150);
}

.kz-hero__visual {
  flex: 0 0 auto;
  width: min(30vw, 340px);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.55));
  animation: kzVisualFloat 9s ease-in-out infinite;
}
.kz-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
@keyframes kzVisualFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ---- respect reduced motion: one calm static frame, no motion at all ---- */
@media (prefers-reduced-motion: reduce) {
  .kz-hero__canvas { transition: none !important; transform: none !important; }
  .kz-hero__threads { transition: none !important; opacity: .2 !important; transform: none !important; }
  .kz-hero__threads path { animation: none !important; opacity: .2 !important; }
  .kz-hero__inner { transition: none !important; opacity: 1 !important; transform: none !important; }
  .kz-hero__visual { animation: none !important; }
}

/* ---- tablet: trim decorative intensity ---- */
@media (max-width: 921px) {
  .kz-hero { height: 70vh; min-height: 460px; }
  .kz-hero__visual { width: min(26vw, 220px); }
}

/* ---- mobile: simplified, still premium ---- */
@media (max-width: 544px) {
  .kz-hero { height: auto; min-height: 480px; max-height: none; }
  .kz-hero__grain { opacity: .035; }
  .kz-hero__inner { position: relative; flex-direction: column-reverse; gap: 22px; padding: 40px 7vw; text-align: center; }
  .kz-hero__content { max-width: none; }
  .kz-hero__subtext { max-width: none; margin-left: auto; margin-right: auto; }
  .kz-hero__visual { width: min(58vw, 260px); animation: none; }
}