/* Scroll opens the actual next document; ordinary links stay instant. */
@view-transition { navigation: auto; }
/* Hold the matching preview until the incoming document has decoded its hero.
   Touch devices have no scene (case-flow.js returns there), and the hold
   would only delay an ordinary tap on the card by a second. */
@media not ((hover: none) and (pointer: coarse)) {
  ::view-transition-old(root) { animation: case-flow-hold 1s linear both; mix-blend-mode: normal; z-index: 1; }
  ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
}
@keyframes case-flow-hold { from { opacity: 1; } to { opacity: 1; } }

.case-next { width: 100%; margin-top: var(--space-xl); }
.case-next-sticky { display: flex; flex-direction: column; gap: var(--space-lg); }
.case-next .case-card { width: 100%; min-width: 0; }
.case-next-preview {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  overflow: hidden;
  /* The window opens from the card's stage, so it starts in its colour. */
  background: var(--color-surface-sunken);
  opacity: 0;
  visibility: hidden;
  contain: layout paint;
}
.case-next-preview iframe { display: block; border: 0; width: 100%; height: 100%; background: var(--color-page); transform-origin: 0 0; }
/* The original exported screens, arranged like the homepage cover. */
.case-next-screens { position: absolute; inset: 0; }
.case-next .has-screens > .case-stage-img,
.case-next .has-screens > .case-skeleton { visibility: hidden; }
.case-next-phone { position: absolute; display: block; width: 20%; height: auto; max-width: none; }
.case-next-phone:nth-child(1) { left: 13%; top: 45%; }
.case-next-phone:nth-child(2) { left: 39%; top: 17%; width: 22%; }
.case-next-phone:nth-child(3) { left: 68%; top: 45%; }
.case-next-flights { position: fixed; inset: 0; z-index: 1001; pointer-events: none; overflow: hidden; }
.case-next-flights img { position: absolute; left: 0; top: 0; display: block; max-width: none; transform-origin: 0 0; }

/* Headroom above the arrived case gives the reverse scene real scroll travel. */
.case-has-previous body::before { content: ''; display: block; height: var(--case-return-space); }
.case-prev-preview { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1000; pointer-events: none; visibility: hidden; background: var(--color-page); }