:root {
  --portal-glow: #83e8b1;
  --portal-haze: #83e8b144;
}
html[data-theme="light"] {
  --portal-glow: #de8a36;
  --portal-haze: #de8a3644;
}
::view-transition {
  pointer-events: none;
}
::view-transition-group(root) {
  animation-duration: 850ms;
}
html[data-mode-transition="enter"]::view-transition-old(root) {
  animation: none;
}
html[data-mode-transition="enter"]::view-transition-new(root) {
  mix-blend-mode: normal;
  animation: portal-reveal 850ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes portal-reveal {
  from {
    clip-path: circle(0 at var(--portal-x) var(--portal-y));
    filter: drop-shadow(0 0 22px var(--portal-glow));
  }
  to {
    clip-path: circle(var(--portal-radius) at var(--portal-x) var(--portal-y));
    filter: drop-shadow(0 0 0 transparent);
  }
}
.mode-transition {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  pointer-events: none;
}
.portal-wave {
  position: absolute;
  left: var(--portal-x);
  top: var(--portal-y);
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: 50%;
  border: 1px solid var(--portal-glow);
  background: radial-gradient(
    circle,
    transparent 50%,
    var(--portal-haze) 75%,
    transparent
  );
  box-shadow:
    0 0 12px var(--portal-haze),
    inset 0 0 10px var(--portal-haze);
}
.portal-glyph {
  position: absolute;
  width: min(220px, 45vw);
  height: min(220px, 45vw);
  left: 50%;
  top: 50%;
  stroke: var(--portal-glow);
  stroke-width: 1;
  filter: drop-shadow(0 0 10px var(--portal-haze));
}
html[data-motion="off"] .mode-transition {
  display: none;
}
html[data-motion="off"]::view-transition-group(root),
html[data-motion="off"]::view-transition-old(root),
html[data-motion="off"]::view-transition-new(root) {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .mode-transition {
    display: none;
  }
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}
@media print {
  .mode-transition {
    display: none;
  }
}