/* LAVAN History motion (A, user choice 2026-10-16). Static layout stays in index.html. */

/* Until fonts are ready (same window as the hero's wait) the section is not shown in its final state. */
html.hero-pending .story .story-head,
html.hero-pending .story .story-media,
html.hero-pending .story .story-beats { visibility: hidden; }

/* Photo opens top → down; clip-path also clips the image while it settles from scale 1.2. */
.story-media { overflow: hidden; }
.story-media.sm-run { clip-path: inset(0 0 calc((100% + 1px) * (1 - var(--sm-p, 1))) 0); }

/* Separator between events: drawn by a span over the transparent border while animating. */
.story-beat.sb-run { position: relative; border-top-color: transparent; }
.sb-rule {
  position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: var(--rule);
  clip-path: inset(0 calc((100% + 1px) * (1 - var(--sb-p, 1))) 0 0);
}

/* The moving date keeps the h3's flex row (year + place, 16 px gap). */
.story-date > .hm-in { display: flex; align-items: baseline; gap: inherit; }