::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

[data-theme-transition="to-dark"]::view-transition-old(root) {
  z-index: 1;
  animation: theme-blur-out 0.9s cubic-bezier(0.65, 0, 0.35, 1) both;
}

[data-theme-transition="to-dark"]::view-transition-new(root) {
  z-index: 9999;
  animation: circular-expand 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

[data-theme-transition="to-light"]::view-transition-old(root) {
  z-index: 9999;
  clip-path: circle(150% at var(--theme-toggle-x, 50%) var(--theme-toggle-y, 50%));
  animation: circular-contract 0.9s cubic-bezier(0.65, 0, 0.35, 1) both;
}

[data-theme-transition="to-light"]::view-transition-new(root) {
  z-index: 1;
  clip-path: none !important;
  animation: theme-blur-out 0.9s cubic-bezier(0.65, 0, 0.35, 1) reverse both;
}

@keyframes circular-expand {
  0% {
    clip-path: circle(0% at var(--theme-toggle-x, 50%) var(--theme-toggle-y, 50%));
    filter: blur(24px);
    transform: scale(1.15);
  }

  to {
    clip-path: circle(150% at var(--theme-toggle-x, 50%) var(--theme-toggle-y, 50%));
    filter: blur(0);
    transform: scale(1);
  }
}

@keyframes circular-contract {
  0% {
    clip-path: circle(150% at var(--theme-toggle-x, 50%) var(--theme-toggle-y, 50%));
    filter: blur(0);
    transform: scale(1);
  }

  to {
    clip-path: circle(0% at var(--theme-toggle-x, 50%) var(--theme-toggle-y, 50%));
    filter: blur(24px);
    transform: scale(1.15);
  }
}

@keyframes theme-blur-out {
  0% {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }

  to {
    filter: blur(20px);
    transform: scale(0.92);
    opacity: 0.3;
  }
}