/* ============================================================
   Rennuce — HERO SLIDER (hero.css)
   Full-viewport image slider for the homepage hero section.

   Load order: AFTER reset.css, typography.css, layout.css
   Depends on:  variables.css (--space-*, --color-*, --font-*)

   Sections:
     1.  Hero Shell
     2.  Slider & Slides
     3.  Media (image + overlays)
     4.  Content Container & Alignment Variants
     5.  Eyebrow, Title, Subtitle, Actions
     6.  Slide-Up Entry Animations
     7.  Slider Controls (Arrows + Dots)
     8.  Scroll Cue
     9.  Fallback (no image)
    10.  Reduced Motion
    11.  Responsive Overrides
   ============================================================ */


/* =====================================================
   1. HERO SHELL
   Full-viewport height. Sits directly below the sticky
   header — JS sets --header-total-height at runtime.
===================================================== */

.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  /* dynamic viewport height */
  min-height: 560px;
  max-height: 960px;
  /* cap on very tall screens */
  overflow: hidden;
  background-color: #0A0A0A;
  /* shows while image loads */
  isolation: isolate;
}


/* =====================================================
   2. SLIDER & SLIDES
   Slides stack absolutely inside the relative shell.
   Transitions: cross-fade with a subtle forward zoom.
   The active class is toggled by hero.js.
===================================================== */

.hero__slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Individual Slide ── */
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* Outgoing slide fades + zooms out */
  transform: scale(1.03);
  transition: opacity 0.85s var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1)),
    transform 0.85s var(--ease-in-out, cubic-bezier(0.4, 0, 0.2, 1));
  /* Prevent interaction on inactive slides */
  pointer-events: none;
  will-change: opacity, transform;
}

/* ── Active Slide ── */
.hero__slide--active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 1;
}

/* ── Outgoing Slide (JS adds this mid-transition) ── */
.hero__slide--leaving {
  opacity: 0;
  transform: scale(0.98);
  z-index: 0;
}


/* =====================================================
   3. MEDIA — IMAGE & OVERLAYS
===================================================== */

/* ── Figure wrapper — fills the entire slide ── */
.hero__media {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ── Full-bleed image ── */
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transform-origin: center center;
  transform: scale(1);
}

/* Ken Burns — animation use karo, transition nahi.
   Animation har baar slide active hote hi scale(1) se
   clean restart hoti hai — transition ki tarah "stuck
   mid-zoom" state nahi rehti (yahi jump/glitch ki wajah thi) */
@keyframes hero-ken-burns {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.06);
  }
}

.hero__slide--active .hero__img {
  animation: hero-ken-burns 5s var(--ease-out, ease-out) forwards;
}

/* ── Base Overlay — left-to-right dark scrim ── */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.15) 55%,
      rgba(0, 0, 0, 0.05) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Dark variant (men's slide — content right) */
.hero__overlay--dark {
  background: linear-gradient(255deg,
      rgba(0, 0, 0, 0.72) 0%,
      rgba(0, 0, 0, 0.40) 55%,
      rgba(0, 0, 0, 0.15) 100%);
}

/* Warm variant (shawls slide — content center) */
.hero__overlay--warm {
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.20) 0%,
      rgba(10, 6, 2, 0.55) 45%,
      rgba(16, 10, 2, 0.75) 100%);
}

/* Bottom vignette present on every slide */
.hero__slide::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.20), transparent);
  pointer-events: none;
  z-index: 2;
}


/* =====================================================
   4. CONTENT CONTAINER & ALIGNMENT VARIANTS
===================================================== */

/* Stretches to fill the slide above the bottom vignette */
.hero__content-container {
  position: absolute;
  inset: 0;
  z-index: 3;
  /* above overlay + vignette */
  display: flex;
  align-items: center;
  pointer-events: none;
  /* container transparent; children opt back in */
}

/* ── Content block ── */
.hero__content {
  max-width: 640px;
  pointer-events: auto;
}

/* Left-aligned (slide 1: women's) */
.hero__content--left {
  margin-right: auto;
  text-align: left;
}

/* Right-aligned (slide 2: men's) */
.hero__content--right {
  margin-left: auto;
  text-align: left;
  /* text stays left even when block is right-anchored */
}

/* Center-aligned (slide 3: shawls) */
.hero__content--center {
  margin: 0 auto;
  text-align: center;
}

.hero__content--center .hero__actions {
  justify-content: center;
}


/* =====================================================
   5. EYEBROW, TITLE, SUBTITLE, ACTIONS
===================================================== */

/* ── Eyebrow label ── */
.hero__eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs, 0.75rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brand-gold, #C9A96E);
  margin-bottom: var(--space-4, 1rem);
  line-height: 1;

  /* Gold left-bar accent */
  padding-left: var(--space-3, 0.75rem);
  border-left: 2px solid var(--color-brand-gold, #C9A96E);
}

/* Center-aligned slide: no left border */
.hero__content--center .hero__eyebrow {
  padding-left: 0;
  border-left: none;
  /* Replace with flanking lines */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 0.75rem);
}

.hero__content--center .hero__eyebrow::before,
.hero__content--center .hero__eyebrow::after {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--color-brand-gold, #C9A96E);
  opacity: 0.70;
  flex-shrink: 0;
}

/* ── Main Title ── */
.hero__title {
  font-family: var(--font-serif, 'Playfair Display', serif);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: var(--weight-bold, 700);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--color-brand-white, #FFFFFF);
  margin: 0 0 var(--space-5, 1.25rem);
}

/* Italic em — gold accent on the signature word */
.hero__title em {
  font-style: italic;
  font-weight: var(--weight-semibold, 600);
  color: var(--color-brand-gold, #C9A96E);
}

/* ── Subtitle ── */
.hero__subtitle {
  font-family: var(--font-sans);
  font-size: clamp(var(--text-base, 1rem), 1.4vw, var(--text-lg, 1.125rem));
  font-weight: var(--weight-regular, 400);
  color: rgba(255, 255, 255, 0.78);
  line-height: var(--leading-relaxed, 1.65);
  max-width: 460px;
  margin: 0 0 var(--space-8, 2rem);
}

.hero__content--center .hero__subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* ── Actions (button row) ── */
.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  flex-wrap: wrap;
}


/* =====================================================
   6. SLIDE-UP ENTRY ANIMATIONS
   JS sets --anim-delay (ms) from data-delay attribute,
   then adds .hero__slide--active to the slide.
   Elements with data-anim="slide-up" start hidden.
===================================================== */

/* Initial hidden state — all animatable children */
[data-anim="slide-up"] {
  opacity: 0;
  transform: translateY(28px);
  /* No transition here — animation handles it */
}

/* When slide becomes active, animate children in */
.hero__slide--active [data-anim="slide-up"] {
  animation: hero-slide-up 0.70s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
  /* JS sets inline style: animation-delay: Xms */
}

@keyframes hero-slide-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Convenience delay utilities (fallback if JS doesn't set inline style) */
.hero__slide--active [data-anim="slide-up"][data-delay="0"] {
  animation-delay: 0ms;
}

.hero__slide--active [data-anim="slide-up"][data-delay="80"] {
  animation-delay: 80ms;
}

.hero__slide--active [data-anim="slide-up"][data-delay="160"] {
  animation-delay: 160ms;
}

.hero__slide--active [data-anim="slide-up"][data-delay="240"] {
  animation-delay: 240ms;
}

.hero__slide--active [data-anim="slide-up"][data-delay="320"] {
  animation-delay: 320ms;
}

.hero__slide--active [data-anim="slide-up"][data-delay="100"] {
  animation-delay: 100ms;
}

.hero__slide--active [data-anim="slide-up"][data-delay="200"] {
  animation-delay: 200ms;
}

.hero__slide--active [data-anim="slide-up"][data-delay="300"] {
  animation-delay: 300ms;
}


/* =====================================================
   7. SLIDER CONTROLS — ARROWS + DOTS
===================================================== */

.hero__controls {
  position: absolute;
  bottom: var(--space-10, 2.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-5, 1.25rem);
}

/* ── Arrow buttons ── */
.hero__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.10);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-full, 9999px);
  color: rgba(255, 255, 255, 0.80);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--duration-base, 200ms) var(--ease-in-out),
    border-color var(--duration-base, 200ms) var(--ease-in-out),
    color var(--duration-base, 200ms) var(--ease-in-out),
    transform var(--duration-fast, 120ms) var(--ease-out);
  flex-shrink: 0;
}

.hero__arrow:hover {
  background: rgba(201, 169, 110, 0.20);
  border-color: rgba(201, 169, 110, 0.55);
  color: var(--color-brand-white, #fff);
}

.hero__arrow:active {
  transform: scale(0.93);
}

.hero__arrow:focus-visible {
  outline: 2px solid var(--color-brand-gold, #C9A96E);
  outline-offset: 3px;
}

.hero__arrow svg {
  flex-shrink: 0;
  /* No translateX on arrows — directional arrows should stay put */
  transition: none;
}

.hero__arrow--prev svg {
  margin-right: 1px;
  /* optical nudge */
}

.hero__arrow--next svg {
  margin-left: 1px;
}

/* ── Dots ── */
.hero__dots {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(255, 255, 255, 0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: width var(--duration-slow, 350ms) var(--ease-out),
    background var(--duration-base, 200ms) var(--ease-in-out),
    opacity var(--duration-base, 200ms) var(--ease-in-out);
  flex-shrink: 0;
}

.hero__dot:hover:not(.hero__dot--active) {
  background: rgba(255, 255, 255, 0.65);
}

/* Active dot expands into a pill */
.hero__dot--active,
.hero__dot[aria-selected="true"] {
  width: 28px;
  background: var(--color-brand-gold, #C9A96E);
}

.hero__dot:focus-visible {
  outline: 2px solid var(--color-brand-gold, #C9A96E);
  outline-offset: 3px;
  border-radius: var(--radius-full);
}


/* =====================================================
   8. SCROLL CUE
   Animated vertical line + label at the bottom-center.
   Disappears once user scrolls past the hero.
===================================================== */

.hero__scroll-cue {
  position: absolute;
  bottom: var(--space-8, 2rem);
  right: var(--space-8, 2rem);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  opacity: 1;
  transition: opacity var(--duration-slow, 350ms) var(--ease-in-out);

  /* Vertical writing mode for the label */
  writing-mode: vertical-rl;
}

/* Hide when JS adds .is-scrolled to hero or body */
.hero.is-scrolled .hero__scroll-cue,
.is-scrolled .hero__scroll-cue {
  opacity: 0;
  pointer-events: none;
}

/* Animated descending line */
.hero__scroll-line {
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom,
      var(--color-brand-gold, #C9A96E),
      rgba(201, 169, 110, 0));
  animation: scroll-line 1.8s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes scroll-line {
  0% {
    transform: scaleY(0);
    opacity: 0;
    transform-origin: top center;
  }

  30% {
    transform: scaleY(1);
    opacity: 1;
  }

  70% {
    transform: scaleY(1);
    opacity: 1;
  }

  100% {
    transform: scaleY(0);
    opacity: 0;
    transform-origin: bottom center;
  }
}

.hero__scroll-text {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  /* 10px */
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1;
  /* Rotate text back to normal since writing-mode rotated it */
  transform: rotate(180deg);
}


/* =====================================================
   9. FALLBACK — IMAGE FAILS TO LOAD
===================================================== */

/* When onerror fires, a class is added to the figure */
.hero__media--fallback {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.hero__media--fallback .hero__img {
  opacity: 0;
}

/* Slide-level fallback: show a rich gradient in brand colors */
.hero__slide:nth-child(1) .hero__media--fallback {
  background: linear-gradient(135deg, #1C1410 0%, #2A1F14 50%, #0A0A0A 100%);
}

.hero__slide:nth-child(2) .hero__media--fallback {
  background: linear-gradient(135deg, #0D0D0D 0%, #1A1A1A 50%, #111111 100%);
}

.hero__slide:nth-child(3) .hero__media--fallback {
  background: linear-gradient(135deg, #1A1208 0%, #241A0A 50%, #0F0B05 100%);
}


/* =====================================================
   10. REDUCED MOTION
   Collapse all animations to instant cuts.
===================================================== */

@media (prefers-reduced-motion: reduce) {

  .hero__slide {
    transition: opacity 0.01ms;
    transform: none !important;
  }

  .hero__slide--active .hero__img {
    transform: none;
    transition: none;
    animation: none;
  }

  .hero__slide--active [data-anim="slide-up"] {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero__scroll-line {
    animation: none;
    opacity: 0.50;
  }

  .hero__arrow {
    transition: none;
  }

  .hero__dot {
    transition: background var(--duration-fast, 120ms);
  }

}


/* =====================================================
   11. RESPONSIVE OVERRIDES
===================================================== */

/* ── LG: ≤ 1024px ── */
@media (max-width: 1024px) {

  .hero {
    max-height: 840px;
  }

  .hero__title {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
  }

  /* Arrows move closer to the dots */
  .hero__controls {
    gap: var(--space-4, 1rem);
  }

}

/* ── MD: ≤ 768px ── */
@media (max-width: 768px) {

  .hero {
    height: 92svh;
    min-height: 520px;
    max-height: none;
  }

  /* All content becomes center-aligned on mobile */
  .hero__content--left,
  .hero__content--right {
    margin: 0 auto;
    text-align: center;
  }

  .hero__content--left .hero__eyebrow,
  .hero__content--right .hero__eyebrow {
    padding-left: 0;
    border-left: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
  }

  .hero__content--left .hero__eyebrow::before,
  .hero__content--left .hero__eyebrow::after,
  .hero__content--right .hero__eyebrow::before,
  .hero__content--right .hero__eyebrow::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--color-brand-gold, #C9A96E);
    opacity: 0.70;
    flex-shrink: 0;
  }

  .hero__content--left .hero__actions,
  .hero__content--right .hero__actions {
    justify-content: center;
  }

  /* Subtitle max-width: full on mobile */
  .hero__subtitle {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Overlay covers more evenly on mobile (content centred) */
  .hero__overlay,
  .hero__overlay--dark {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.30) 0%,
        rgba(0, 0, 0, 0.65) 50%,
        rgba(0, 0, 0, 0.72) 100%);
  }

  /* Scroll cue: bottom-center instead of bottom-right */
  .hero__scroll-cue {
    right: 50%;
    transform: translateX(50%);
    writing-mode: horizontal-tb;
    flex-direction: row;
    bottom: var(--space-5, 1.25rem);
    gap: var(--space-2);
  }

  .hero__scroll-line {
    width: 40px;
    height: 1px;
    background: linear-gradient(to right,
        rgba(201, 169, 110, 0),
        var(--color-brand-gold, #C9A96E),
        rgba(201, 169, 110, 0));
    animation: scroll-line-h 1.8s ease-in-out infinite;
  }

  @keyframes scroll-line-h {
    0% {
      transform: scaleX(0);
      opacity: 0;
      transform-origin: left center;
    }

    30% {
      transform: scaleX(1);
      opacity: 1;
    }

    70% {
      transform: scaleX(1);
      opacity: 1;
    }

    100% {
      transform: scaleX(0);
      opacity: 0;
      transform-origin: right center;
    }
  }

  .hero__scroll-text {
    transform: none;
    writing-mode: horizontal-tb;
  }

  /* Controls: smaller arrows */
  .hero__arrow {
    width: 38px;
    height: 38px;
  }

  .hero__controls {
    bottom: var(--space-6, 1.5rem);
  }

  @keyframes hero-ken-burns-sm {
    from {
      transform: scale(1);
    }

    to {
      transform: scale(1.02);
    }
  }

  .hero__slide--active .hero__img {
    animation: hero-ken-burns-sm 5s var(--ease-out, ease-out) forwards;
  }


}

/* ── SM: ≤ 640px ── */
@media (max-width: 640px) {

  .hero {
    height: 88svh;
    min-height: 480px;
  }

  .hero__title {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .hero__subtitle {
    font-size: var(--text-base, 1rem);
  }

  /* Stack CTA buttons vertically on small phones */
  .hero__actions {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    width: 100%;
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Hide arrows — swipe gesture handles navigation */
  .hero__arrow {
    display: none;
  }

  .hero__controls {
    gap: var(--space-3, 0.75rem);
  }

}

/* ── XS: ≤ 480px ── */
@media (max-width: 480px) {

  .hero {
    min-height: 440px;
  }

  .hero__title {
    font-size: clamp(1.75rem, 9.5vw, 2.5rem);
  }

  /* Compact eyebrow side lines on very small screens */
  .hero__content--center .hero__eyebrow::before,
  .hero__content--center .hero__eyebrow::after,
  .hero__content--left .hero__eyebrow::before,
  .hero__content--left .hero__eyebrow::after,
  .hero__content--right .hero__eyebrow::before,
  .hero__content--right .hero__eyebrow::after {
    width: 16px;
  }

  .hero__scroll-cue {
    display: none;
    /* too cramped below 480px */
  }

}

/* =====================================================
   12. HERO BUTTON STYLES
   (btn--hero-primary & btn--hero-ghost)
===================================================== */

.btn--hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  background: var(--color-brand-gold, #C9A96E);
  color: var(--color-brand-black, #0A0A0A);
  font-family: var(--font-sans);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-btn, 0.375rem);
  cursor: pointer;
  transition: background 0.22s ease,
    transform 0.15s ease,
    box-shadow 0.22s ease;
  white-space: nowrap;
}

.btn--hero-primary:hover {
  background: var(--color-brand-gold-light, #DFC08A);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201, 169, 110, 0.35);
}

.btn--hero-primary:active {
  transform: translateY(0);
}

.btn--hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  background: transparent;
  color: #FFFFFF;
  font-family: var(--font-sans);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-btn, 0.375rem);
  cursor: pointer;
  transition: background 0.22s ease,
    border-color 0.22s ease,
    transform 0.15s ease;
  white-space: nowrap;
}

.btn--hero-ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.85);
  transform: translateY(-2px);
}

.btn--hero-ghost:active {
  transform: translateY(0);
}

/* Mobile stacking for hero buttons */
@media (max-width: 640px) {

  .btn--hero-primary,
  .btn--hero-ghost {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .hero__img {
    object-position: center center;
  }
}

/* =====================================================
   IMPROVED TEXT ANIMATIONS — SLIDE TRANSITION
===================================================== */

/* Jab slide active ho — animations reset ho ke dobara chalay */
.hero__slide [data-anim="slide-up"] {
  opacity: 0;
  transform: translateY(32px);
  animation: none;
}

.hero__slide--active [data-anim="slide-up"] {
  animation: hero-slide-up 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Delay classes */
.hero__slide--active [data-delay="0"] {
  animation-delay: 0ms;
}

.hero__slide--active [data-delay="100"] {
  animation-delay: 100ms;
}

.hero__slide--active [data-delay="200"] {
  animation-delay: 200ms;
}

.hero__slide--active [data-delay="300"] {
  animation-delay: 300ms;
}

.hero__slide--active .hero__title[data-anim="slide-up"] {
  animation-duration: 0.90s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
  .hero__img {
    object-position: center center;
  }
}