/* Reviewed SkyLight declarative wallpaper effects.
   Effects animate only transforms and opacity; descriptor data cannot add CSS. */
.ia-wallpaper-motion {
  --pz-motion-c1: #0b234f;
  --pz-motion-c2: #117871;
  --pz-motion-c3: #c9a227;
  --pz-motion-c4: #4da6ff;
  --pz-motion-duration: 24000ms;
  --pz-motion-duration-fast: 14880ms;
  --pz-motion-duration-medium: 19680ms;
  --pz-motion-direction: alternate;
  --pz-motion-intensity: .58;
  --pz-motion-opacity-low: .22;
  --pz-motion-opacity-high: .46;
  --pz-motion-light-fallback: #eef2f7;
  --pz-motion-dark-fallback: #111827;
  position: fixed;
  inset: -14vmax;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  isolation: isolate;
  background: var(--pz-motion-light-fallback);
}

[data-theme="dark"] .ia-wallpaper-motion,
.ia-wallpaper-motion--login {
  background: var(--pz-motion-dark-fallback);
}

.ia-wallpaper-motion--login {
  z-index: 0;
}

.ia-wallpaper-motion--login + .skylight-auth {
  z-index: 1;
}

.ia-wallpaper-motion::before,
.ia-wallpaper-motion::after {
  position: absolute;
  inset: 0;
  border-radius: 38%;
  opacity: 0;
  will-change: transform, opacity;
  content: "";
}

.ia-wallpaper-motion.is-running::before,
.ia-wallpaper-motion.is-running::after {
  opacity: var(--pz-motion-intensity);
}

.pz-motion--ambient-drift::before {
  background:
    radial-gradient(circle at 20% 25%, var(--pz-motion-c2), transparent 34%),
    radial-gradient(circle at 78% 30%, var(--pz-motion-c3), transparent 31%),
    radial-gradient(circle at 48% 76%, var(--pz-motion-c4), transparent 37%);
  animation: pz-ambient-drift var(--pz-motion-duration) ease-in-out infinite var(--pz-motion-direction);
}

.pz-motion--ambient-drift::after {
  inset: 10%;
  background: radial-gradient(circle at 50% 50%, var(--pz-motion-c1), transparent 65%);
  animation: pz-ambient-breathe var(--pz-motion-duration-medium) ease-in-out infinite alternate;
}

.pz-motion--aurora-flow::before {
  inset: -20% -10%;
  border-radius: 44%;
  background: linear-gradient(115deg, var(--pz-motion-c1), var(--pz-motion-c2), var(--pz-motion-c3), var(--pz-motion-c4));
  filter: blur(44px);
  animation: pz-aurora-flow var(--pz-motion-duration) ease-in-out infinite var(--pz-motion-direction);
}

.pz-motion--aurora-flow::after {
  inset: 8% -18%;
  background: linear-gradient(75deg, transparent 8%, var(--pz-motion-c3) 42%, var(--pz-motion-c2) 62%, transparent 92%);
  filter: blur(58px);
  animation: pz-aurora-ribbon var(--pz-motion-duration-medium) ease-in-out infinite alternate;
}

.pz-motion--soft-orbit::before {
  inset: 16% 24%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 22% 28%, var(--pz-motion-c2) 0 12%, transparent 31%),
    radial-gradient(circle at 78% 70%, var(--pz-motion-c3) 0 11%, transparent 30%),
    radial-gradient(circle at 55% 42%, var(--pz-motion-c4) 0 8%, transparent 25%);
  animation: pz-soft-orbit var(--pz-motion-duration) linear infinite var(--pz-motion-direction);
}

.pz-motion--soft-orbit::after {
  inset: 26% 34%;
  border: 1px solid color-mix(in srgb, var(--pz-motion-c2) 45%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 90px color-mix(in srgb, var(--pz-motion-c2) 35%, transparent),
    inset 0 0 74px color-mix(in srgb, var(--pz-motion-c3) 28%, transparent);
  animation: pz-soft-pulse var(--pz-motion-duration-fast) ease-in-out infinite alternate;
}

.ia-wallpaper-motion.is-fallback::before,
.ia-wallpaper-motion.is-fallback::after,
.ia-wallpaper-motion.is-paused::before,
.ia-wallpaper-motion.is-paused::after {
  animation: none !important;
  opacity: 0 !important;
  transform: none !important;
}

body[data-pz-wallpaper="motion"] .main {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}

body[data-pz-wallpaper="motion"] .content {
  background: transparent;
}

@keyframes pz-ambient-drift {
  0% { transform: translate3d(-4%, -2%, 0) scale(1.02) rotate(-3deg); }
  50% { transform: translate3d(5%, 4%, 0) scale(1.12) rotate(4deg); }
  100% { transform: translate3d(-2%, 6%, 0) scale(1.06) rotate(-1deg); }
}

@keyframes pz-ambient-breathe {
  from { transform: scale(.9); opacity: var(--pz-motion-opacity-low); }
  to { transform: scale(1.18); opacity: var(--pz-motion-opacity-high); }
}

@keyframes pz-aurora-flow {
  0% { transform: translate3d(-8%, -3%, 0) rotate(-9deg) scale(1.05); }
  50% { transform: translate3d(7%, 5%, 0) rotate(5deg) scale(1.16); }
  100% { transform: translate3d(-1%, 8%, 0) rotate(-2deg) scale(1.1); }
}

@keyframes pz-aurora-ribbon {
  from { transform: translate3d(-9%, 2%, 0) rotate(-8deg); }
  to { transform: translate3d(10%, -4%, 0) rotate(7deg); }
}

@keyframes pz-soft-orbit {
  from { transform: rotate(0deg) scale(.98); }
  50% { transform: rotate(180deg) scale(1.1); }
  to { transform: rotate(360deg) scale(.98); }
}

@keyframes pz-soft-pulse {
  from { transform: scale(.86); opacity: var(--pz-motion-opacity-low); }
  to { transform: scale(1.16); opacity: var(--pz-motion-opacity-high); }
}

body[data-pz-motion="reduced"] .ia-wallpaper-motion::before,
body[data-pz-motion="reduced"] .ia-wallpaper-motion::after {
  animation: none !important;
  opacity: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .ia-wallpaper-motion::before,
  .ia-wallpaper-motion::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

@media (max-width: 760px) {
  .ia-wallpaper-motion::before,
  .ia-wallpaper-motion::after {
    animation: none !important;
    opacity: 0 !important;
  }
}