/* Native documents remain real pages. Only their reading content takes flight. */
@view-transition { navigation: auto; }

::view-transition { background: var(--paper, #f5f1e8); }
::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
/* Content is captured separately. The new backdrop slides over the old one;
   neither page is faded and the header stays in its own stationary layer. */
::view-transition-old(root) { opacity: 1; mix-blend-mode: normal; }
::view-transition-new(root) {
  animation: halls-backdrop-in 1400ms cubic-bezier(.4, 0, .2, 1) both;
  mix-blend-mode: normal;
}
@keyframes halls-backdrop-in {
  from { translate: 100vw 0; }
  to { translate: 0 0; }
}

/* The header stays in place while flying content passes behind it. */
.site-header { position: relative; z-index: 10; view-transition-name: halls-header; }
.concept-banner { position: relative; z-index: 10; view-transition-name: halls-banner; }
::view-transition-group(halls-header),
::view-transition-group(halls-banner) { animation: none; z-index: 100; }
::view-transition-old(halls-header),
::view-transition-old(halls-banner) { animation: none; opacity: 0; }
::view-transition-new(halls-header),
::view-transition-new(halls-banner) { animation: none; opacity: 1; }

/* JS measures each rectangle. Travel clears an entire screen, not a small nudge. */
@media (prefers-reduced-motion: no-preference) {
  /* File navigation retains the previous chapter's color under a moving layer. */
  .chapter-background-preparing body,
  .chapter-background-entering body { background: var(--previous-backdrop, var(--paper)); }
  .chapter-background-preparing .chapter-page,
  .chapter-background-entering .chapter-page { position: relative; isolation: isolate; overflow: clip; }
  .chapter-background-preparing .chapter-page > section,
  .chapter-background-entering .chapter-page > section { background: transparent; }
  .chapter-background-preparing .chapter-page::before,
  .chapter-background-entering .chapter-page::before {
    content: '';
    position: fixed;
    inset: var(--backdrop-top, 0px) 0 0;
    background: var(--incoming-backdrop, var(--paper));
    z-index: -1;
    pointer-events: none;
  }
  .chapter-background-preparing .chapter-page::before { translate: 100vw 0; }
  .chapter-background-entering .chapter-page::before {
    animation: halls-chapter-background-in 1400ms cubic-bezier(.4, 0, .2, 1) both;
  }
  .chapter-background-preparing .chapter-page [data-enter],
  .chapter-background-preparing .chapter-page .story-foot,
  .chapter-background-preparing .chapter-page .service-note { visibility: hidden; }

  /* Prepare behind the original opening, then move a real navy background in. */
  .hero-preparing body,
  .hero-background-entering body { background: var(--previous-backdrop, var(--paper)); }
  .hero-preparing .hero,
  .hero-background-entering .hero { background: transparent; overflow: clip; }
  .hero-preparing .hero::before,
  .hero-background-entering .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ink);
    z-index: -2;
    pointer-events: none;
  }
  .hero-preparing .hero::before { translate: 105% 0; }
  .hero-background-entering .hero::before {
    animation: halls-home-background-in 1400ms cubic-bezier(.4, 0, .2, 1) both;
  }
  .hero-preparing .hero-topline > *,
  .hero-preparing .hero-art,
  .hero-preparing .hero h1,
  .hero-preparing .hero-bottom,
  .hero-preparing .hero-index,
  .hero-preparing main [data-enter] { visibility: hidden; }
  .opening-run .hero h1,
  .opening-run .hero-art,
  .hero-preparing .hero h1,
  .hero-preparing .hero-art { animation: none !important; }

  :where(main, .site-footer) .is-entering {
    animation: halls-fly-in 1400ms cubic-bezier(.4, 0, .2, 1) var(--flight-delay, 0ms) both;
    will-change: translate;
  }
  :where(main, .site-footer) .is-leaving {
    animation: halls-fly-out 950ms cubic-bezier(.5, 0, .75, .55) both;
    will-change: translate;
  }
}
@keyframes halls-home-background-in {
  from { translate: 105% 0; }
  to { translate: 0 0; }
}
@keyframes halls-chapter-background-in {
  from { translate: 100vw 0; }
  to { translate: 0 0; }
}

/* Opacity stays at 1 throughout: items disappear only after crossing an edge. */
@keyframes halls-fly-in {
  from { translate: var(--flight-x) var(--flight-y); }
  to { translate: 0 0; }
}
@keyframes halls-fly-out {
  from { translate: 0 0; }
  to { translate: var(--flight-x) var(--flight-y); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  :where(main, .site-footer) .is-entering,
  :where(main, .site-footer) .is-leaving { animation: none !important; translate: none; }
}
@media print {
  .opening { display: none !important; }
  .hero-preparing body,
  .hero-background-entering body { background: var(--paper); }
  .chapter-background-preparing body,
  .chapter-background-entering body { background: var(--paper); }
  .chapter-background-preparing .chapter-page,
  .chapter-background-entering .chapter-page { overflow: visible; }
  .chapter-background-preparing .chapter-page > section,
  .chapter-background-entering .chapter-page > section { background: var(--incoming-backdrop, var(--paper)); }
  .chapter-background-preparing .chapter-page > aside,
  .chapter-background-entering .chapter-page > aside { background: var(--paper); }
  .hero-preparing .hero,
  .hero-background-entering .hero { background: var(--ink); overflow: visible; }
  .hero-preparing .hero::before,
  .hero-background-entering .hero::before,
  .chapter-background-preparing .chapter-page::before,
  .chapter-background-entering .chapter-page::before { content: none; animation: none; }
  .hero-preparing .hero-topline > *,
  .hero-preparing .hero-art,
  .hero-preparing .hero h1,
  .hero-preparing .hero-bottom,
  .hero-preparing .hero-index,
  .hero-preparing main [data-enter],
  .chapter-background-preparing .chapter-page [data-enter],
  .chapter-background-preparing .chapter-page .story-foot,
  .chapter-background-preparing .chapter-page .service-note { visibility: visible; }
  :where(main, .site-footer) .is-entering,
  :where(main, .site-footer) .is-leaving { animation: none !important; translate: none; }
}