/* Let supporting browsers hold the outgoing page on screen and cross-fade to
   the incoming one, so there is never a truly blank frame during real
   navigation even before our own bubble overlay takes over. */
@view-transition {
  navigation: auto;
}

.bubble-wipe {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  pointer-events: none;
}

.bw-backdrop {
  position: absolute;
  inset: 0;
  background: var(--ground, #4568b5);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.bubble-wipe.active .bw-backdrop,
.bubble-wipe.covered .bw-backdrop {
  opacity: 1;
}

.bubble-wipe.leaving .bw-backdrop {
  opacity: 0;
  transition: opacity 0.5s ease 0.15s;
}

.bw-bubble {
  position: absolute;
  left: var(--left);
  bottom: -8%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3) 32%, rgba(255, 255, 255, 0.08) 58%, transparent 74%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset -3px -3px 6px rgba(20, 30, 70, 0.15), inset 2px 2px 3px rgba(255, 255, 255, 0.4);
  opacity: 0;
  transform: translate(0, 0) scale(0.35);
  animation-delay: var(--delay);
  animation-duration: var(--dur);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

.bubble-wipe.active .bw-bubble {
  animation-name: bw-rise-in;
  animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1);
}

.bubble-wipe.covered .bw-bubble {
  animation: none;
  opacity: 0.9;
  transform: translate(var(--drift), var(--rise)) scale(1);
}

.bubble-wipe.leaving .bw-bubble {
  animation-name: bw-rise-out;
  animation-timing-function: ease-in;
  animation-delay: var(--leave-delay);
  animation-duration: var(--leave-dur);
}

@keyframes bw-rise-in {
  0% { transform: translate(0, 0) scale(0.35); opacity: 0; }
  30% { opacity: 0.9; }
  100% { transform: translate(var(--drift), var(--rise)) scale(1); opacity: 0.9; }
}

@keyframes bw-rise-out {
  0% { transform: translate(var(--drift), var(--rise)) scale(1); opacity: 0.9; }
  100% { transform: translate(calc(var(--drift) * 1.6), calc(var(--rise) - 25vh)) scale(0.75); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bubble-wipe { display: none !important; }
}