/* Issue #60 disposable paired-shutter Experience candidate.
   Two same-theme surfaces meet at the viewport center, resolve the accepted
   cursor identity through SCANNING… and back, then reopen outward only when
   the destination is ready. */

:root {
  --page-transition-close: 420ms;
  --page-transition-open: 500ms;
  --page-transition-ease-close: cubic-bezier(.76, 0, .24, 1);
  --page-transition-ease-open: cubic-bezier(.22, 1, .36, 1);
  --page-transition-bridge-type-size: clamp(14px, 1.05vw, 17px);
  --page-transition-identity-width: clamp(44.5px, 3.34vw, 54px);
}

/* The destination boot bridge exists only while the exact fresh marker is
   present. The controller replaces it with the live paired layer before
   clearing the marker-backed attribute. */
html[data-page-transition="arrival"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--surface-page);
  pointer-events: auto;
}

html[data-page-transition="arrival"]::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
  width: var(--page-transition-identity-width);
  aspect-ratio: 36.75 / 18.898438;
  background: var(--text-primary);
  transform: translate(-50%, calc(-50% - 1px));
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 36.75 18.898438'%3E%3Cpath d='M0 6.65h1.65V14H0zM0 6.65h5.1V8.3H0zM6.35 6.65H8V14H6.35zM6.35 12.35h6.15V14H6.35zM10.85 6.65h1.65V17.5h-1.65zM7.95 15.85h4.55v1.65H7.95zM21.45 4.203125h1.65v1.65h-1.65zM21.45 6.65h1.65V14h-1.65zM24.5 12.35h1.65V14H24.5zM29.2 6.65h3.3V8.3h-3.3zM32.05 6.65h1.65v3.3h-1.65zM29.2 8.3h4.5v1.65h-4.5zM27.55 8.3h1.65V14h-1.65zM32.05 8.3h1.65V14h-1.65zM29.2 12.35h4.5V14h-4.5zM35.1 4.203125h1.65v1.65H35.1zM35.1 6.65h1.65V14H35.1zM13.9 4.203125h6.15V14H13.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 36.75 18.898438'%3E%3Cpath d='M0 6.65h1.65V14H0zM0 6.65h5.1V8.3H0zM6.35 6.65H8V14H6.35zM6.35 12.35h6.15V14H6.35zM10.85 6.65h1.65V17.5h-1.65zM7.95 15.85h4.55v1.65H7.95zM21.45 4.203125h1.65v1.65h-1.65zM21.45 6.65h1.65V14h-1.65zM24.5 12.35h1.65V14H24.5zM29.2 6.65h3.3V8.3h-3.3zM32.05 6.65h1.65v3.3h-1.65zM29.2 8.3h4.5v1.65h-4.5zM27.55 8.3h1.65V14h-1.65zM32.05 8.3h1.65V14h-1.65zM29.2 12.35h4.5V14h-4.5zM35.1 4.203125h1.65v1.65H35.1zM35.1 6.65h1.65V14H35.1zM13.9 4.203125h6.15V14H13.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: clip;
  pointer-events: none;
  visibility: hidden;
  contain: strict;
}

.page-transition[hidden] {
  display: none;
}

.page-transition.is-closing,
.page-transition.is-covered,
.page-transition.is-opening,
.page-transition.is-proof {
  visibility: visible;
  pointer-events: auto;
}

.page-transition__shutter {
  position: absolute;
  right: 0;
  left: 0;
  height: calc(50% + 1px);
  background: var(--surface-page);
  backface-visibility: hidden;
  will-change: transform;
}

.page-transition__shutter--upper {
  top: -1px;
  transform: translateY(calc(-100% - 1px));
}

.page-transition__shutter--lower {
  bottom: -1px;
  transform: translateY(calc(100% + 1px));
}

.page-transition.is-closing .page-transition__shutter {
  transform: translateY(0);
  transition: transform var(--page-transition-close) var(--page-transition-ease-close);
}

.page-transition.is-covered .page-transition__shutter {
  transform: translateY(0);
}

.page-transition.is-opening .page-transition__shutter--upper {
  transform: translateY(calc(-100% - 1px));
  transition: transform var(--page-transition-open) var(--page-transition-ease-open);
}

.page-transition.is-opening .page-transition__shutter--lower {
  transform: translateY(calc(100% + 1px));
  transition: transform var(--page-transition-open) var(--page-transition-ease-open);
}

.page-transition__bridge {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: clamp(136px, 15vw, 188px);
  min-height: 64px;
  display: grid;
  place-items: center;
  color: var(--text-primary);
  transform: translate(-50%, -50%);
}

.page-transition__identity,
.page-transition__scan-copy {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 120ms linear, transform 180ms var(--page-transition-ease-open);
}

.page-transition__identity {
  width: var(--page-transition-identity-width);
  height: auto;
  display: block;
  fill: currentColor;
  translate: 0 -1px;
}

.page-transition__scan-copy {
  display: block;
  color: currentColor;
  font-family: "Space Grotesk Proof", sans-serif;
  font-size: var(--page-transition-bridge-type-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.page-transition.is-bridge-identity .page-transition__identity,
.page-transition.is-bridge-reconstructed .page-transition__identity,
.page-transition.is-bridge-scanning .page-transition__scan-copy,
.page-transition.is-proof-identity .page-transition__identity,
.page-transition.is-proof-scanning .page-transition__scan-copy,
.page-transition.is-proof-reconstructed .page-transition__identity {
  opacity: 1;
  transform: translateY(0);
}

.page-transition.is-opening .page-transition__identity,
.page-transition.is-opening .page-transition__scan-copy {
  opacity: 0;
  transition: none;
}

html[data-page-transition-proof="closing"] .page-transition__shutter--upper {
  transform: translateY(-44%);
}

html[data-page-transition-proof="closing"] .page-transition__shutter--lower {
  transform: translateY(44%);
}

html[data-page-transition-proof="identity"] .page-transition__shutter,
html[data-page-transition-proof="scanning"] .page-transition__shutter,
html[data-page-transition-proof="reconstructed"] .page-transition__shutter,
html[data-page-transition-proof="opening"] .page-transition__shutter {
  transform: translateY(0);
}

html[data-page-transition-proof="opening"] .page-transition__shutter--upper {
  transform: translateY(-56%);
}

html[data-page-transition-proof="opening"] .page-transition__shutter--lower {
  transform: translateY(56%);
}

/* #60 owns only the document-swap integration correction. These values are
   the accepted #56 header and base index-menu typography, held identical
   across the older route-specific body typography scopes. */
body.issue-60-page-transition .utility-header {
  font-family: "Geist Mono Proof", monospace;
  font-size: clamp(10px, .64vw, 12px);
  font-weight: 620;
  line-height: normal;
}

body.issue-60-page-transition .index-route > a:first-child,
body.issue-60-page-transition .index-route > a:first-child em,
body.issue-60-page-transition .subroute,
body.issue-60-page-transition .index-route p {
  font-family: "Geist Mono Proof", monospace;
  font-weight: 400;
}

body.issue-60-page-transition .index-route > a:first-child {
  font-size: 11px;
  line-height: normal;
}

body.issue-60-page-transition .index-route > a:first-child em {
  font-size: 8px;
  line-height: normal;
}

body.issue-60-page-transition .subroute {
  font-size: 10px;
  line-height: 1.35;
}

body.issue-60-page-transition .index-route p {
  font-size: 9px;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  html[data-page-transition="arrival"]::before,
  html[data-page-transition="arrival"]::after,
  .page-transition {
    display: none;
  }
}

html[data-page-transition-mode="reduced"]::before,
html[data-page-transition-mode="reduced"]::after,
html[data-page-transition-mode="reduced"] .page-transition {
  display: none;
}