/* ==========================================================================
   Casa Alba — 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 50% black across the whole hero. */
.hero__overlay--flat {
  background: rgba(0, 0, 0, 0.5);
}

/* Top gradient: solid black fading to transparent by ~50% height. */
.hero__overlay--top {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.85) 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.85) 0%,
    rgba(0, 0, 0, 0) 50%
  );
}

/* --- Layer 3: center text block ------------------------------------------ */
.hero__text {
  position: absolute;
  inset: 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;
}

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

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

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