/* Hero chapter. Full-bleed scroll-driven opening for the landing story.
   Loads after cinematic.css and replaces the painterly hero treatment.
   Copy is unchanged; only scale, colour, art and motion are new. */

body.on-landing { overflow-x: clip; }
/* The full-bleed chapters are 100vw, which counts the scrollbar where
   scrollbars always show (Safari with a mouse, Windows), so the page was a
   scrollbar wider than the window. The body clip alone is not carried up to
   the viewport in Safari; on the root it is. clip, not hidden, so the sticky
   chapters keep the window as their scroller. */
html:has(body.on-landing) { overflow-x: clip; }

.landing-story .story-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(var(--gutter, 26px), calc(50vw - 660px));
  padding-block: clamp(150px, 20vh, 210px) clamp(44px, 6vh, 72px);
  min-height: min(1000px, 100svh);
  max-height: 1080px;
  overflow: hidden;
  background: var(--hero-plate);
  color: var(--hero-ink);

  --hero-plate: var(--bg);
  --hero-ink: #16281e;
  --hero-sub: #41563f;
  --hero-accent: #2f5c38;
  --hero-veil: #eef2e9;
  --hero-cta-bg: #2f5c38;
  --hero-cta-ink: #f7faf2;
  --hero-art-brightness: 1;
  /* No bottom dissolve: the next chapter is the near-black night scene, so
     fading to paper first would put a pale stripe between two dark areas. */
  --hero-bottom-fade: none;
}

/* ------------------------------------------------------------------ art */

.hero-stage {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  /* Script drifts this with the pointer; the scale keeps the edges covered. */
  transform: scale(1.04);
  transform-origin: 50% 50%;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .hero-stage { transform: none; transition: none; }
}

.hero-art,
.hero-loop {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% center;
  filter: brightness(var(--hero-art-brightness)) saturate(0.94);
  transform-origin: 62% 50%;
}

.hero-loop {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.story-hero.loop-on .hero-loop { opacity: 1; }

/* Hero motion control removed: the photograph drifts with the pointer. */
.hero-motion-removed {
  position: absolute;
  z-index: 3;
  right: max(var(--gutter, 26px), calc(50vw - 660px));
  bottom: clamp(20px, 3vh, 32px);
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--hero-ink) 34%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--hero-veil) 62%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--hero-ink);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.hero-motion:hover { border-color: color-mix(in srgb, var(--hero-ink) 58%, transparent); }

.hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(97deg,
      color-mix(in srgb, var(--hero-veil) 90%, transparent) 0%,
      color-mix(in srgb, var(--hero-veil) 74%, transparent) 26%,
      color-mix(in srgb, var(--hero-veil) 28%, transparent) 48%,
      transparent 68%),
    var(--hero-bottom-fade);
}

/* Nothing guarantees what the photograph is doing behind the floating bar,
   so a short scrim at the very top keeps it legible. */
.hero-veil::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 190px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--hero-veil) 74%, transparent) 0%,
    color-mix(in srgb, var(--hero-veil) 38%, transparent) 46%,
    transparent 100%);
}

/* ----------------------------------------------------------------- copy */

.hero-copy { position: relative; z-index: 2; max-width: 660px; }

.landing-story .story-hero .eyebrow {
  color: var(--hero-accent);
  font-size: 11px;
  letter-spacing: 1.9px;
  margin-bottom: 26px;
}

.landing-story .story-hero h1 {
  max-width: 100%;
  font-weight: 500;
  line-height: 1.08;
  color: var(--hero-ink);
}

.landing-story .story-hero h1 span { color: var(--hero-accent); }

.landing-story .hero-close {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 420px;
  margin-top: clamp(22px, 2.6vh, 32px);
}

.landing-story .hero-close p {
  color: var(--hero-sub);
  font-size: 16px;
  line-height: 1.7;
  max-width: 400px;
}

/* --------------------------------------------------------------- motion */

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * {
    animation: heroRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--i, 0) * 95ms + 60ms);
  }

  .hero-art { animation: heroSettle 1.6s cubic-bezier(0.16, 1, 0.3, 1) both; }

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

  @keyframes heroSettle {
    from { opacity: 0; transform: scale(1.06); }
    to   { opacity: 1; transform: scale(1); }
  }

  @supports (animation-timeline: scroll()) {
    .hero-art {
      animation:
        heroSettle 1.6s cubic-bezier(0.16, 1, 0.3, 1) both,
        heroRecede linear both;
      animation-timeline: auto, scroll(root block);
      animation-range: normal, 0 100svh;
    }

    .hero-loop {
      animation: heroRecede linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100svh;
    }

    .hero-copy {
      animation: heroDepart linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 78svh;
    }

    @keyframes heroRecede { to { transform: scale(1.09) translateY(-2.5%); } }

    @keyframes heroDepart {
      0%,  32% { opacity: 1; transform: translateY(0); }
      100%     { opacity: 0; transform: translateY(-58px); }
    }
  }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1000px) {
  .hero-copy { max-width: 560px; }
  .hero-art, .hero-loop { object-position: 72% center; }
}

@media (max-width: 760px) {
  .landing-story .story-hero {
    min-height: min(820px, 100svh);
    max-height: none;
    padding-block: clamp(120px, 16vh, 150px) clamp(48px, 7vh, 72px);
  }
  .hero-copy { max-width: 100%; }
  .landing-story .hero-close { max-width: 100%; gap: 24px; }
  .landing-story .hero-close p { font-size: 15px; }
  .hero-art, .hero-loop { object-position: center 28%; }
  .hero-loop, .hero-motion { display: none; }

  /* Phones get her as the cutout rather than the photograph. The plate cannot
     work here: the headline is dark ink, so it needs the bright part of the
     frame, which is exactly where her face and dark blazer sit. Lifting her
     out and standing her on the chapter's own cream lets the copy keep its
     contrast and still puts her on the page. The copy is bottom-aligned, so
     the extra height opens up above it, which is where she goes. */
  .landing-story .story-hero { min-height: 1000px; }
  .hero-stage { display: none; }
  .landing-story .story-hero::after {
    content: '';
    position: absolute;
    right: -9%;
    top: 6%;
    width: 78%;
    height: 42%;
    background: url('assets/tension-figure.png?v=2') right bottom / contain no-repeat;
    z-index: 0;
    pointer-events: none;
  }
  .hero-veil::after { height: 150px; }
  .hero-veil {
    background:
      linear-gradient(to bottom,
        transparent 0%,
        color-mix(in srgb, var(--hero-veil) 16%, transparent) 34%,
        color-mix(in srgb, var(--hero-veil) 62%, transparent) 56%,
        color-mix(in srgb, var(--hero-veil) 92%, transparent) 76%,
        var(--bg) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art, .hero-copy, .hero-copy > * { animation: none; opacity: 1; transform: none; }
  .hero-loop { animation: none; transform: none; }
}