/*!
 * Kazmi Carpets — Hero
 * Every selector is scoped under .kazmi-hero so nothing leaks into the rest of the site.
 */

.kazmi-hero {
  --kz-ivory:      #F6F1E8;
  --kz-cream:      #FFFCF6;
  --kz-sand:       #EAE0D0;
  --kz-ink:        #241A13;
  --kz-body:       #5B4A3A;
  --kz-muted:      #8A7862;
  --kz-bronze:     #8B6A3C;
  --kz-hairline:   #C8B79A;
  --kz-border:     #D6C8B2;
  --kz-rule:       #C0AC8B;
  --kz-dot:        #C9B899;

  position: relative;
  box-sizing: border-box;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: clamp(84px, 11vw, 120px) 20px clamp(28px, 4vw, 48px);
  background: radial-gradient(120% 80% at 50% 42%, #FFFCF6 0%, #F3ECE0 55%, #EAE0D0 100%);
  font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.kazmi-hero *,
.kazmi-hero *::before,
.kazmi-hero *::after { box-sizing: border-box; }

.kazmi-hero__inner {
  width: 100%;
  max-width: 1040px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------------- 1. Eyebrow ---------------- */
.kazmi-hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.kazmi-hero__eyebrow-rule {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--kz-rule);
  flex: 0 0 auto;
}
.kazmi-hero__eyebrow-text {
  font-size: 10px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--kz-muted);
  line-height: 1.6;
  font-weight: 400;
}

/* ---------------- 2. Headline ---------------- */
.kazmi-hero__headline {
  margin: 24px 0 0;
  width: 100%;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 300;
  font-size: clamp(36px, 5.6vw, 78px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--kz-ink);
}
.kazmi-hero__headline em {
  font-style: italic;
  color: var(--kz-bronze);
}

/* ---------------- 3. Tagline ---------------- */
.kazmi-hero__tagline {
  margin: clamp(12px, 1.5vw, 20px) auto 0;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.9;
  color: var(--kz-body);
  text-wrap: pretty;
  font-weight: 400;
}

/* ---------------- 4. Slider ---------------- */
.kazmi-hero__slider {
  position: relative;
  width: min(var(--kz-slider-w, 660px), 94vw);
  /* never wider than the padded content box, so 94vw can't overflow on phones */
  max-width: 100%;
  margin: clamp(2px, 1vw, 14px) auto 0;
  outline: none;
  touch-action: pan-y;
}
.kazmi-hero__slider:focus-visible {
  outline: 2px solid var(--kz-bronze);
  outline-offset: 10px;
  border-radius: 4px;
}

/* soft floor shadow behind the stack */
.kazmi-hero__floor {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 62%;
  background: radial-gradient(55% 55% at 50% 55%, rgba(60,40,25,.3) 0%, rgba(60,40,25,.13) 55%, rgba(60,40,25,0) 78%);
  filter: blur(26px);
  z-index: 0;
  pointer-events: none;
}

/* the floating stack */
.kazmi-hero__stack {
  position: relative;
  width: 100%;
  z-index: 1;
  animation: kazmiHeroFloat 10s ease-in-out infinite;
  will-change: transform;
}
@keyframes kazmiHeroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* invisible sizing image — gives the stack a stable height, no CLS */
.kazmi-hero__sizer {
  visibility: hidden;
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

/* real slides */
.kazmi-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 40px 60px rgba(60,40,25,.2));
  backface-visibility: hidden;
}
.kazmi-hero__slide.is-active { opacity: 1; transform: none; }

/* ---------------- 5. Arrows ---------------- */
.kazmi-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: var(--kz-arrow-size, 48px);
  height: var(--kz-arrow-size, 48px);
  min-width: var(--kz-arrow-size, 48px);
  min-height: var(--kz-arrow-size, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--kz-arrow-border, var(--kz-border));
  background: var(--kz-arrow-bg, rgba(255,252,246,.72));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--kz-arrow-color, var(--kz-ink));
  font-size: var(--kz-arrow-icon, 16px);
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 400ms ease, border-color 400ms ease, color 400ms ease;
}
.kazmi-hero__arrow:hover,
.kazmi-hero__arrow:focus-visible {
  background: var(--kz-ink);
  border-color: var(--kz-ink);
  color: var(--kz-ivory);
}
.kazmi-hero__arrow:focus-visible { outline: 2px solid var(--kz-bronze); outline-offset: 3px; }
.kazmi-hero__arrow--prev { left: calc(-1 * var(--kz-arrow-offset, 60px)); }
.kazmi-hero__arrow--next { right: calc(-1 * var(--kz-arrow-offset, 60px)); }

/* ---------------- 6. Dots ---------------- */
.kazmi-hero__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kz-dot-gap, 12px);
  margin-top: clamp(8px, 1.4vw, 18px);
}
.kazmi-hero__dot {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
.kazmi-hero__dot:focus-visible { outline: 2px solid var(--kz-bronze); outline-offset: -6px; border-radius: 50%; }
.kazmi-hero__dot-pip {
  display: block;
  width: var(--kz-pip-size, 9px);
  height: var(--kz-pip-size, 9px);
  border-radius: 50%;
  background: var(--kz-pip-color, var(--kz-dot));
  transition: background-color 450ms ease, transform 450ms ease;
}
.kazmi-hero__dot[aria-current="true"] .kazmi-hero__dot-pip {
  background: var(--kz-pip-active, var(--kz-ink));
  transform: scale(1.25);
}

/* ---------------- 7. CTAs ---------------- */
.kazmi-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
.kazmi-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  padding: 16px 34px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 500ms ease, color 500ms ease, border-color 500ms ease;
}
.kazmi-hero__btn:focus-visible { outline: 2px solid var(--kz-bronze); outline-offset: 3px; }
.kazmi-hero__btn--filled {
  background: var(--kz-ink);
  color: var(--kz-ivory);
  border: 1px solid var(--kz-ink);
}
.kazmi-hero__btn--filled:hover {
  background: var(--kz-bronze);
  border-color: var(--kz-bronze);
  color: var(--kz-cream);
}
.kazmi-hero__btn--outline {
  background: transparent;
  color: var(--kz-ink);
  border: 1px solid var(--kz-hairline);
}
.kazmi-hero__btn--outline:hover { border-color: var(--kz-ink); }

/* entrance animation start state — removed by JS after it plays once */
.kazmi-hero--entrance .kazmi-hero__eyebrow,
.kazmi-hero--entrance .kazmi-hero__headline,
.kazmi-hero--entrance .kazmi-hero__tagline,
.kazmi-hero--entrance .kazmi-hero__dots,
.kazmi-hero--entrance .kazmi-hero__ctas { opacity: 0; }

/* empty state (no slides configured) */
.kazmi-hero__empty {
  margin-top: 24px;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kz-muted);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1099px) {
  .kazmi-hero__arrow--prev { left: -26px; }
  .kazmi-hero__arrow--next { right: -26px; }
}

/* below ~860px the slider is close enough to the viewport edge that the
   arrows must sit inside the image to avoid horizontal overflow */
@media (max-width: 859px) {
  .kazmi-hero__arrow--prev { left: 8px; }
  .kazmi-hero__arrow--next { right: 8px; }
}

@media (max-width: 767px) {
  .kazmi-hero { padding-left: 18px; padding-right: 18px; }
  .kazmi-hero__tagline { font-size: 14px; line-height: 1.85; }
  .kazmi-hero__dots { gap: 6px; }
}

@media (max-width: 400px) {
  .kazmi-hero__eyebrow { gap: 10px; }
  .kazmi-hero__eyebrow-rule { width: 22px; }
  .kazmi-hero__eyebrow-text { font-size: 9px; letter-spacing: .26em; }
  .kazmi-hero__btn { padding: 15px 26px; letter-spacing: .18em; }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  .kazmi-hero__stack { animation: none !important; }
  .kazmi-hero__slide,
  .kazmi-hero__dot-pip,
  .kazmi-hero__btn,
  .kazmi-hero__arrow { transition-duration: 1ms !important; }
  .kazmi-hero--entrance .kazmi-hero__eyebrow,
  .kazmi-hero--entrance .kazmi-hero__headline,
  .kazmi-hero--entrance .kazmi-hero__tagline,
  .kazmi-hero--entrance .kazmi-hero__dots,
  .kazmi-hero--entrance .kazmi-hero__ctas { opacity: 1; }
}