/* Scienshell continuity: a steady masthead and one short page handoff. */
/* The opt-in lives before scripts in the document head to survive cold history loads. */

:root {
  --ss-page-duration: 200ms;
  --ss-page-ease: cubic-bezier(.16, 1, .3, 1);
  --ss-page-travel: 8px;
  --ss-page-exit: -3px;
  --ss-page-travel-x: 0px;
  --ss-page-exit-x: 0px;
}

html[data-ss-direction="back"] {
  --ss-page-travel: -6px;
  --ss-page-exit: 3px;
}

/* Adjacent destinations share an axis, anchored by the moving selection line. */
html[data-ss-section-direction] {
  --ss-page-duration: 280ms;
  --ss-page-ease: cubic-bezier(.22, 1, .36, 1);
  --ss-page-travel: 0px;
  --ss-page-exit: 0px;
}
html[data-ss-section-direction="next"] {
  --ss-page-travel-x: 18px;
  --ss-page-exit-x: -6px;
}
html[data-ss-section-direction="previous"] {
  --ss-page-travel-x: -18px;
  --ss-page-exit-x: 6px;
}

body > .masthead .site-nav.ss-nav-enhanced a[aria-current]::after {
  content: none !important;
}
body > .masthead .site-nav a {
  transition: color 140ms ease-out;
}
.site-nav .ss-nav-indicator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 2px;
  border-radius: 1px;
  background: var(--blue, #b3d9eb);
  pointer-events: none;
  view-transition-name: ss-nav-indicator;
}
.site-nav .ss-nav-indicator[hidden] { display: none; }

/* Only the masthead is isolated. Do not allocate a layer per card or canvas. */
body > .masthead { view-transition-name: ss-masthead; }

::view-transition { pointer-events: none; }
::view-transition-group(root),
::view-transition-group(ss-masthead) {
  animation-duration: var(--ss-page-duration);
  animation-timing-function: var(--ss-page-ease);
}

::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
  backface-visibility: hidden;
}

/* Keep the outgoing frame opaque beneath the incoming frame: no black dip. */
::view-transition-old(root) {
  animation: ss-page-depart var(--ss-page-duration) var(--ss-page-ease) both;
}
::view-transition-new(root) {
  animation: ss-page-arrive var(--ss-page-duration) var(--ss-page-ease) both;
}
::view-transition-old(ss-masthead),
::view-transition-new(ss-masthead) { animation: none; }
::view-transition-group(ss-nav-indicator) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-old(ss-nav-indicator),
::view-transition-new(ss-nav-indicator) {
  animation: none;
  mix-blend-mode: normal;
}

@keyframes ss-page-depart {
  to { transform: translate(var(--ss-page-exit-x), var(--ss-page-exit)); }
}
@keyframes ss-page-arrive {
  from { opacity: 0; transform: translate(var(--ss-page-travel-x), var(--ss-page-travel)); }
  to { opacity: 1; transform: translate(0, 0); }
}

/* The native page handoff owns the initial entrance; content stays visible. */
html[data-ss-navigation] body.inner .reveal-item {
  opacity: 1;
  translate: none;
  transition: none;
}

@media (max-width: 800px) {
  :root { --ss-page-duration: 180ms; --ss-page-travel: 8px; --ss-page-exit: -3px; }
  html[data-ss-direction="back"] { --ss-page-travel: -6px; --ss-page-exit: 3px; }
  html[data-ss-section-direction] {
    --ss-page-duration: 240ms;
    --ss-page-travel: 0px;
    --ss-page-exit: 0px;
  }
  html[data-ss-section-direction="next"] { --ss-page-travel-x: 10px; --ss-page-exit-x: -3px; }
  html[data-ss-section-direction="previous"] { --ss-page-travel-x: -10px; --ss-page-exit-x: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}