/* ============================================================
   hero.css — Hero section layout and scroll-driven animations
   ============================================================ */

/* ——— Scroll spacer: pushes page height so the fixed hero can be scrolled past ——— */
.scroll-spacer {
  height: 250vh;
  pointer-events: none;
}

/* ——— Hero section ——— */
.hero {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
  z-index: 0;
}

/* ——— Background image layer ——— */
/* Oversized via inset: -30% so parallax movement (max ~30vh up) never reveals bg edges */
.hero-bg {
  position: absolute;
  inset: -30%;
  background-size: cover;
  background-position: center 85%;
  background-repeat: no-repeat;
  opacity: 0;       /* starts hidden; JS fades it in on scroll */
  will-change: transform, opacity;
  transition: opacity 0.6s ease;
}

/* ——— Dark overlay above background image ——— */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 1;
}

/* ——— Hero title content ——— */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Load animation: fade in + drift upward */
  animation: heroFadeIn 3s ease forwards;
  will-change: opacity, transform;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ——— Title typography ——— */
.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  font-family: var(--font-heading);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.05;
}

.hero-title-line1 {
  display: block;
  font-size: clamp(6vw, 8vw, 10vw);
  letter-spacing: 0.45em;
}

.hero-title-line2 {
  display: block;
  font-size: clamp(2.2vw, 3.2vw, 4.5vw);
  letter-spacing: 0.55em;
  font-weight: 300;
  opacity: 0.85;
}

/* ——— Horizontal divider line (extends from center outward) ——— */
.hero-divider {
  width: 120px;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin-top: 2.8rem;
  transform: scaleX(0);
  transform-origin: center;
  animation: lineExpand 1.5s ease forwards;
  animation-delay: 2s;  /* appears after title has faded in */
}

@keyframes lineExpand {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ——— Scroll chevron ——— */
.hero-chevron {
  margin-top: 2rem;
  /* Fades in after line, then pulses indefinitely */
  opacity: 0;
  animation:
    chevronFadeIn  0.8s ease           forwards 3.2s,
    chevronPulse   2.5s ease-in-out    infinite  4.0s;
}

@keyframes chevronFadeIn {
  to { opacity: 0.2; }
}

@keyframes chevronPulse {
  0%, 100% { opacity: 0.2; }
  50%       { opacity: 0.6; }
}

.hero-chevron svg {
  display: block;
}

/* ——— Scroll-revealed navigation labels ——— */
.hero-nav {
  position: absolute;
  bottom: 8%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 4rem;
  z-index: 3;
}

.hero-nav-link {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition:
    opacity    0.6s ease,
    transform  0.6s ease;
}

/* Staggered entrance — delays are relative to when .visible is applied */
.hero-nav-link:nth-child(1) { transition-delay:   0ms; }
.hero-nav-link:nth-child(2) { transition-delay: 150ms; }
.hero-nav-link:nth-child(3) { transition-delay: 300ms; }
.hero-nav-link:nth-child(4) { transition-delay: 450ms; }

.hero-nav-link.visible {
  opacity: 0.75;
  transform: translateY(0);
  pointer-events: all;
}

.hero-nav-link:hover {
  opacity: 1;
}

/* ——— Mobile ——— */
@media (max-width: 767px) {
  /* Scale title to fit naturally without overflow */
  .hero-title-line1 { font-size: clamp(3.5rem, 12vw, 9rem); letter-spacing: 0.3em; }
  .hero-title-line2 { font-size: clamp(1rem, 4.5vw, 3rem);  letter-spacing: 0.3em; }

  /* Bottom nav replaced by hamburger on mobile — hide it */
  .hero-nav { display: none; }
}