/* Hero styles for the three directions. Loaded on the homepage only.
   The pin is CSS sticky inside a tall section, so the layout is stable with
   or without JavaScript. GSAP only drives progress. */

.hero {
  position: relative;
  height: 350vh;
  background: var(--green-deep);
  color: var(--cream);
}
.hero__pin {
  position: sticky;
  top: 0;
  /* Large viewport height: the pin never resizes when the mobile URL bar
     collapses on first scroll (100dvh did, which jolted the scrub). The
     content lifts by the bar's height so nothing sits under it. */
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__poster, .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;   /* TODO 9:16 cuts needed before launch; center focal point holds until then */
}
.hero__poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero__poster--late { opacity: 0; transition: opacity var(--dur) linear; }
.hero__poster--late.is-visible { opacity: 1; }
.hero__poster--middle { z-index: 1; }
.hero__video { z-index: 2; opacity: 0; transition: opacity 0.18s linear; }
.hero__video.is-active { opacity: 1; }
.hero__poster--end { z-index: 3; }

/* Legibility scrim: bottom-weighted, deep green */
.hero__scrim {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(to top, rgb(22 41 31 / 0.85) 0%, rgb(22 41 31 / 0.45) 32%, rgb(22 41 31 / 0) 62%),
    linear-gradient(to bottom, rgb(22 41 31 / 0.35) 0%, rgb(22 41 31 / 0) 22%);
}

/* Content */
.hero__content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding-bottom: clamp(3.5rem, 8vh, 7rem);
}
@supports (height: 100svh) {
  /* keep the copy above the URL bar while it is showing */
  .hero__content { padding-bottom: calc(clamp(3.5rem, 8svh, 7rem) + (100lvh - 100svh)); }
}
.hero__title {
  color: var(--cream);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-weight: var(--w-bold);
  text-wrap: balance;
  max-width: 12ch;
}
.hero__word { display: inline-block; }
.hero__word--b { color: var(--gold); }
.hero__sub {
  margin-top: var(--s-5);
  max-width: 34rem;
  font-size: var(--fs-md);
  color: var(--cream);
  text-shadow: 0 1px 12px rgb(22 41 31 / 0.5);
}
.hero__actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Scroll hint */
.hero__hint {
  position: absolute; right: var(--gutter); bottom: var(--s-5); z-index: 6;
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--cream); opacity: 0.85;
}
.hero__hint i { display: block; width: 3rem; height: 1px; background: var(--gold); position: relative; overflow: hidden; }
.hero__hint i::after {
  content: ""; position: absolute; inset: 0; background: var(--cream);
  transform: translateX(-100%);
  animation: hero-hint 1.8s var(--ease-in-out) infinite;
}
@keyframes hero-hint { to { transform: translateX(100%); } }

/* Motion state: JS adds .hero--motion before building the timeline, so the
   pieces GSAP reveals start hidden. Without JS everything stays visible. */
.hero--motion .hero__word--b,
.hero--motion .hero__sub,
.hero--motion .hero__actions { opacity: 0; }

/* Static state: reduced motion, no GSAP, or a missing direction.
   The poster is the whole hero. No video is ever attached. */
.hero--static { height: auto; }
.hero--static .hero__pin { position: relative; height: auto; min-height: min(88vh, 52rem); }
.hero--static .hero__video, .hero--static .hero__poster--late, .hero--static .hero__hint { display: none; }
.hero--static .hero__content { position: relative; padding-top: 40vh; }
.hero--static .hero__word--b { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero__pin { position: relative; height: auto; min-height: min(88vh, 52rem); }
  .hero__video, .hero__poster--late, .hero__hint { display: none; }
  .hero__content { position: relative; padding-top: 40vh; }
  .hero__word--b, .hero__sub, .hero__actions { opacity: 1 !important; }
}

/* ---------- Direction B: linen, green text, cream scrim ---------- */
.hero--b { background: var(--cream); color: var(--green); }
.hero--b .hero__scrim {
  background:
    linear-gradient(to top, rgb(244 238 228 / 0.96) 0%, rgb(244 238 228 / 0.7) 34%, rgb(244 238 228 / 0) 64%);
}
.hero--b .hero__title { color: var(--green); }
.hero--b .hero__word--b { color: var(--gold-text); }
.hero--b .hero__sub { color: var(--ink); text-shadow: none; }
.hero--b .hero__hint { color: var(--green); }
.hero--b .hero__hint i::after { background: var(--green); }
.hero--b .hero__comma { display: inline-block; }
.hero--b.hero--motion .hero__comma { opacity: 0; }

/* ---------- Direction C: wordmark, hairline, marquee ---------- */
.hero--c .hero__scrim--c {
  background:
    linear-gradient(to top, rgb(22 41 31 / 0.94) 0%, rgb(22 41 31 / 0.78) 30%, rgb(22 41 31 / 0.45) 52%, rgb(22 41 31 / 0.12) 68%, rgb(22 41 31 / 0.3) 100%);
}
.hero__mark {
  position: absolute; left: 0; right: 0; top: calc(var(--header-h) + 6vh); z-index: 5;
  display: grid; place-items: center;
  padding-inline: var(--gutter);
}
.hero__mark img {
  width: min(92vw, 68rem);
  height: auto;
  filter: drop-shadow(0 8px 30px rgb(22 41 31 / 0.35));
  transform-origin: 50% 50%;
}
.hero__hairline {
  position: absolute; left: 0; width: 100%; top: 56%; height: 2px; z-index: 5;
  overflow: visible;
}
.hero__hairline line {
  stroke: var(--gold); stroke-width: 1.5; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.hero--static .hero__hairline line { stroke-dashoffset: 0; }
.hero--c .hero__content { padding-bottom: clamp(5rem, 12vh, 9rem); }
.hero--c .hero__title { font-size: var(--fs-xl); max-width: none; }
.hero--c .hero__sub { font-size: var(--fs-base); }
.hero__marquee {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  padding-block: var(--s-3);
  border-top: 1px solid rgb(201 168 118 / 0.35);
  background: rgb(22 41 31 / 0.55);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.hero__marquee ul {
  display: flex; gap: var(--s-8); width: max-content;
  font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--gold-60);
  animation: hero-marquee 48s linear infinite;
}
.hero__marquee li { white-space: nowrap; display: flex; align-items: center; gap: var(--s-8); }
.hero__marquee li::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
@keyframes hero-marquee { to { transform: translateX(-50%); } }
.hero--c .hero__hint { bottom: calc(var(--s-5) + 3.25rem); }
@media (prefers-reduced-motion: reduce) {
  .hero__marquee ul { animation: none; }
  .hero__hairline line { stroke-dashoffset: 0; }
}

/* ---------- Review-only switcher. TODO remove before launch ---------- */
.hero-switch {
  position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 200;
  display: flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
  background: var(--green-deep); color: var(--cream);
  border: 1px solid rgb(201 168 118 / 0.5); border-radius: 999px;
  font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase;
  box-shadow: var(--shadow-md);
}
.hero-switch span { margin-right: var(--s-2); color: var(--gold-60); }
.hero-switch a {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  color: var(--cream); text-decoration: none; font-weight: var(--w-medium);
}
.hero-switch a[aria-current="true"] { background: var(--gold); color: var(--green); }
.hero-switch a:hover { background: rgb(201 168 118 / 0.25); }