/* Branches (assets/branches.js): the homepage's film interlude after the certificates. A short
   film on the page's own white, the full width of the window, so an olive branch and a lemon
   branch reach in from the screen's two sides; the Infert symbol then draws itself between them.
   It holds still on screen (a sticky stage on a tall track) while the scroll plays the film.
   It is decoration only: without script it takes no space, and with reduced motion the harvest
   is shown still, signed with the symbol. */
.branches { --branches-top: 74px; position: relative; display: none; background: #fff; }
.branches-live,
.branches-still { display: block; padding-block: clamp(1.5rem, 4vh, 3rem); }

/* The track is the scroll the film takes; the stage stays pinned under the header for all of it. */
.branches-track { position: relative; }
.branches-runway { height: 190vh; }
.branches-stage { display: flex; flex-direction: column; justify-content: center; background: #fff; }
.branches-live .branches-stage { position: sticky; top: var(--branches-top); min-height: calc(100vh - var(--branches-top)); min-height: calc(100svh - var(--branches-top)); }
.branches-scene { width: 100%; overflow: hidden; }

/* The film runs the full width of the window, edge to edge, at most 2:1 and no taller than the
   window leaves room for: only the empty white above and below the branches is trimmed (on short
   windows, a leaf tip or two), so the symbol still lands in the gap between them. */
.branches-frame { position: relative; width: 100%; height: min(50vw, calc(100vh - var(--branches-top) - 3rem)); height: min(50vw, calc(100svh - var(--branches-top) - 3rem)); background: #fff; }
.branches-film { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; }

/* The close: the symbol draws itself in the open middle of the film (the film is not mirrored). */
.branches-end { position: absolute; z-index: 1; left: 49.5%; top: 50%; width: 14%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: .6rem; visibility: hidden; pointer-events: none; }
.branches-symbol { display: block; width: 74%; height: auto; aspect-ratio: 70 / 80; overflow: visible; }
.branches-word { display: block; width: 100%; height: auto; opacity: 0; }

/* Phones: the film half again as wide as the screen, so the branches are large enough to read;
   only their outer ends, beyond the screen's edges, are cut. */
@media (max-width: 860px) {
  .branches-runway { height: 140vh; }
  .branches-frame { width: 150%; height: auto; aspect-ratio: 16 / 9; margin-inline: -25%; }
  .branches-end { width: 15%; gap: .3rem; }
}