/* ==========================================================================
   2. Hero — "Create. Capture. Inspire."
   The section is several screens tall; its inner block is sticky and holds the
   WebGL doorway. Scrolling pushes the camera through the arch (hero.scene.js)
   while the headline splits apart (hero.js).
   ========================================================================== */

.hero {
  position: relative;
  background: var(--night);
}

html.full .hero {
  height: calc(var(--vh-full) * 3.6);
}

.hero__sticky {
  position: sticky;
  top: 0;
  height: var(--vh-full);
  overflow: hidden;
  background: radial-gradient(90% 70% at 62% 45%, #3b2010 0%, #170d06 55%, #0a0604 100%);
}

.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(8, 5, 3, 0.94) 0%, rgba(8, 5, 3, 0.62) 32%, rgba(8, 5, 3, 0) 62%),
    radial-gradient(120% 90% at 50% 40%, rgba(8, 5, 3, 0) 55%, rgba(8, 5, 3, 0.7) 100%);
}

@media (min-width: 900px) {
  .hero__scrim {
    background:
      linear-gradient(90deg, rgba(8, 5, 3, 0.86) 0%, rgba(8, 5, 3, 0.5) 34%, rgba(8, 5, 3, 0) 60%),
      linear-gradient(0deg, rgba(8, 5, 3, 0.7) 0%, rgba(8, 5, 3, 0) 34%),
      radial-gradient(120% 90% at 60% 45%, rgba(8, 5, 3, 0) 55%, rgba(8, 5, 3, 0.65) 100%);
  }
}

/* ---------- headline block ---------- */

.hero__content {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  /* pinned to the top and sized to the small viewport, so the text never moves when a phone's toolbar collapses */
  top: 0;
  height: var(--vh-safe);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(5.5rem, 13vh, 8rem);
  pointer-events: none;
}

.hero__content > * {
  pointer-events: auto;
}

.hero__eyebrow {
  margin-bottom: clamp(1rem, 2.4vh, 1.75rem);
  overflow: hidden;
}

.hero__eyebrow span {
  display: inline-block;
}

.hero__title {
  font-size: clamp(3.2rem, 15.8vw, 5.4rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  margin-left: -0.04em;
  pointer-events: none;
}

.hero__line {
  display: block;
  width: max-content;
  max-width: 100%;
  /* padding leaves room for descenders and italic overhang inside the reveal mask */
  padding: 0.07em 0.14em 0.17em 0.04em;
  margin: -0.07em -0.14em -0.17em -0.04em;
  overflow: hidden;
  will-change: transform, opacity;
}

.hero__line.is-in {
  overflow: visible;
}

.hero__line--2 {
  margin-left: 0.52em;
}

.hero__line--3 {
  margin-left: 0.14em;
}

.hero__line em {
  font-style: italic;
  color: var(--gold);
  letter-spacing: -0.02em;
  text-shadow: 0 0 60px rgba(227, 154, 69, 0.35);
}

.hero__sub {
  margin-top: clamp(1.4rem, 3.4vh, 2.4rem);
}

.hero__lede {
  max-width: 31rem;
  font-size: clamp(0.98rem, 1.15vw, 1.12rem);
  color: var(--text-soft);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: clamp(1.4rem, 3vh, 2.1rem);
}

@media (max-width: 899px) {
  .hero__content {
    padding-bottom: clamp(4.4rem, 11vh, 6.5rem);
  }

  .hero__lede {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .hero__cta {
    gap: 0.6rem;
  }

  .hero__cta .btn {
    flex: 1 1 100%;
    min-height: 3.1rem;
  }
}

/* small phones: let the doorway breathe */
@media (max-width: 899px) and (max-height: 700px) {
  .hero .hero__hint {
    display: none;
  }

  .hero__content {
    padding-bottom: clamp(1.6rem, 4.5vh, 2.5rem);
  }
}

@media (min-width: 900px) {
  .hero__content {
    right: auto;
    width: min(56vw, 860px);
    padding-bottom: clamp(3.5rem, 9vh, 6.5rem);
  }

  .hero__title {
    font-size: clamp(5rem, 10.6vw, 10.5rem);
  }

  .hero__line--2 {
    margin-left: 0.78em;
  }

  .hero__line--3 {
    margin-left: 0.22em;
  }
}

/* short landscape screens */
@media (max-height: 620px) and (min-width: 700px) {
  .hero__title {
    font-size: clamp(3rem, 15vh, 6rem);
  }
  .hero__lede {
    display: none;
  }
}

/* phones held sideways */
@media (max-height: 480px) {
  .hero__title {
    font-size: clamp(2.4rem, 15vh, 4.2rem);
  }

  .hero__lede,
  .hero .hero__hint {
    display: none;
  }

  .hero__eyebrow {
    margin-bottom: 0.6rem;
  }

  .hero__sub {
    margin-top: 0.9rem;
  }

  .hero__cta {
    margin-top: 0;
  }

  .hero__cta .btn {
    flex: 0 1 auto;
    min-height: 2.8rem;
  }

  .hero__content {
    padding-bottom: 1.4rem;
  }
}

/* ---------- mid-journey line ---------- */

.hero__interlude {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: calc(var(--vh-full) - var(--vh-safe) + clamp(3rem, 9vh, 5.5rem));
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.hero__interlude .display {
  margin-top: 0.9rem;
  font-size: clamp(2.1rem, 5.2vw, 4.4rem);
  text-shadow: 0 2px 30px rgba(8, 5, 3, 0.9), 0 0 80px rgba(8, 5, 3, 0.7);
}

/* ---------- scroll hint ---------- */

.hero__hint {
  position: absolute;
  right: var(--pad);
  bottom: clamp(1.5rem, 4.5vh, 3rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-soft);
  pointer-events: none;
}

.hero__hint i {
  position: relative;
  display: block;
  width: 1px;
  height: 46px;
  background: rgba(248, 246, 242, 0.2);
  overflow: hidden;
}

.hero__hint i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  animation: hint 2.2s var(--ease-in-out) infinite;
}

@keyframes hint {
  0% { transform: translateY(-100%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@media (max-width: 899px) {
  .hero__hint {
    left: var(--pad);
    right: auto;
  }
}

/* fades the last frames of the push-through into the next section */
.hero__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 80% at 50% 45%, #2a1509 0%, var(--night) 70%);
  opacity: 0;
  pointer-events: none;
}

/* ---------- lite fallback (no WebGL / reduced motion) ---------- */

.hero__fallback {
  display: none;
}

html.lite .hero__sticky {
  position: relative;
  min-height: var(--vh-safe);
  height: auto;
}

html.lite .hero__content {
  position: relative;
  left: auto;
  right: auto;
  min-height: var(--vh-safe);
  height: auto;
  padding: calc(var(--nav-h) + 3rem) var(--pad) clamp(4.5rem, 12vh, 7rem);
}

html.lite .hero__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: calc(var(--nav-h) + 2vh);
}

html.lite .hero__fallback-arch {
  position: relative;
  width: min(74vw, 46vh, 520px);
  aspect-ratio: 3 / 4.4;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  box-shadow: 0 0 140px 20px rgba(227, 154, 69, 0.32), 0 0 0 1px rgba(199, 163, 93, 0.35);
}

html.lite .hero__fallback-arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

html.lite .hero__interlude,
html.lite .hero__veil,
html.lite .hero__hint {
  display: none;
}

@media (min-width: 900px) {
  html.lite .hero__fallback {
    justify-content: flex-end;
    padding-right: clamp(4rem, 12vw, 14rem);
  }
}