/* One ripple and timing for both pill destinations. */
@view-transition { navigation: auto; }

:root {
  --blue-wave-x: 50%;
  --blue-wave-y: 50%;
  --blue-wave-duration: 1500ms;
  --blue-fade-duration: 1200ms;
  --pill-wave-core: 5 31 82;
  --pill-wave-body: 12 68 152;
  --pill-wave-edge: 99 189 255;
  --pill-wave-shadow: 13 55 123;
  --pill-wave-halo: 24 89 181;
  --pill-wave-ring: 93 184 255;
  --pill-wave-outer: 49 126 239;
}

html[data-pill-color="red"] {
  --pill-wave-core: 82 5 17;
  --pill-wave-body: 152 12 36;
  --pill-wave-edge: 255 99 120;
  --pill-wave-shadow: 123 13 30;
  --pill-wave-halo: 181 24 48;
  --pill-wave-ring: 255 93 118;
  --pill-wave-outer: 239 49 77;
}

.open-source-page {
  --bg: #050c19;
  --bg-deep: #030916;
  background: radial-gradient(ellipse at 100% 15%, #0a2242 0, transparent 65%), var(--bg);
}

.private-page {
  --bg: #190509;
  --bg-deep: #160307;
  background: radial-gradient(ellipse at 0 15%, #420a16 0, transparent 65%), var(--bg);
}

.blue-wave {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  transform-origin: var(--blue-wave-x) var(--blue-wave-y);
  mix-blend-mode: screen;
  background: radial-gradient(ellipse at var(--blue-wave-x) var(--blue-wave-y),
    rgb(var(--pill-wave-core) / 0.88) 0 35%,
    rgb(var(--pill-wave-body) / 0.76) 38%,
    rgb(var(--pill-wave-edge) / 0.76) 39%,
    rgb(var(--pill-wave-shadow) / 0.48) 40%,
    rgb(var(--pill-wave-halo) / 0.18) 44%,
    rgb(var(--pill-wave-ring) / 0.52) 45%,
    transparent 46.5%,
    rgb(var(--pill-wave-outer) / 0.32) 50%,
    transparent 51.5%);
}

html[data-blue-transition] .blue-wave { display: block; }

html[data-blue-transition="out"] .blue-wave {
  animation: blue-loading 900ms ease-out both;
}

html[data-blue-transition="out"] :is(.site-header, main, .site-footer) {
  opacity: 0.82;
  transition: opacity 450ms ease;
}

html[data-blue-transition="in"] .blue-wave {
  animation: blue-ripple var(--blue-wave-duration) cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

html[data-blue-transition="in"] :is(.site-header, main, .site-footer) {
  animation: blue-content-in var(--blue-fade-duration) ease-out both;
}

html[data-blue-transition="native"] .blue-wave {
  view-transition-name: blue-wave;
  mix-blend-mode: normal;
}

::view-transition { pointer-events: none; }
::view-transition-group(root) { animation: none; }
::view-transition-old(root) {
  animation: blue-content-out var(--blue-fade-duration) ease-out both;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  animation: blue-content-in var(--blue-fade-duration) ease-out both;
  mix-blend-mode: normal;
}
::view-transition-group(blue-wave) {
  z-index: 2;
  animation: none;
  mix-blend-mode: screen;
}
::view-transition-new(blue-wave) {
  transform-origin: var(--blue-wave-x) var(--blue-wave-y);
  animation: blue-ripple var(--blue-wave-duration) cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes blue-loading {
  from { transform: scale(0.02); opacity: 0; }
  to { transform: scale(1.3); opacity: 0.36; }
}

@keyframes blue-ripple {
  0% { transform: scale(0.02); opacity: 0; }
  12% { opacity: 0.95; }
  65% { opacity: 0.72; }
  100% { transform: scale(2.8); opacity: 0; }
}

@keyframes blue-content-out {
  to { opacity: 0; }
}

@keyframes blue-content-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html[data-blue-transition] .blue-wave { display: none; }
  html[data-blue-transition] :is(.site-header, main, .site-footer) {
    animation: none;
    transition: none;
    opacity: 1;
  }
}