/* Premium theme portal transition.
   Original artwork + motion system; inspired by cinematic portfolio transitions,
   but not copied from any reference site. */

.theme-portal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint style;
  --portal-x: 50%;
  --portal-y: 50%;
  --portal-wash: linear-gradient(135deg, #08080a 0%, #17110a 55%, #c9964a 140%);
  --portal-blob-a: rgba(201, 150, 74, 0.45);
  --portal-blob-b: rgba(13, 148, 136, 0.28);
  --portal-particle: rgba(232, 185, 107, 0.9);
}

.theme-portal.is-active {
  visibility: visible;
  opacity: 1;
}

.theme-portal__wash,
.theme-portal__blob,
.theme-portal__particles,
.theme-portal__girl {
  position: absolute;
  will-change: transform, opacity, filter, clip-path;
}

.theme-portal__wash {
  inset: -16vmax;
  z-index: 1;
  background: var(--portal-wash);
  clip-path: circle(0vmax at var(--portal-x) var(--portal-y));
  transform: translateZ(0);
}

.theme-portal__blob {
  z-index: 2;
  width: 34vmax;
  aspect-ratio: 1;
  border-radius: 999px;
  filter: blur(24px);
  opacity: 0;
  mix-blend-mode: screen;
  transform: translate3d(0, 0, 0) scale(0.72);
}

.theme-portal__blob--one {
  left: 7vw;
  top: 10vh;
  background: radial-gradient(circle, var(--portal-blob-a), transparent 68%);
}

.theme-portal__blob--two {
  right: 4vw;
  bottom: 4vh;
  background: radial-gradient(circle, var(--portal-blob-b), transparent 70%);
}

.theme-portal__particles {
  inset: 0;
  z-index: 5;
}

.theme-portal__particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 999px;
  background: var(--portal-particle);
  box-shadow: 0 0 18px var(--portal-particle);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0);
  will-change: transform, opacity;
}

.theme-portal__girl {
  z-index: 4;
  left: 50%;
  top: 50%;
  width: min(34vmin, 320px);
  opacity: 0;
  transform: translate3d(-50%, -42%, 0) scale(0.86) rotate(-5deg);
  transform-origin: 50% 78%;
  filter: drop-shadow(0 28px 42px rgba(0, 0, 0, 0.32));
}

.theme-portal__girl svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.portal-girl__hair-back,
.portal-girl__hair-front,
.portal-girl__hair-strand,
.portal-girl__head,
.portal-girl__torso,
.portal-girl__dress,
.portal-girl__arm-left,
.portal-girl__arm-right,
.portal-girl__leg-left,
.portal-girl__leg-right {
  transform-box: fill-box;
  will-change: transform;
}

.portal-girl__hair-back,
.portal-girl__hair-front {
  transform-origin: 50% 10%;
}

.portal-girl__hair-strand {
  transform-origin: 50% 0%;
}

.portal-girl__head {
  transform-origin: 50% 80%;
}

.portal-girl__torso,
.portal-girl__dress {
  transform-origin: 50% 10%;
}

.portal-girl__arm-left {
  transform-origin: 88% 14%;
}

.portal-girl__arm-right {
  transform-origin: 12% 14%;
}

.portal-girl__leg-left,
.portal-girl__leg-right {
  transform-origin: 50% 0%;
}

html.theme-transitioning body {
  cursor: progress;
}

html.theme-transitioning #theme-toggle {
  pointer-events: none;
}

@media (max-width: 560px) {
  .theme-portal__girl {
    width: min(56vmin, 260px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-portal {
    display: none;
  }
}