: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: 480ms;
}
html[data-mode-transition="enter"]::view-transition-old(root) {
  animation: none;
  mix-blend-mode: normal;
}
html[data-mode-transition="enter"]::view-transition-new(root) {
  mix-blend-mode: normal;
  animation: portal-reveal 480ms 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));
  }
  to {
    clip-path: circle(var(--portal-radius) at var(--portal-x) var(--portal-y));
  }
}
.mode-transition {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  pointer-events: none;
}
.mode-transition[data-variant="fade"] {
  background: var(--transition-cover, var(--night));
}
.mode-transition[data-variant="fade"] .portal-wave {
  display: none;
}
.mode-transition[data-variant="fade"] .portal-glyph {
  width: min(110px, 24vw);
  height: min(110px, 24vw);
  transform: translate(-50%, -50%);
  stroke: var(--transition-color);
  opacity: 0.35;
  filter: none;
}
/* Avoid capturing an intermediate thumb/color state in desktop snapshots. */
html[data-mode-transition="enter"] .appearance-switch *,
html[data-mode-transition] .button {
  transition: none;
}
html[data-mode-transition] .night-sky i,
html[data-mode-transition] .portrait-sigil,
html[data-mode-transition] .portrait-frame::before,
html[data-mode-transition] .portrait-frame::after,
html[data-mode-transition] .hero::before,
html[data-mode-transition] .chibi-button .chibi,
html[data-mode-transition] .orb-fire,
html[data-mode-transition] .switch-orb::before,
html[data-mode-transition] .switch-orb::after {
  animation-play-state: paused !important;
}
.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;
  }
}