/* rex-hero.css: the daydream films between pages. A film plays full screen over page A,
   then page B opens already showing the film's last frame (its hero still).
   Proven in the router spike (design/dexterjameson/router-spike-2026-09-25). */
.v2-travel-shell{position:fixed;inset:0;z-index:100;background:#000}
.v2-travel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;view-transition-name:hero-plate}
body.is-travelling .v2-still{view-transition-name:none}
.v2-still{view-transition-name:hero-plate}
.v2-hero{min-height:100vh;min-height:100svh}
body.is-travelling .v2-nav,body.is-travelling .v2-rail{opacity:0;pointer-events:none;transition:opacity .3s}
.v2-skip{position:fixed;z-index:101;right:clamp(20px,4vw,56px);bottom:clamp(20px,4vh,40px);min-height:40px;padding:0 16px;
  color:#fff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.7);cursor:pointer;
  font:500 12px/1 var(--v-mono,monospace);letter-spacing:.07em;text-transform:uppercase}
.v2-skip:hover{background:#fff;color:#000}
.v2-skip[hidden]{display:none}

/* cross-document View Transitions, where supported: a soft hand-over at the page boundary */
@view-transition{navigation:auto}
/* the UA default is object-fit:contain, which pillarboxes 16:9 footage on a phone */
::view-transition-old(hero-plate),::view-transition-new(hero-plate){object-fit:cover}
html.chain-arrive::view-transition-group(root),html.chain-arrive-back::view-transition-group(root),
html.chain-arrive::view-transition-group(hero-plate),html.chain-arrive-back::view-transition-group(hero-plate){animation-duration:400ms;animation-timing-function:ease-in-out;background:#000}
html.chain-arrive::view-transition-old(root),html.chain-arrive-back::view-transition-old(root){animation:none;display:none} /* the old page never shows through: plates cover the screen, black beneath */
html.chain-arrive::view-transition-new(root),html.chain-arrive-back::view-transition-new(root){animation:chain-root-in 400ms ease-in-out both}
@keyframes chain-root-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
