/* Browser snapshots move away to reveal the branded pastel panel, then
   bring in the destination. No delayed DOM overlay or intercepted clicks. */
/* The navigation opt-in lives in each page's head so it is available before
   the browser decides whether to create the incoming view transition. */

::view-transition {
  background: #b9ddf5 url('../assets/images/transition-stamp.svg') center / min(82vw, 540px) auto no-repeat;
  border: 4px solid #202126;
  box-sizing: border-box;
  pointer-events: none;
}

::view-transition-group(root) {
  animation: none;
}

::view-transition-image-pair(root) {
  isolation: isolate;
}

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
  backface-visibility: hidden;
  outline: 3px solid #202126;
  box-shadow: 10px 10px 0 #202126;
}

::view-transition-old(root) {
  animation: panel-out 240ms cubic-bezier(.65, 0, .35, 1) both;
}

::view-transition-new(root) {
  animation: panel-in 300ms 400ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes panel-out {
  from { transform: translateY(0); }
  to { transform: translateY(-110%); }
}

@keyframes panel-in {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}

/* Native SVG cursors follow the pointer exactly, without an overlay or trail.
   URL hotspots match the visible arrow tip; keyword fallbacks stay functional. */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: url('../assets/images/cursor-arrow.svg') 3 3, auto;
  }

  a, a *, button, button *, summary, summary *, select,
  label[for], [role='button'] {
    cursor: url('../assets/images/cursor-link.svg') 3 3, pointer;
  }

  input, textarea, [contenteditable='true'] {
    cursor: text;
  }

  button:disabled, button:disabled *, input:disabled, select:disabled {
    cursor: not-allowed;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Keep the shared navigation anchored while only the page snapshot moves. */
.global-nav { view-transition-name: site-navigation; }
::view-transition-group(site-navigation) {
  animation: none;
  z-index: 2;
}
::view-transition-old(site-navigation) { display: none; }
::view-transition-new(site-navigation) {
  animation: none;
  mix-blend-mode: normal;
}