/* One upward-moving orange field between two stationary page snapshots. */
:root { --page-transition-duration: 1100ms; --page-transition-ease: cubic-bezier(.76, 0, .24, 1); }
html.page-transition-busy { overscroll-behavior: none; scroll-behavior: auto; }
html[data-page-panel]::before { content: ''; position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 2147483647; background: var(--brand-dot, #ff4b00); pointer-events: auto; transform: translate3d(0, 0, 0); }
html[data-page-panel="cover"]::before { animation: page-panel-cover 550ms cubic-bezier(.76, 0, .88, .5) both; }
html[data-page-panel="reveal"]::before { animation: page-panel-reveal 550ms cubic-bezier(.12, .5, .24, 1) both; }
@keyframes page-panel-cover { from { transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes page-panel-reveal { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -100%, 0); } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition { background: var(--brand-dot, #ff4b00); pointer-events: auto; }
  ::view-transition-group(root), ::view-transition-image-pair(root) { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) {
    object-fit: none; object-position: top left;
    mix-blend-mode: normal;
    animation-duration: var(--page-transition-duration);
    animation-timing-function: var(--page-transition-ease);
    animation-fill-mode: both;
  }
  ::view-transition-old(root) { animation-name: page-wipe-old; }
  ::view-transition-new(root) { animation-name: page-wipe-new; }
}
/* These edges share one easing curve and speed: their separation is always 100vh.
   At 50% both page snapshots are clipped and only brand orange is visible. */
@keyframes page-wipe-old {
  from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  to { clip-path: polygon(0 0, 100% 0, 100% -100%, 0 -100%); }
}
@keyframes page-wipe-new {
  from { clip-path: polygon(0 200%, 100% 200%, 100% 100%, 0 100%); }
  to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html[data-page-panel]::before { display: none; }
}