/* Home hero: a centered, pinned headline, then three large thumbnails rise into a stack below it.
   The stack runs off the bottom edge while pinned and finishes scrolling into view after the pin ends.
   The headline block never sits under a card. Layout and progress share one number, --p (0 to 1):
   a CSS scroll timeline drives it where supported, hero script drives it elsewhere.
   Phones, short screens and reduced motion get the static layout (the base rules); phones show no cards. */

@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

/* Static layout */
.hero {
  --fs-hero: clamp(2.25rem, 7.4vw, 6rem);
  position: relative;
}
.hero-stage {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(96px, 13vw, 120px) var(--gutter) 72px;
}
.hero-copy { text-align: center; }
.hero-title {
  margin: 0 auto;
  max-width: 9em;
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-display);
  letter-spacing: -.03em;
  line-height: .98;
  text-wrap: balance;
}
.hero-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 36px; margin-top: 28px; }
.hero-sub { margin: 0; max-width: 34ch; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.4; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; }
.hero-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 30px;
  border-radius: var(--radius-control);
  background: var(--ink); color: var(--on-ink);
  font-size: 1rem; font-weight: 500; line-height: 1;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.hero-cta:hover { background: var(--ink-hover); }
.hero-cta:active { transform: scale(.97); }
.hero-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.hero-link:hover { color: var(--accent); }
.hero-cards { list-style: none; margin: 48px 0 0; padding: 0; display: grid; gap: 14px; }
.hero-card { aspect-ratio: 16 / 9; border-radius: var(--radius-media); overflow: hidden; background: var(--band); }
.hero-card img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Phones: no cards */
@media (max-width: 760px) { .hero-cards { display: none; } }

/* Scroll-driven layout: wide screens with motion allowed */
@media (min-width: 761px) and (min-height: 561px) and (prefers-reduced-motion: no-preference) {
  .hero {
    --lift: clamp(24px, 4.2svh, 40px);
    --card-w: min(77vw, 72rem);
    --card-h: calc(var(--card-w) * 9 / 16);
    /* Where the text block ends, so the stack can start just below it. */
    --row-h: clamp(62px, calc(380px - 25vw), 160px);
    --text-bottom: calc(clamp(96px, 13vw, 120px) + 1.96 * var(--fs-hero) + 28px + var(--row-h));
    --stack-top: calc(var(--text-bottom) - 8px + 2 * var(--lift));
    /* The part of the front card below the pinned screen; reserved so the next section starts after it. */
    --overflow: max(0px, calc(var(--stack-top) + var(--card-h) - 100svh + 48px));
    height: 320svh;
    margin-bottom: var(--overflow);
    timeline-scope: --hero;
  }
  /* A sentinel as tall as the pinned scroll distance; its view timeline is the progress source.
     Its cover range starts 100svh before it (31.25% of 420svh), so 0 to 1 spans exactly the pinned scroll. */
  .hero-track { position: absolute; inset: 0 auto auto 0; width: 1px; height: calc(320svh - 100svh); view-timeline: --hero block; pointer-events: none; }
  .hero-stage {
    position: sticky; top: 0;
    height: 100svh;
    overflow-x: clip; overflow-y: visible;
    padding-bottom: 0;
  }
  @supports (animation-timeline: --hero) {
    .hero-stage { animation: hero-progress linear both; animation-timeline: --hero; animation-range: cover 31.25% cover 100%; }
  }
  @keyframes hero-progress { from { --p: 0; } to { --p: 1; } }

  .hero-copy { transform: translate3d(0, calc(var(--p) * -2.5svh), 0); }
  .hero-row { margin-top: clamp(20px, 3svh, 28px); }

  .hero-cards {
    position: absolute; left: 50%; top: var(--stack-top); margin: 0;
    width: var(--card-w); height: var(--card-h);
    display: block;
    transform: translateX(-50%);
    perspective: 1600px; perspective-origin: 50% 100%;
  }
  .hero-card {
    --k: clamp(0, calc((var(--p) - var(--from-p)) / var(--span)), 1);
    --e: calc(var(--k) * (2 - var(--k)));
    --depth: calc(2 - var(--n));
    position: absolute; inset: 0;
    transform-origin: 50% 100%;
    transform:
      translate3d(0, calc(var(--depth) * var(--lift) * -1 + (1 - var(--e)) * var(--from-y)), 0)
      rotateX(calc((1 - var(--e)) * 18deg))
      scale(calc(1 - var(--depth) * .03 - (1 - var(--e)) * .08));
    will-change: transform;
  }
  /* Card 1 starts with only its top edge showing; cards 2 and 3 start below the screen. */
  .hero-card:nth-child(1) { --n: 0; --from-p: 0;   --span: .3;  --from-y: calc(100svh - 190px - var(--stack-top) + var(--depth) * var(--lift)); z-index: 1; }
  .hero-card:nth-child(2) { --n: 1; --from-p: .28; --span: .34; --from-y: calc(100svh - var(--stack-top) + var(--depth) * var(--lift) + 140px); z-index: 2; }
  .hero-card:nth-child(3) { --n: 2; --from-p: .58; --span: .34; --from-y: calc(100svh - var(--stack-top) + var(--depth) * var(--lift) + 140px); z-index: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-cta { transition: none; }
}