/* Native snapshots provide the only overlapping page layers. */
html[data-diagonal-transition],
html[data-diagonal-transition] body {
  height: 100%;
  overflow: hidden;
}
html[data-diagonal-transition] body { margin: 0; }
[data-diagonal-page] {
  position: relative;
  box-sizing: border-box;
  height: 100dvh;
  overflow-y: auto;
  background: var(--bg, #fff);
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  view-transition-name: diagonal-page;
}
html[data-diagonal-transition] {
  --diagonal-duration: 1.02s;
  --diagonal-ease: cubic-bezier(0.5, 0.006, 0, 1);
  view-transition-name: none;
}
html[data-diagonal-transition]::view-transition-group(diagonal-page) {
  animation: none;
  z-index: 1;
}
html[data-diagonal-transition]::view-transition-image-pair(diagonal-page) {
  isolation: isolate;
  background: rgb(2, 2, 2);
}
html[data-diagonal-transition]::view-transition-old(diagonal-page),
html[data-diagonal-transition]::view-transition-new(diagonal-page) {
  height: 100%;
  mix-blend-mode: normal;
}
html[data-diagonal-transition]::view-transition-old(diagonal-page) {
  z-index: 1;
  animation: diagonal-page-dim var(--diagonal-duration) linear both;
}
html[data-diagonal-transition]::view-transition-new(diagonal-page) {
  z-index: 2;
  animation: diagonal-page-reveal var(--diagonal-duration) var(--diagonal-ease) both;
}
@keyframes diagonal-page-reveal {
  from { clip-path: polygon(0 0, 100% 0, 100% -50%, 0 0); }
  to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes diagonal-page-dim {
  from { opacity: 1; }
  to { opacity: 0.32; }
}
html[data-diagonal-transition] [data-persistent-header] {
  view-transition-name: diagonal-header;
}
html[data-diagonal-transition]::view-transition-group(diagonal-header) {
  z-index: 2;
  animation: none;
}
html[data-diagonal-transition]::view-transition-old(diagonal-header) { display: none; }
html[data-diagonal-transition]::view-transition-new(diagonal-header) {
  animation: none;
  mix-blend-mode: normal;
}
@media (prefers-reduced-motion: reduce) {
  [data-diagonal-page] { scroll-behavior: auto; }
}