/* Homepage chapter transitions. After the opening film, every chapter with a
   photograph arrives the same way: as the photograph rises into view it opens
   from a framed plate (94%) to its full size, arriving as it finishes entering
   the view. Chapter headings flow in word by word (04_js/word-flow.js), so the
   page has one way for photographs to arrive and one way for words.

   Scroll-linked through CSS view timelines: no script, off the main thread.
   The plate uses the individual scale property rather than transform, so it
   composes with any transform a chapter already sets. Browsers without
   scroll-driven animations keep today's static photographs. Linear on purpose: progress follows the
   reader's own scroll, which already supplies the easing. */
@supports (animation-timeline: view()) and (timeline-scope: none) {
  @media screen {
    /* What Zuvani does. The photograph's own passage into view drives it, so
       it also plays on phones, where the photograph sits at the chapter's
       foot. The intro hoists that timeline so the reading gradient over the
       photograph can follow it: the two share their left, right and bottom
       edges and scale from the bottom centre, so the gradient stays inside
       the photograph while the plate is framed. */
    .home-savannah .savannah__intro {
      timeline-scope: --savannah-plate;
    }

    .home-savannah .savannah__picture {
      view-timeline: --savannah-plate block;
    }

    .home-savannah .savannah__picture,
    .home-savannah .savannah__intro::after {
      transform-origin: 50% 100%;
      animation: chapter-open linear both;
      animation-timeline: --savannah-plate;
      animation-range: entry 0% entry 100%;
    }

    /* Founder. The portrait opens from its foot on the limestone ground. The
       chapter hoists its timeline for the credit below. */
    .home-savannah .founder-hero {
      timeline-scope: --founder-plate;
    }

    .home-savannah .founder-portrait {
      view-timeline: --founder-plate block;
      transform-origin: 50% 100%;
      animation: chapter-open linear both;
      animation-timeline: --founder-plate;
      animation-range: entry 0% entry 100%;
    }

    /* Two-column layouts lay the credit and its gradient over the portrait's
       foot. Both span the column, so clipping the credit's sides by the
       plate's margin (3% each side, shrinking in step) keeps the gradient
       inside the portrait. Single-column layouts set the credit below the
       portrait on the plain ground, where it needs nothing. */
    @media (min-width: 941px) {
      .home-savannah .photo-caption {
        animation: chapter-open-sides linear both;
        animation-timeline: --founder-plate;
        animation-range: entry 0% entry 100%;
      }
    }

    /* Start planning. The Cape Town photograph opens from its foot on the
       ivory ground; the form beside it stays still. */
    .home-savannah .home-planning__media {
      view-timeline: --planning-plate block;
      transform-origin: 50% 100%;
      animation: chapter-open linear both;
      animation-timeline: --planning-plate;
      animation-range: entry 0% entry 100%;
    }

    /* Side by side (above 760px) the chapter hides its overflow, which makes
       it a scroll container that never scrolls: the photograph would measure
       its passage against it and stay full size. Clip hides overflow the same
       way without creating a scroll container. (Stacked layouts already let
       the chapter overflow.) */
    @media (min-width: 761px) {
      .home-savannah .home-planning {
        overflow: clip;
      }
    }

    /* The menu locks the page by fixing body with overflow: hidden. Because
       html clips overflow-x, that would make body the photographs' scroll
       container: a plate part-way open would jump to full size as the menu
       opens and shrink back once it closes. Clip hides overflow the same way
       without creating a scroll container, so the plates hold still.
       (!important beats the lock's inline style.) */
    .home-savannah body.nav-overlay-locked {
      overflow: clip !important;
    }
  }
}

@keyframes chapter-open {
  from { scale: 0.94; }
  to { scale: none; }
}

@keyframes chapter-open-sides {
  from { clip-path: inset(0 3%); }
  to { clip-path: inset(0); }
}

/* Site convention: every reduced-motion rule carries this width guard until
   the client decides whether to honour the setting (content review item 21).
   Remove the guard together with the others to switch it on. */
@media (prefers-reduced-motion: reduce) {
  .home-savannah .savannah__picture,
  .home-savannah .savannah__intro::after,
  .home-savannah .founder-portrait,
  .home-savannah .photo-caption,
  .home-savannah .home-planning__media {
    animation: none;
  }
}