/* Component: EditorialShell ------------------------------------------------
   The page ground and the plate band only. Each narrative page brings its own
   wash layers and composition — see the page components. */
@layer components {
  .tp-editorial {
    position: relative;
    width: 100%;
    background-color: var(--tp-color-paper);
    overflow-x: clip;
  }

  /* The destination band, exactly as the design paints it: one viewport tall,
     anchored at the top of the document, fading out through its lower third so
     the page can continue on parchment. Geometry arrives as custom properties
     from the one shared config row, so nothing here re-measures. */
  .tp-editorial__band {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 19.33%, rgba(0, 0, 0, 1) 38.67%, rgba(0, 0, 0, 1) 58%, rgba(0, 0, 0, 0.979) 62%, rgba(0, 0, 0, 0.9217) 66%, rgba(0, 0, 0, 0.837) 70%, rgba(0, 0, 0, 0.7337) 74%, rgba(0, 0, 0, 0.6205) 78%, rgba(0, 0, 0, 0.5064) 82%, rgba(0, 0, 0, 0.4) 86%, rgba(0, 0, 0, 0.3413) 88%, rgba(0, 0, 0, 0.2699) 90%, rgba(0, 0, 0, 0.1938) 92%, rgba(0, 0, 0, 0.1209) 94%, rgba(0, 0, 0, 0.059) 96%, rgba(0, 0, 0, 0.0161) 98%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 19.33%, rgba(0, 0, 0, 1) 38.67%, rgba(0, 0, 0, 1) 58%, rgba(0, 0, 0, 0.979) 62%, rgba(0, 0, 0, 0.9217) 66%, rgba(0, 0, 0, 0.837) 70%, rgba(0, 0, 0, 0.7337) 74%, rgba(0, 0, 0, 0.6205) 78%, rgba(0, 0, 0, 0.5064) 82%, rgba(0, 0, 0, 0.4) 86%, rgba(0, 0, 0, 0.3413) 88%, rgba(0, 0, 0, 0.2699) 90%, rgba(0, 0, 0, 0.1938) 92%, rgba(0, 0, 0, 0.1209) 94%, rgba(0, 0, 0, 0.059) 96%, rgba(0, 0, 0, 0.0161) 98%, rgba(0, 0, 0, 0) 100%);
  }



  /* Note Bene has no zoom origin: plain parchment, ordinary flow. */
  .tp-editorial--note-bene {
    background: var(--tp-color-paper);
  }

  @keyframes dEnter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }

  /* While the bridge is still opaque the destination is mounted but unseen, so
     its entrance is held at frame zero rather than spent behind the artwork.
     transition.js drops this class as the dissolve starts, and the copy rises
     through it. Only ever set during a Salon transition — a direct load has
     the class nowhere near it and animates normally. */
  .tp-travel-hold [data-screen-label] {
    /* !important because the design ships `animation: dEnter .62s ...` as an
       INLINE shorthand, and the shorthand sets animation-play-state: running.
       A normal rule here loses to it; an author !important does not. Same trap
       as the inline heights elsewhere in these ported screens. */
    animation-play-state: paused !important;
  }

  /* Anyone who has asked for less motion gets the destination immediately:
     no held entrance, nothing to wait for. */
  @media (prefers-reduced-motion: reduce) {
    .tp-travel-hold [data-screen-label] {
      animation-play-state: running !important;
    }
  }
}