/* ============================================================
   RENUCE — 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%;   /* favour upper body / model face */
  display:          block;
  /* Subtle Ken Burns on the active slide */
  transform-origin: center center;
  transition:       transform 6s linear;
}

/* Trigger the Ken Burns movement when slide is active */
.hero__slide--active .hero__img {
  transform: scale(1.06);
}

/* ── Base Overlay — left-to-right dark scrim ── */
.hero__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    105deg,
    rgba(0, 0, 0, 0.70) 0%,
    rgba(0, 0, 0, 0.40) 55%,
    rgba(0, 0, 0, 0.15) 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:     220px;
  background: linear-gradient(to top, rgba(0,0,0,0.45), 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(2.5rem, 5.5vw, 4.5rem);
  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; }


/* =====================================================
   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;
  }

  .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);
  }

}

/* ── 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 */
  }

}