/*
 * K&Z Fashions — modern split hero (home page only).
 *
 * Layout/motion mechanics adapted from a reference hero: a near-black
 * backdrop with soft floating colour blobs and a faint masked grid, rising
 * ambient particles, a two-column split (copy left, product photo right)
 * with small floating fact-cards, and a direct mouse-parallax tilt on the
 * photo. All content, photography and colour are K&Z's own — nothing here
 * is copied text/imagery from the reference site.
 *
 * Scoped entirely under .kzb- so it can never collide with the .kz-hero
 * canvas system used on other pages (e.g. products.html).
 */

.kzb-hero {
  /* K&Z gold — kept as a deliberate CONTRASTING accent against the new
     green base (not shifted to green) so the emphasized heading word,
     badge dots, and hover states still pop against the backdrop instead
     of blending into a flat monochrome green-on-green look. Dark green +
     gold is also an established premium/heritage pairing, which suits a
     buying-house brand. See kz-hero-modern.css history for the previous
     near-black/gold theme this replaces — same accent, on-brand base. */
  --kzb-accent: rgb(196,161,94);
  /* Lighter green -> darker green, both stops genuinely green (no black/
     near-black endpoint) so the whole background reads as green throughout,
     matching the logo directly above it in the header. */
  background: radial-gradient(ellipse at 75% 20%, #1b2e20 0%, #142218 60%);
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 64px 0;
}

.kzb-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

/* WebGL fabric-wave canvas (public/js/kz-hero-webgl.js) — progressive
   enhancement layered into the same background stack as the blobs/grid/
   particles above. Kept subtle (opacity) so it never competes with the
   heading/CTA/product photo, and pointer-events:none so it can never
   intercept clicks on the CTA or fact-card badges. Opacity lowered from the
   earlier .55 now that the effect is gold/amber: gold reads with much
   higher luminance contrast against the green backdrop than the previous
   green-on-green version did, so the same opacity looked too bold/eye-
   catching and started competing with the heading text. */
.kzb-webgl-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: .3;
}

.kzb-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  background: radial-gradient(circle, var(--kzb-accent) 0%, rgba(196,161,94,0) 70%);
  animation: kzbBlobFloat 18s ease-in-out infinite;
}
.kzb-blob.b1 { width: 480px; height: 480px; top: -160px; right: -100px; }
.kzb-blob.b2 { width: 360px; height: 360px; bottom: -130px; left: -70px; opacity: .3; animation-duration: 22s; animation-delay: -6s; }
.kzb-blob.b3 { width: 280px; height: 280px; top: 35%; left: 42%; opacity: .22; background: radial-gradient(circle, #4d7e3e 0%, rgba(77,126,62,0) 70%); animation-duration: 15s; animation-delay: -3s; }
@keyframes kzbBlobFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(28px,-36px) scale(1.07); }
  66%      { transform: translate(-22px,22px) scale(.95); }
}

.kzb-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 30%, #000 40%, transparent 85%);
}

.kzb-particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--kzb-accent);
  opacity: .7;
  box-shadow: 0 0 8px 2px rgba(196,161,94,.5);
  animation: kzbParticleUp linear infinite;
}
@keyframes kzbParticleUp {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .8; }
  90%  { opacity: .4; }
  100% { transform: translateY(-560px) translateX(18px); opacity: 0; }
}

.kzb-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.kzb-text { animation: kzbFadeUp .9s ease both; }
.kzb-eyebrow {
  display: block;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kzb-accent);
  margin-bottom: 18px;
}
.kzb-text h1 {
  font-size: clamp(32px, 4.6vw, 54px);
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1.12;
  margin: 0 0 22px;
  color: #f3f1ec;
}
/* Emphasized heading phrase ("Buying Partner") is logo green, deliberately
   NOT tied to --kzb-accent (gold) -- that variable is still used unchanged
   by the eyebrow text, badge dots, and button hover state elsewhere in this
   file, so this is a selector-specific override rather than a variable
   redefinition. Green-on-green text against the hero's own green background
   measures only ~3:1 contrast at the gradient's lighter stop (borderline
   even for large text) -- the shadow adds a dark halo so it reads cleanly
   without changing the specified green. */
.kzb-text h1 span {
  color: #4d7e3e;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.kzb-text p {
  color: #bdbdbd;
  font-size: 17px;
  line-height: 1.6;
  max-width: 460px;
  margin: 0 0 32px;
}
.kzb-btn {
  display: inline-block;
  padding: 13px 30px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  color: #f3f1ec;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
  animation: kzbFadeUp 1s ease .15s both;
}
.kzb-btn:hover {
  border-color: var(--kzb-accent);
  background-color: rgba(196,161,94,.12);
  color: rgb(230,205,150);
}
@keyframes kzbFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.kzb-img {
  align-self: end;
  position: relative;
  animation: kzbFadeUp 1.1s ease .1s both;
  transition: transform .15s ease-out;
  will-change: transform;
}
.kzb-img img {
  max-height: 640px;
  width: 100%;
  margin: 0 auto;
  display: block;
  object-fit: contain;
  animation: kzbImgFloat 6s ease-in-out infinite;
  /* drop-shadow (unlike box-shadow) follows the PNG's alpha silhouette,
     so this reads as a soft ambient shadow under the garment itself,
     not a rectangular card shadow */
  filter: drop-shadow(0 25px 35px rgba(0,0,0,.45));
}
@keyframes kzbImgFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.kzb-card {
  position: absolute;
  padding: 13px 17px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(232,232,232,.35);
  box-shadow: 0 0 15px 5px rgba(0,0,0,.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #f3f1ec;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: kzbCardBob 5s ease-in-out infinite;
  white-space: nowrap;
}
.kzb-card .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kzb-accent); box-shadow: 0 0 8px 2px rgba(196,161,94,.6); flex: none; }
.kzb-card.c1 { top: 6%;  left: -6%;  animation-duration: 5.5s; }
.kzb-card.c2 { top: 46%; right: -10%; animation-duration: 6.5s; animation-delay: -2s; }
.kzb-card.c3 { bottom: 4%; left: 0%; animation-duration: 5s; animation-delay: -3.5s; }
@keyframes kzbCardBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-13px); }
}

@media (max-width: 980px) {
  .kzb-card { display: none; }
  .kzb-inner { grid-template-columns: 1fr; text-align: center; }
  .kzb-text p { margin-left: auto; margin-right: auto; }
  .kzb-img { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .kzb-blob, .kzb-img, .kzb-img img, .kzb-text, .kzb-btn, .kzb-card, .kzb-particle {
    animation: none !important;
  }
  .kzb-img { transform: none !important; }
  /* kz-hero-webgl.js already refuses to build the canvas under reduced
     motion — this is a belt-and-suspenders CSS guarantee for that same
     rule, in case it were ever somehow created anyway. */
  .kzb-webgl-canvas { display: none !important; }
}