.scoop-story-flow-marker {
  display: block;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Entries escape their host's column padding to span the full viewport;
   inside an adopted pinned main the host is already full-width, so the
   escape resolves to zero. */
.scoop-story-flow-entry,
.scoop-story-flow-placeholder {
  display: block;
  width: auto;
  min-width: 0;
  margin-inline: calc(50% - 50vw);
  overflow: clip;
  overflow-anchor: none;
}

.scoop-story-flow-entry {
  position: relative;
  isolation: isolate;
  background: var(--scoop-article-ground, #FFFFFF);
}

/* The frame is a real viewport pinned to the reader's screen while its
   layer scrolls past. Its document cannot be scrolled by the reader — the
   rail is the only scroller — and the runtime plays the rail's position
   into it, so everything inside behaves as on its own address. */
.scoop-story-flow-entry iframe {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  border: 0;
  background: transparent;
}


/* Sheet draws: what comes over is the article itself, a live frame readable
   the whole way over, worked against the ground of the story it follows. The
   runtime stamps the draw on the entry. --scoop-handover runs 0 as the
   sheet's top edge sits at the foot of the screen to 1 when it owns the
   screen, so the crossing scrubs both ways. */
.scoop-story-flow-entry--crossing {
  background: var(--scoop-crossing-from, var(--scoop-article-ground, #FFFFFF));
}

/* slide — the sheet rides in from the right behind its leading rule. */
.scoop-story-flow-entry--crossing[data-scoop-crossing="slide"] iframe {
  box-sizing: border-box;
  border-left: 2px solid var(--scoop-crossing-rule, rgba(255, 255, 255, 0.9));
  transform: translateX(calc((1 - var(--scoop-handover, 1)) * 102%));
}

/* wipe — the sheet stands still and uncovers left to right under its rule. */
.scoop-story-flow-entry--crossing[data-scoop-crossing="wipe"] iframe {
  box-sizing: border-box;
  border-right: 2px solid var(--scoop-crossing-rule, rgba(255, 255, 255, 0.9));
  clip-path: inset(0 calc((1 - var(--scoop-handover, 1)) * 100%) 0 0);
}

/* rise — the sheet comes up from below, faster than the scroll carrying it. */
.scoop-story-flow-entry--crossing[data-scoop-crossing="rise"] iframe {
  transform: translateY(calc((1 - var(--scoop-handover, 1)) * 34vh)) scale(calc(.94 + var(--scoop-handover, 1) * .06));
  transform-origin: 50% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .scoop-story-flow-entry--crossing iframe {
    border: 0;
    clip-path: none;
    transform: none;
  }
}

/* A motif draw lays an interlude between the two stories: a band the height
   of most of a screen, its ground running from the colour of the story that
   is leaving to the colour of the one arriving, with the marks sweeping over
   that gradient and nothing else. --crossing-progress runs 0 at the band's
   first appearance to 1 as it leaves, so the sweep scrubs with the reader in
   either direction, and the article that follows is never drawn on. */
.scoop-crossing {
  --crossing-progress: 0;
  position: relative;
  display: block;
  height: 72vh;
  margin-inline: calc(50% - 50vw);
  overflow: clip;
  background: linear-gradient(180deg, var(--crossing-from, #16181d), var(--crossing-to, #16181d));
}

.scoop-crossing::before,
.scoop-crossing::after {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
}

/* lines — parallel diagonals sliding across each other as the reader rides
   through, one bright set one shadow set, opposite directions. */
.scoop-crossing[data-scoop-motif="lines"]::before {
  background: repeating-linear-gradient(112deg,
    rgba(255, 255, 255, 0.16) 0 3px, transparent 3px 34px,
    rgba(255, 255, 255, 0.07) 34px 39px, transparent 39px 90px);
  transform: translateX(calc(var(--crossing-progress) * 34vw - 17vw));
}

.scoop-crossing[data-scoop-motif="lines"]::after {
  background: repeating-linear-gradient(112deg,
    rgba(0, 0, 0, 0.2) 0 2px, transparent 2px 58px);
  transform: translateX(calc(17vw - var(--crossing-progress) * 34vw));
}

/* petals — soft blossom flecks drifting down at three parallax rates with a
   sideways sway, blush tones that read on any ground. */
.scoop-crossing[data-scoop-motif="petals"]::before {
  background-image:
    radial-gradient(11px 7px at 24px 30px, rgba(255, 196, 211, 0.55) 45%, transparent 72%),
    radial-gradient(8px 5px at 130px 96px, rgba(255, 226, 234, 0.45) 45%, transparent 72%),
    radial-gradient(14px 9px at 220px 160px, rgba(255, 172, 196, 0.4) 45%, transparent 72%);
  background-repeat: repeat;
  background-size: 280px 260px, 340px 300px, 420px 380px;
  background-position:
    calc(var(--crossing-progress) * 70px) calc(var(--crossing-progress) * 66vh),
    calc(var(--crossing-progress) * -52px) calc(var(--crossing-progress) * 48vh),
    calc(var(--crossing-progress) * 30px) calc(var(--crossing-progress) * 88vh);
}

.scoop-crossing[data-scoop-motif="petals"]::after {
  background-image:
    radial-gradient(22px 14px at 60px 40px, rgba(255, 205, 220, 0.22) 45%, transparent 72%),
    radial-gradient(17px 11px at 240px 200px, rgba(255, 235, 240, 0.18) 45%, transparent 72%);
  background-repeat: repeat;
  background-size: 520px 460px, 640px 560px;
  background-position:
    calc(var(--crossing-progress) * -40px) calc(var(--crossing-progress) * 30vh),
    calc(var(--crossing-progress) * 24px) calc(var(--crossing-progress) * 40vh);
}

/* weave — two diagonal families crossing while they slide against each
   other, a loose fabric passing between the stories. */
.scoop-crossing[data-scoop-motif="weave"]::before {
  background:
    repeating-linear-gradient(64deg, rgba(255, 255, 255, 0.11) 0 2px, transparent 2px 44px),
    repeating-linear-gradient(-64deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 44px);
  transform: translateY(calc(var(--crossing-progress) * 22vh - 11vh));
}

.scoop-crossing[data-scoop-motif="weave"]::after {
  background: repeating-linear-gradient(64deg, rgba(0, 0, 0, 0.16) 0 12px, transparent 12px 96px);
  transform: translateY(calc(11vh - var(--crossing-progress) * 22vh))
    translateX(calc(var(--crossing-progress) * 18vw - 9vw));
}

@media (prefers-reduced-motion: reduce) {
  .scoop-crossing::before,
  .scoop-crossing::after {
    display: none;
  }
}