/* Hero presentation overrides, v2. The film, seek engine, scroll distance and media are
   unchanged. app.js differs from the approved copy by one threshold (INVITE_AT): the closing
   question appears at 80% of the film instead of after the last frame settles.
   This file only changes what sits on top of the film: the lockup, the closing moment,
   and the fade that lets the film surface into the page. */

/* Header: one Bone bar floating over the film. The primary color-light lockup sits on its own
   ground (the logo file's clear space is its padding), with a plain link and a dark chip that uses
   the same colon language as the chips at the end of the film. */
.stage::before { display: none; }
.masthead {
  --logo-h: clamp(2.7rem, 2.2rem + .9vw, 3.1rem);
  left: var(--ah-gutter); right: var(--ah-gutter); top: max(1rem, env(safe-area-inset-top));
  display: block;
}
.hero-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .3rem .4rem .3rem .3rem;
  background: var(--ah-bone); border-radius: 14px;
  box-shadow: 0 22px 44px -26px rgb(11 13 14 / .6), inset 0 1px 0 rgb(255 255 255 / .5);
}
.hero-nav .brand { display: block; width: auto; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: var(--ah-radius-control); }
.hero-nav .brand picture { display: block; }
.hero-nav .brand img { width: auto; height: var(--logo-h); }
.masthead-links { display: flex; align-items: center; gap: .25rem; margin: 0; }
.hero-link, .hero-cta {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  border-radius: var(--ah-radius-control); font-size: .9375rem; font-weight: 650;
  text-decoration: none; white-space: nowrap;
  transition: background-color 160ms var(--v2-ease), transform 120ms var(--v2-ease);
}
.hero-link { padding: 0 1rem; color: var(--ah-ink); }
.hero-cta { gap: .7rem; padding: 0 1.1rem 0 .95rem; color: var(--ah-bone); background: var(--ah-ink); }
.hero-cta .colon { --c: .26em; }
.hero-link:active, .hero-cta:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .hero-link:hover { background: rgb(11 13 14 / .06); }
  .hero-cta:hover { background: #1b2120; }
}

/* The closing moment: a real question on the open water, not a small card in the corner. */
.finish-scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(62% 74% at 86% 70%, rgb(243 236 227 / .9) 0%, rgb(243 236 227 / .72) 40%, rgb(243 236 227 / 0) 74%);
  opacity: 0; transition: opacity 520ms var(--v2-ease);
}
.opening:has(.finish-card:not([hidden])) .finish-scrim { opacity: 1; }

.opening .finish-card {
  left: auto; right: var(--ah-gutter); top: auto; bottom: clamp(4.5rem, 12vh, 8.5rem);
  width: min(37rem, 45vw); max-height: none; overflow: visible;
  padding: 0; background: none; box-shadow: none; border-radius: 0; color: var(--ah-ink);
}
.finish-card #open-opportunity, .finish-card #opportunity-picker { display: none !important; }
.finish-card h2 {
  font-size: clamp(2.6rem, 1.2rem + 3.1vw, 4.75rem); line-height: .98;
  letter-spacing: -.05em; font-weight: 700; margin: 0; text-wrap: balance;
}
.finish-card h2 .w-light { font-weight: 300; letter-spacing: -.04em; }
.finish-lede { margin-top: 1.1rem; font-size: 1.125rem; line-height: 1.5; color: #252925; max-width: 30rem; }
.handoff-chips { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.5rem; }
.handoff-chip {
  display: inline-flex; align-items: center; gap: .8rem;
  min-height: 3.25rem; padding: .75rem 1.15rem .75rem 1rem;
  border-radius: var(--ah-radius-control); background: var(--ah-ink); color: var(--ah-bone);
  font-size: 1rem; font-weight: 650; text-decoration: none;
  box-shadow: 0 14px 28px -18px rgb(11 13 14 / .7);
  transition: transform 160ms var(--v2-ease), background-color 160ms var(--v2-ease);
  animation: chip-in 560ms var(--v2-ease) both;
}
.handoff-chip .colon { --c: .28em; }
.handoff-chip:nth-child(2) { animation-delay: 70ms; }
.handoff-chip:nth-child(3) { animation-delay: 140ms; }
.handoff-chip:active { transform: scale(.97); }
.finish-note { margin-top: 1.1rem; font-size: .9375rem; color: #2c302c; }
.finish-note a { color: var(--ah-link); font-weight: 700; text-underline-offset: .22em; }
@media (hover: hover) and (pointer: fine) {
  .handoff-chip:hover { transform: translateY(-2px); background: #1b2120; }
}
@keyframes chip-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The film ends on water; the page begins on Bone. Fade one into the other as the stage leaves. */
.stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 64%;
  z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(243 236 227 / 0) 0%, rgb(243 236 227 / .62) 52%, var(--ah-bone) 100%);
  opacity: var(--exit, 0);
}
.scene-progress { transition: opacity 400ms var(--v2-ease); }
.opening:has(.finish-card:not([hidden])) .scene-progress { opacity: 0; }

@media (max-width: 767px) {
  .opening .finish-card {
    left: var(--ah-gutter); right: var(--ah-gutter); width: auto;
    bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + .25rem);
  }
  .finish-card h2 { font-size: clamp(2.15rem, 8.8vw, 3rem); }
  .finish-lede { font-size: 1rem; margin-top: .75rem; }
  .handoff-chips { gap: .5rem; margin-top: 1.1rem; }
  .handoff-chip { min-height: 3rem; padding: .6rem .9rem .6rem .8rem; font-size: .9375rem; }
  .finish-scrim {
    background: linear-gradient(0deg, rgb(243 236 227 / .95) 0%, rgb(243 236 227 / .82) 42%, rgb(243 236 227 / 0) 72%);
  }
  .masthead { --logo-h: 2.25rem; }
  .hero-nav { padding: .2rem .25rem .2rem .2rem; border-radius: 12px; gap: .5rem; }
  .hero-link, .hero-cta { min-height: 2.75rem; font-size: .8125rem; }
  .hero-link { padding: 0 .55rem; }
  .hero-cta { padding: 0 .75rem 0 .65rem; gap: .5rem; }
}
@media (max-height: 620px) and (min-width: 768px) {
  .opening .finish-card { bottom: 3.5rem; }
  .finish-card h2 { font-size: 2.6rem; }
  .finish-lede { display: none; }
}
@media (max-width: 420px) { .cta-the { display: none; } }
@media (max-width: 380px) {
  .masthead { --logo-h: 1.8rem; }
  .hero-link { padding: 0 .35rem; }
  .hero-cta { padding: 0 .5rem; gap: .45rem; }
}