/* ==========================================================================
   Mirage Furniture — Hero
   Full-width, full-height, animation-ready. Layers, back to front:
     1. Slides (carousel of 4, each image covers + overflows horizontally)
     2. Overlays (flat 50% black + top/bottom gradients)
     3. Center text block
     4. Pagination (bottom center)
     5. Navigation (top, above everything, never moves)
   All motion is JS-driven (see scripts/sections/hero.js); the durations and
   pan range live there as tunable variables.
   ========================================================================== */

.hero {
  /* Pinned to the viewport: later opaque sections scroll up over it. */
  position: sticky;
  top: 0;
  z-index: 0;                  /* sits below the scroll-over sections (z-index: 1) */
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;            /* clip the over-wide slide images */
  background: #000;            /* base behind slides while they load */
  color: var(--color-hero-text);
  isolation: isolate;          /* keep the nav on the hero's plane (contained stacking) */
}

/* --- Layer 1: slides ------------------------------------------------------ */
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Slides stack; only opacity changes, so images gently crossfade. */
.hero__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  opacity: 0;
  will-change: opacity;
  transition: opacity var(--hero-crossfade, 1600ms) ease;
}
.hero__slide.is-active {
  opacity: 1;
}

.hero__slide-img {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* --- Layer 2: overlays ---------------------------------------------------- */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Flat black across the whole hero. */
.hero__overlay--flat {
  background: rgba(0, 0, 0, 0.38);
}

/* Top gradient: solid black fading to transparent by ~50% height. */
.hero__overlay--top {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0) 50%
  );
}

/* Bottom gradient: mirror of the top. */
.hero__overlay--bottom {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0) 50%
  );
}

/* --- Layer 3: center text block ------------------------------------------ */
.hero__text {
  position: absolute;
  /* Centered within the space between the nav and pagination bands, not the
     full hero height, so it can never collide with either. Heights are
     measured and kept current by scripts/sections/hero.js (short viewports,
     where the nav wraps to several lines, is where a naive inset:0 would
     otherwise overlap the heading). */
  top: var(--hero-safe-top, 0px);
  right: 0;
  bottom: var(--hero-safe-bottom, 0px);
  left: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--nav-pad-x);
  pointer-events: none;
}

.hero__heading {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  color: var(--color-hero-text);
  letter-spacing: 0.01em;
  /* Driven by JS; start hidden so it can fade in on load. */
  opacity: 0;
  /* Mask for the line-reveal: the heading line rises up from behind this. */
  overflow: hidden;
  padding-bottom: 0.1em;
}

/* Inline line that JS rises up from behind the heading mask. */
.hero__heading-line {
  display: inline-block;
  will-change: transform;
}

/* Keyword sub-line inside the h1: visually an eyebrow under the display
   line, but part of the heading for search engines. Built by hero.js. */
.hero__heading-sub {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: clamp(0.7rem, 1.1vw, 0.85rem);
  line-height: 1.5;
  opacity: 0.88;
}

.hero__para {
  margin-top: var(--space-3);
  max-width: var(--reading-width);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-hero-text);
  opacity: 0;
}

/* CTA pair under the hero copy. The text layer has pointer-events: none, so
   re-enable them here. Initial opacity is set by hero.js (progressive
   enhancement: visible as-is if JS never runs). */
.hero__ctas {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.6rem, 1.5vw, 1rem);
  pointer-events: auto;
}
.hero__cta {
  display: inline-block;
  padding: 0.9rem 1.9rem;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--text-xs);
  color: var(--color-hero-text);
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: transparent;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.hero__cta:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}
.hero__cta--primary {
  color: #ffffff;
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.hero__cta--primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

/* --- Layer 4: pagination -------------------------------------------------- */
.hero__pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.75rem, 4vh, 3rem);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);   /* comfortable tap spacing */
}

.hero__page {
  position: relative;
  font-family: var(--font-display);
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-sm);
  line-height: 1;
  padding: var(--space-1) var(--space-1);
  color: var(--color-pagination-inactive);
  transition: color 0.5s ease;
}

.hero__page.is-active {
  color: var(--color-hero-text);
}

/* Thin progress line under the active digit, filled over the slide duration. */
.hero__page-progress {
  position: absolute;
  left: var(--space-1);
  right: var(--space-1);
  bottom: 0;
  height: 1px;
  background: var(--color-hero-text);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* Thumb-sized slide targets on phones. Declared after .hero__page-progress so
   the bumped offset wins the cascade: the underline is anchored to the button
   box, so it shifts up by the same amount the padding grows and stays sitting
   tight under the digit. */
@media (max-width: 760px) {
  .hero__page {
    padding: 0.85rem var(--space-1);
  }
  .hero__page-progress {
    bottom: 0.35rem;
  }
}

/* The fixed WhatsApp disc sits bottom-right at z-index 45, above the hero.
   Below roughly 420px the centred pagination row grew wide enough to run
   under it, and the last slide number stopped responding to taps entirely
   (the disc won the hit test, not the button). Reserve the same right-hand
   gutter .mobile-cta__btn already reserves for the disc so the row centres
   in what is left. Scoped to the .mobile-cta breakpoint, comfortably wider
   than where the collision actually starts. */
@media (max-width: 640px) {
  .hero__pagination {
    padding-right: 4.25rem;
  }
}

/* --- Layer 5: navigation (top, above everything, never moves) ------------ */
.hero__nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--nav-pad-y) var(--nav-pad-x);
}

.hero__nav-group {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.hero__nav-group--left {
  justify-content: flex-start;
}

.hero__nav-group--right {
  justify-content: flex-end;
}

.hero__nav-link {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs);
  color: var(--color-hero-text);
  opacity: 0.85;
  transition: opacity 0.4s ease;
}

.hero__nav-link:hover {
  opacity: 1;
}

.hero__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  color: var(--color-hero-text);
  text-align: center;
  text-decoration: none;
}

.hero__logo-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: clamp(1.25rem, 2.6vw, 2rem);   /* comfortably large, fits the longer name */
  line-height: 1;
  white-space: nowrap;
}

.hero__logo-tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.62rem, 1vw, 0.8rem);
  letter-spacing: 0.04em;
  line-height: 1;
  opacity: 0.82;
  white-space: nowrap;
}

/* On mobile, lighten the overlays further so the images breathe more. */
@media (max-width: 640px) {
  .hero__overlay--flat {
    background: rgba(0, 0, 0, 0.16);
  }
  .hero__overlay--top {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0) 50%
    );
  }
  .hero__overlay--bottom {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0) 50%
    );
  }
}

/* On short viewports (small/older phones, or any phone in landscape), the
   nav can wrap to 3 lines and eat most of the available height; tighten the
   heading/paragraph so the safe-area band (measured in hero.js) always has
   room to fit them without crowding the pagination underneath. */
@media (max-height: 560px) {
  .hero__heading {
    font-size: clamp(1.75rem, 5.2vw, 4rem);
  }
  .hero__para {
    margin-top: var(--space-2);
    font-size: 1rem;
    line-height: 1.45;
  }
  /* Drop the keyword sub-line and tighten the CTAs so the safe-area band
     still fits everything on very short screens. */
  .hero__heading-sub {
    display: none;
  }
  .hero__ctas {
    margin-top: var(--space-2);
  }
  .hero__cta {
    padding: 0.65rem 1.3rem;
  }
}

/* Mid-height phones (e.g. iPhone SE class): the wrapped 3-row nav leaves the
   safe band just too small for the full stack; drop the keyword sub-line
   first (Googlebot's mobile viewport is taller, so it still renders it). */
@media (max-height: 700px) and (max-width: 640px) {
  .hero__heading-sub {
    display: none;
  }
  .hero__ctas {
    margin-top: var(--space-2);
  }
}

/* Short AND narrow (small phones in portrait): the wrapped 3-row nav plus
   stacked CTAs leave no room for the paragraph, keep heading + CTAs, which
   is the standard compact luxury hero. */
@media (max-height: 560px) and (max-width: 640px) {
  .hero__para {
    display: none;
  }
}

/* On narrow screens, fold the side nav groups under the logo gracefully. */
@media (max-width: 640px) {
  .hero__nav {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--space-2);
    text-align: center;
  }
  .hero__nav-group {
    gap: var(--space-3);
  }
  .hero__logo {
    order: -1;
  }
  /* Lift the tagline above the clamp floor (~9.9px) so it clears 12px. */
  .hero__logo-tagline {
    font-size: 0.78rem;
  }
  /* Generous touch targets on mobile (text alone is only ~19px tall). */
  .hero__nav-link {
    display: inline-block;
    padding: 0.8rem 0.9rem;
  }
}