/*
 * NEBULA Glide — progressive page transitions for same-origin navigation.
 * Native cross-document View Transitions are preferred; CSS/JS classes
 * provide a compact fallback without changing normal link semantics.
 */

:root {
  --nebula-glide-bg: #02040a;
  --nebula-glide-cyan: rgba(70, 220, 248, 0.34);
  --nebula-glide-violet: rgba(164, 94, 255, 0.32);
  --nebula-glide-pink: rgba(236, 72, 153, 0.2);
  --nebula-glide-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  background-color: var(--nebula-glide-bg);
}

@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 420ms;
  background: var(--nebula-glide-bg);
}

::view-transition-image-pair(root) {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 22% 82%, var(--nebula-glide-cyan), transparent 42%),
    radial-gradient(ellipse at 76% 28%, var(--nebula-glide-violet), transparent 46%),
    radial-gradient(ellipse at 58% 100%, var(--nebula-glide-pink), transparent 38%),
    var(--nebula-glide-bg);
  background-size: 145% 145%;
  animation: nebula-native-aurora 420ms var(--nebula-glide-ease) both;
}

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

::view-transition-old(root) {
  animation: nebula-native-exit 180ms ease-in both;
}

::view-transition-new(root) {
  animation: nebula-native-enter 300ms var(--nebula-glide-ease) 80ms both;
}

html.nebula-share-site-header body > header {
  view-transition-name: nebula-site-header;
}

::view-transition-group(nebula-site-header) {
  z-index: 100;
  animation-duration: 420ms;
}

::view-transition-old(nebula-site-header) {
  animation: nebula-header-hold 360ms linear both;
}

::view-transition-new(nebula-site-header) {
  animation: nebula-header-enter 180ms ease-out 120ms both;
}

@keyframes nebula-native-exit {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, -10px, 0); }
}

@keyframes nebula-native-enter {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes nebula-native-aurora {
  from { background-position: 0% 70%, 100% 0%, 40% 100%; }
  to { background-position: 32% 50%, 72% 24%, 60% 82%; }
}

@keyframes nebula-header-hold {
  from, to { opacity: 1; }
}

@keyframes nebula-header-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.nebula-page-glide {
  position: fixed;
  z-index: 99990;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: rgba(2, 4, 10, 0);
  transition: opacity 180ms ease, visibility 0s linear 180ms, background 180ms ease;
}

.nebula-page-glide::before {
  content: "";
  position: absolute;
  top: 46%;
  left: -68vmax;
  width: 72vmax;
  height: 24vmax;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 34% 50%, rgba(80, 226, 250, 0.7), transparent 46%),
    radial-gradient(ellipse at 68% 50%, rgba(166, 93, 255, 0.68), transparent 48%);
  filter: blur(34px);
  opacity: 0;
  transform: translate3d(0, -50%, 0) rotate(-10deg);
}

body.nebula-glide-leaving .nebula-page-glide,
html.nebula-glide-entering .nebula-page-glide {
  opacity: 1;
  visibility: visible;
  background: rgba(2, 4, 10, 0.38);
  transition-delay: 0s;
}

body.nebula-glide-leaving .nebula-page-glide::before {
  animation: nebula-fallback-sweep-out 240ms var(--nebula-glide-ease) both;
}

html.nebula-glide-entering .nebula-page-glide::before {
  animation: nebula-fallback-sweep-in 300ms var(--nebula-glide-ease) both;
}

html.nebula-glide-entering body.nebula-glide-entering-active .nebula-page-glide {
  opacity: 0;
  visibility: hidden;
  background: rgba(2, 4, 10, 0);
  transition: opacity 280ms ease, visibility 0s linear 280ms, background 280ms ease;
}

body.nebula-glide-leaving > :where(:not(header):not(nav):not(script):not(style):not(#intro-overlay):not(.nebula-page-glide)) {
  animation: nebula-fallback-content-out 180ms ease-in both;
  pointer-events: none;
}

html.nebula-glide-entering body > :where(:not(header):not(nav):not(script):not(style):not(#intro-overlay):not(.nebula-page-glide)) {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

html.nebula-glide-entering body.nebula-glide-entering-active > :where(:not(header):not(nav):not(script):not(style):not(#intro-overlay):not(.nebula-page-glide)) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 260ms var(--nebula-glide-ease), transform 300ms var(--nebula-glide-ease);
}

@keyframes nebula-fallback-content-out {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: 0; transform: translate3d(0, -8px, 0); }
}

@keyframes nebula-fallback-sweep-out {
  0% { opacity: 0; transform: translate3d(0, -50%, 0) rotate(-10deg); }
  45% { opacity: 0.72; }
  100% { opacity: 0.2; transform: translate3d(125vmax, -50%, 0) rotate(-10deg); }
}

@keyframes nebula-fallback-sweep-in {
  0% { opacity: 0.42; transform: translate3d(48vmax, -50%, 0) rotate(-10deg); }
  100% { opacity: 0; transform: translate3d(125vmax, -50%, 0) rotate(-10deg); }
}

@media (max-width: 600px) {
  ::view-transition-group(root) {
    animation-duration: 320ms;
  }

  ::view-transition-image-pair(root) {
    animation-duration: 320ms;
  }

  ::view-transition-old(root) {
    animation-duration: 140ms;
  }

  ::view-transition-new(root) {
    animation-duration: 220ms;
    animation-delay: 60ms;
  }

  body.nebula-glide-leaving .nebula-page-glide::before {
    animation-duration: 190ms;
  }

  html.nebula-glide-entering body.nebula-glide-entering-active > :where(:not(header):not(nav):not(script):not(style):not(#intro-overlay):not(.nebula-page-glide)) {
    transition-duration: 220ms, 250ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  .nebula-page-glide {
    display: none !important;
  }

  body.nebula-glide-leaving > :where(:not(header):not(nav):not(script):not(style):not(#intro-overlay):not(.nebula-page-glide)),
  html.nebula-glide-entering body > :where(:not(header):not(nav):not(script):not(style):not(#intro-overlay):not(.nebula-page-glide)),
  html.nebula-glide-entering body.nebula-glide-entering-active > :where(:not(header):not(nav):not(script):not(style):not(#intro-overlay):not(.nebula-page-glide)) {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}