/* Shared infrastructure only: demo layouts and their brand styles stay intact. */
@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(root) {
  animation: portal-page-out 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
::view-transition-new(root) {
  animation: portal-page-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[data-route-direction="back"]::view-transition-old(root) {
  animation-name: portal-page-back-out;
}
html[data-route-direction="back"]::view-transition-new(root) {
  animation-name: portal-page-back-in;
}

/* A real link still navigates if this script, WebGL, or the API is unavailable. */
.portal-route-curtain {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  background: #16151b;
  color: #f3f1f7;
  font-family: system-ui, sans-serif;
  text-align: center;
  pointer-events: all;
}
.portal-route-curtain span { color: #bfb4d3; font-size: 0.875rem; }
.portal-route-curtain strong { font-size: clamp(1.75rem, 5vw, 3.5rem); font-weight: 500; letter-spacing: -0.045em; }

@keyframes portal-page-out {
  to { opacity: 0; transform: translateY(-24px) scale(0.985); }
}
@keyframes portal-page-in {
  from { opacity: 0; transform: translateY(48px) scale(1.015); }
  to { opacity: 1; transform: none; }
}
@keyframes portal-page-back-out {
  to { opacity: 0; transform: translateY(32px) scale(0.985); }
}
@keyframes portal-page-back-in {
  from { opacity: 0; transform: translateY(-32px) scale(1.015); }
  to { opacity: 1; transform: none; }
}

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