/* ============================================
   THE NAME — WebGL hero (homepage only)
   Ported from the "THE NAME" design handoff.
   This file is linked only from index.html.
   ============================================ */

/* Reserve the scrollbar gutter so locking/unlocking native scroll
   doesn't shift the layout on browsers with classic scrollbars. */
html {
  scrollbar-gutter: stable;
  overscroll-behavior-y: none;
}

/* Scroll lock while the hero owns the input (states 0/1) */
html.hero-locked {
  overflow: hidden;
}

/* ---- Fixed hero stage, behind everything ---- */
.hero-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--color-bg);
}

.hero-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Fallback DOM title (no-JS / no-WebGL / reduced motion) */
.hero-stage__title {
  position: absolute;
  inset: 0;
  z-index: 1; /* above the fallback overlay gradient (::after) */
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(4rem, 13vw, 12rem);
  line-height: 0.9;
  letter-spacing: 0.05em;
  color: var(--color-text);
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
}

/* ---- Darkening overlay (fades up across progress 0.75 → 1) ---- */
.hero-darken {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.4), rgba(10, 10, 10, 0.7));
  opacity: 0;
  pointer-events: none;
}

/* ---- Bouncing chevron cue (state 0 only, no text) ---- */
.hero-cue {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 2.2rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: opacity 1s ease;
}

.hero-cue svg {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-cue svg {
    animation: heroCueBounce 2.2s ease-in-out infinite;
  }
}

@keyframes heroCueBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(7px); opacity: 1; }
}

body.hero-scrolled .hero-cue {
  opacity: 0;
}

/* ---- Snap-state dots (diamonds, right edge) ---- */
.hero-dots {
  position: fixed;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.hero-dots button {
  appearance: none;
  background: transparent;
  border: none;
  width: 44px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.hero-dots button::before {
  content: "";
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  border: 1px solid var(--color-text-muted);
  transition: background 0.3s var(--ease-signature),
              border-color 0.3s var(--ease-signature);
}

.hero-dots button:hover::before {
  border-color: var(--color-gold-dark);
}

.hero-dots button.active::before {
  background: var(--color-gold);
  border-color: var(--color-gold);
}

/* ---- Nav: hidden during the hero theatre, slides in at state 2 ---- */
body.hero-active .nav {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 0.5s var(--ease-signature),
              transform 0.5s var(--ease-signature);
}

body.hero-active.hero-site .nav {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---- Content scrolls over the fixed canvas ---- */
.hero-spacer {
  height: 100vh;
}

.home-content {
  position: relative;
  z-index: 3;
}

/* Intro: the old hero copy, transparent over the full-bleed photo */
.home-intro {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 7rem 2rem 9rem;
}

.home-intro__heading {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: var(--color-gold);
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

.home-intro__description {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text);
  max-width: 560px;
  margin-bottom: 1rem;
}

.home-intro__description em {
  color: var(--color-gold);
  font-style: normal;
}

.home-intro__cta {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

/* Everything below the intro sits on an opaque background */
.home-solid {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 720px) {
  .home-intro {
    padding: 5rem 1.5rem 6rem;
  }
}

@media (max-width: 480px) {
  .home-intro__heading {
    font-size: 2rem;
  }

  .home-intro__description {
    font-size: 1rem;
  }
}

/* ---- Fallback: no-JS, no-WebGL, or prefers-reduced-motion ----
   A conventional static photo hero: photo + overlay + DOM title,
   visible nav, native scrolling, content reachable immediately. */
body:not(.hero-active) .hero-stage {
  background: url('/images/band-photo.webp') center / cover no-repeat;
}

body:not(.hero-active) .hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.4), rgba(10, 10, 10, 0.7));
}

body:not(.hero-active) .hero-stage canvas,
body:not(.hero-active) .hero-cue,
body:not(.hero-active) .hero-dots,
body:not(.hero-active) .hero-darken {
  display: none;
}

body:not(.hero-active) .hero-stage__title {
  display: flex;
}