/* Brief transitions preserve the layout and keep navigation available. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

@media (max-width: 820px) {
  .mobile-more-sheet {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-drawer),
      display 260ms allow-discrete, overlay 260ms allow-discrete;
  }
  .mobile-more-sheet[open] { opacity: 1; transform: translateY(0); }
  .mobile-more-sheet::backdrop {
    opacity: 0;
    transition: opacity 220ms var(--ease-out), display 260ms allow-discrete,
      overlay 260ms allow-discrete;
  }
  .mobile-more-sheet[open]::backdrop { opacity: 1; }
  @starting-style {
    .mobile-more-sheet[open] { opacity: 0; transform: translateY(32px); }
    .mobile-more-sheet[open]::backdrop { opacity: 0; }
  }
}

/* The photograph moves gently within its existing stationary border. */
@supports (animation-timeline: view()) {
  @media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
    .welcome-image { view-timeline-name: --welcome-photo; }
    .welcome-image img {
      animation: framed-photo-drift linear both;
      animation-timeline: --welcome-photo;
      animation-range: entry 0% exit 100%;
    }
    @keyframes framed-photo-drift {
      from { transform: translateY(-3%) scale(1.08); }
      to { transform: translateY(3%) scale(1.08); }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-more-sheet, .mobile-more-sheet::backdrop { transition: none; }
  .mobile-more-sheet, .mobile-more-sheet[open] { transform: none; }
}

/* The photograph settles, the type follows (16 September 2026).
   Scroll-driven, no pinning, nothing overlaps. The hero photograph leaves the
   viewport at about three-quarters of the scroll speed while easing from a
   slight zoom to rest, and its inset frame tightens a few pixels, so it reads
   as settling back into the page rather than being pushed off the top. The
   first section's copy then rises into place with a short lag per block. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #page-home .hero-photo { view-timeline-name: --hero-photo; view-timeline-axis: block; }
    /* Taller than its frame so the slower travel never uncovers the top edge. */
    #page-home .hero-photo picture img {
      position: absolute;
      left: 0;
      top: -24%;
      width: 100%;
      height: 124%;
      transform-origin: 50% 45%;
      animation: hero-settle linear both;
      animation-timeline: --hero-photo;
      animation-range: exit 0% exit 100%;
    }
    @keyframes hero-settle {
      from { transform: translateY(0) scale(1.05); }
      to   { transform: translateY(19%) scale(1); }
    }
    #page-home .hero-photo::after {
      animation: frame-tighten linear both;
      animation-timeline: --hero-photo;
      animation-range: exit 0% exit 100%;
    }
    @keyframes frame-tighten {
      from { inset: 22px; }
      to   { inset: 34px; }
    }

    #page-home .welcome-text { view-timeline-name: --welcome-copy; view-timeline-axis: block; }
    #page-home .welcome-text > * {
      animation: copy-follow linear both;
      animation-timeline: --welcome-copy;
      animation-range: entry 0% entry 55%;
    }
    #page-home .welcome-text > :nth-child(2) { animation-range: entry 8% entry 63%; }
    #page-home .welcome-text > :nth-child(3) { animation-range: entry 16% entry 71%; }
    #page-home .welcome-text > :nth-child(4) { animation-range: entry 24% entry 79%; }
    @keyframes copy-follow {
      from { transform: translateY(26px); opacity: 0.25; }
      to   { transform: none; opacity: 1; }
    }
    /* The wrapper's one-shot reveal would double the entrance; stand it down
       where the scroll-driven version runs. */
    html.reveals-armed #page-home .welcome-text.reveal,
    html.reveals-armed #page-home .welcome-text.reveal.in { opacity: 1; transform: none; transition: none; }
  }
}

/* The mark eases into the corner. Sticky stops dead against the bottom of the
   frame; this rides the same distance on the scroll timeline instead, tracking
   the scroll for the first half of the photograph's exit and decelerating over
   the last stretch, so it settles into the bottom padding rather than hitting
   it. The range is the fixed-equivalent distance plus 90px of easing room. */
@supports (animation-timeline: view()) and (width: 1cqh) {
  @media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
    #page-home .hero-photo { container-type: size; }
    #page-home .hero-photo .home-mark--photo {
      position: absolute;
      top: 44px;
      right: 44px;
      margin: 0;
      animation: mark-ride linear both;
      animation-timeline: --hero-photo;
      animation-range: exit 0% exit calc(100% - 32px);
      animation-timing-function: linear(0, 0.62 51%, 0.82 68%, 0.93 82%, 0.985 93%, 1);
    }
    @keyframes mark-ride {
      from { transform: translateY(0); }
      to   { transform: translateY(calc(100cqh - 34px)); }
    }
  }
}