.viju-common-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  background: rgb(34 34 34 / .9);
  opacity: 0;
  pointer-events: auto;
  transition: opacity 220ms ease;
}

.viju-common-loader.is-visible {
  opacity: 1;
}

.viju-common-loader .onboarding-copy {
  position: absolute;
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  width: 116px;
  height: 116px;
  margin: 0;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  gap: 0;
  text-align: center;
  perspective: 680px;
  animation: page-loader-rise 360ms cubic-bezier(.16, .9, .22, 1) both;
}

.viju-common-loader .orbital {
  width: 116px;
  height: 116px;
  position: relative;
  margin: 0;
  border-radius: 50%;
  border: 1px solid oklch(100% 0 0 / .26);
  display: grid;
  place-items: center;
  background:
    conic-gradient(from 210deg, oklch(71% 0.3 344 / .9), oklch(67% 0.24 255 / .76), oklch(70% 0.18 178 / .72), oklch(71% 0.3 344 / .9)),
    radial-gradient(circle at 50% 48%, oklch(100% 0 0 / .16), transparent 62%);
  box-shadow:
    0 0 0 1px oklch(100% 0 0 / .08),
    0 24px 56px oklch(0% 0 0 / .38),
    0 0 42px oklch(67% 0.26 345 / .24);
  transform-style: preserve-3d;
  overflow: visible;
  animation:
    astro-dial-arrive 520ms cubic-bezier(.12, .88, .18, 1) backwards,
    astro-dial-breathe 2.8s ease-in-out .32s infinite;
}

.viju-common-loader .orbital::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  background:
    repeating-conic-gradient(from -14deg,
      transparent 0deg 7deg,
      oklch(100% 0 0 / .42) 7.4deg 8.2deg,
      transparent 8.8deg 15deg),
    conic-gradient(from 30deg,
      oklch(78% 0.3 344 / .14),
      transparent 26%,
      oklch(72% 0.24 252 / .16),
      transparent 62%,
      oklch(72% 0.2 180 / .12));
  mask: radial-gradient(circle, transparent 0 61%, #000 62% 69%, transparent 70% 100%);
  animation: astro-zodiac-turn 3.2s linear infinite;
  opacity: .82;
  pointer-events: none;
}

.viju-common-loader .orbital::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, oklch(100% 0 0 / .95), transparent 24%),
    linear-gradient(135deg, oklch(74% 0.3 344), oklch(66% 0.24 255));
  box-shadow: 0 0 22px oklch(67% 0.26 345 / .68), 0 0 46px oklch(64% 0.2 250 / .42);
  animation: astro-orbit 2.2s cubic-bezier(.45, 0, .55, 1) infinite;
  transform-origin: 58px 58px;
  left: 0;
  top: 52px;
  z-index: 2;
}

.viju-common-loader .orbital span {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background:
    linear-gradient(145deg, oklch(58% 0.2 250 / .28), oklch(70% 0.24 36 / .18));
  border: 0;
  box-shadow: 0 0 24px oklch(67% 0.26 345 / .28);
  position: relative;
  z-index: 1;
}

.viju-common-loader .orbital span::before,
.viju-common-loader .orbital span::after {
  content: none;
}

.viju-common-loader .onboarding-copy .orbital-eye {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 82px;
  height: 82px;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background-color: oklch(4% 0.018 268);
  background:
    linear-gradient(145deg, oklch(13% 0.04 274 / 1), oklch(3% 0.018 265 / 1));
  box-shadow:
    0 0 18px oklch(64% 0.24 252 / .16),
    inset 0 -16px 26px oklch(0% 0 0 / .74);
  opacity: 1;
  overflow: visible;
  z-index: 2;
  pointer-events: none;
}

.viju-common-loader .onboarding-copy .planet-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  animation: viju-planet-orbit 5.8s linear infinite;
  z-index: 1;
}

.viju-common-loader .onboarding-copy .planet-orbit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: oklch(84% 0.2 62 / .9);
  box-shadow: 0 0 7px currentColor;
  transform: translateX(-50%);
}

.viju-common-loader .onboarding-copy .planet-cyan {
  width: 66px;
  height: 66px;
  animation-duration: 4.9s;
  animation-delay: -1.1s;
}

.viju-common-loader .onboarding-copy .planet-cyan::before {
  width: 5px;
  height: 5px;
  background: oklch(78% 0.2 188 / .9);
}

.viju-common-loader .onboarding-copy .planet-blue {
  width: 56px;
  height: 56px;
  animation-duration: 6.7s;
  animation-delay: -2.4s;
  animation-direction: reverse;
}

.viju-common-loader .onboarding-copy .planet-blue::before {
  width: 4px;
  height: 4px;
  background: oklch(71% 0.25 255 / .88);
}

.viju-common-loader .onboarding-copy .planet-magenta {
  width: 46px;
  height: 46px;
  animation-duration: 4.2s;
  animation-delay: -3s;
}

.viju-common-loader .onboarding-copy .planet-magenta::before {
  width: 3.5px;
  height: 3.5px;
  background: oklch(70% 0.26 344 / .82);
}

.viju-common-loader .onboarding-copy .flame-volume,
.viju-common-loader .onboarding-copy .flame-sparks,
.viju-common-loader .onboarding-copy .heart-glyph {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
}

.viju-common-loader .onboarding-copy .flame-volume {
  transform-origin: 50% 84%;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
  z-index: 2;
}

.viju-common-loader .onboarding-copy .flame-outer {
  width: 58px;
  height: 60px;
  border-radius: 50% 50% 46% 54% / 62% 62% 38% 36%;
  background:
    radial-gradient(ellipse at 50% 70%, oklch(100% 0.11 86 / .32) 0 14%, transparent 48%),
    radial-gradient(ellipse at 34% 52%, oklch(68% 0.29 24 / .52) 0 20%, transparent 56%),
    radial-gradient(ellipse at 66% 50%, oklch(76% 0.29 36 / .54) 0 20%, transparent 58%),
    radial-gradient(ellipse at 50% 34%, oklch(96% 0.18 72 / .3) 0 18%, transparent 54%);
  mask-image: radial-gradient(ellipse at 50% 58%, #000 0 44%, rgb(0 0 0 / .74) 58%, transparent 82%);
  opacity: .64;
  filter: url(#viju-flame-turbulence) blur(1.2px) drop-shadow(0 0 14px oklch(67% 0.28 28 / .34)) saturate(1.22);
  transform: translate(-50%, -49%) scaleX(1.02) scaleY(.94);
  animation: viju-flame-outer 1.62s cubic-bezier(.42, 0, .28, 1) infinite;
}

.viju-common-loader .onboarding-copy .flame-mid {
  width: 54px;
  height: 56px;
  border-radius: 52% 48% 46% 54% / 64% 62% 36% 34%;
  background:
    radial-gradient(ellipse at 50% 72%, oklch(100% 0.09 88 / .7) 0 16%, transparent 47%),
    radial-gradient(ellipse at 39% 52%, oklch(80% 0.28 33 / .58) 0 19%, transparent 52%),
    radial-gradient(ellipse at 61% 50%, oklch(89% 0.24 55 / .56) 0 19%, transparent 52%),
    radial-gradient(ellipse at 51% 34%, oklch(100% 0.13 82 / .36) 0 17%, transparent 50%);
  mask-image: radial-gradient(ellipse at 50% 58%, #000 0 42%, rgb(0 0 0 / .7) 56%, transparent 78%);
  opacity: .72;
  filter: url(#viju-flame-turbulence) blur(.9px) drop-shadow(0 0 12px oklch(73% 0.29 32 / .42)) saturate(1.26) brightness(1.04);
  transform: translate(-50%, -49%) scaleX(1.02) scaleY(.94);
  animation: viju-flame-mid 1.38s cubic-bezier(.42, 0, .24, 1) -.18s infinite;
}

.viju-common-loader .onboarding-copy .flame-core {
  width: 33px;
  height: 42px;
  border-radius: 50% 50% 46% 54% / 66% 64% 34% 32%;
  background:
    radial-gradient(ellipse at 50% 76%, oklch(100% 0.03 95 / .82) 0 18%, transparent 48%),
    radial-gradient(ellipse at 50% 56%, oklch(100% 0.13 87 / .58) 0 24%, transparent 58%),
    radial-gradient(ellipse at 52% 36%, oklch(96% 0.2 72 / .34) 0 18%, transparent 52%);
  mask-image: radial-gradient(ellipse at 50% 60%, #000 0 48%, rgb(0 0 0 / .62) 60%, transparent 80%);
  opacity: .58;
  filter: url(#viju-flame-turbulence) blur(.72px) drop-shadow(0 0 8px oklch(100% 0.11 84 / .42)) saturate(1.08);
  transform: translate(-50%, -48%) scaleX(1) scaleY(.96);
  animation: viju-flame-core 1.12s cubic-bezier(.38, 0, .26, 1) -.28s infinite;
}

.viju-common-loader .onboarding-copy .flame-sparks {
  width: 54px;
  height: 54px;
  background:
    radial-gradient(circle at 29% 61%, oklch(94% 0.18 74 / .62) 0 .8px, transparent 1.8px),
    radial-gradient(circle at 69% 48%, oklch(82% 0.24 42 / .56) 0 .8px, transparent 1.7px),
    radial-gradient(circle at 51% 25%, oklch(100% 0.1 86 / .42) 0 .7px, transparent 1.6px);
  opacity: .52;
  mix-blend-mode: screen;
  filter: blur(.1px) drop-shadow(0 0 6px oklch(78% 0.28 35 / .42));
  transform: translate(-50%, -50%);
  animation: viju-flame-sparks 1.18s linear infinite;
  will-change: transform, opacity;
  z-index: 2;
}

.viju-common-loader .onboarding-copy .heart-glyph {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  background: none;
  color: oklch(63% 0.27 27);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  transform: translate(-50%, -42%) scale(1);
  transform-origin: 50% 58%;
  animation: burning-heart-pulse 1.42s cubic-bezier(.4, 0, .2, 1) infinite;
  will-change: transform, text-shadow;
  opacity: .98;
  filter: drop-shadow(0 0 16px rgb(255 72 50 / .62));
  z-index: 4;
}

.viju-common-loader .motion-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

@keyframes astro-dial-arrive {
  0% {
    opacity: 0;
    transform: rotateX(28deg) rotateZ(-32deg) scale(.62);
  }
  58% {
    opacity: 1;
    transform: rotateX(-4deg) rotateZ(8deg) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) rotateZ(0deg) scale(1);
  }
}

@keyframes astro-dial-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 1px oklch(100% 0 0 / .08),
      0 24px 56px oklch(0% 0 0 / .38),
      0 0 42px oklch(67% 0.26 345 / .24);
  }
  50% {
    box-shadow:
      0 0 0 1px oklch(100% 0 0 / .12),
      0 28px 64px oklch(0% 0 0 / .42),
      0 0 70px oklch(64% 0.2 250 / .34);
  }
}

@keyframes astro-zodiac-turn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes page-loader-rise {
  from {
    opacity: 0;
    transform: scale(.86);
    filter: blur(6px) saturate(.75);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) saturate(1.1);
  }
}

@keyframes astro-orbit {
  0% {
    transform: rotate(0deg) translateZ(0) scale(.86);
  }
  35% {
    transform: rotate(126deg) translateZ(0) scale(1.18);
  }
  66% {
    transform: rotate(238deg) translateZ(0) scale(.94);
  }
  100% {
    transform: rotate(360deg) translateZ(0) scale(.86);
  }
}

@keyframes viju-planet-orbit {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes viju-flame-outer {
  0% {
    opacity: .44;
    transform: translate(-50%, -49%) scaleX(.98) scaleY(.94) rotate(-1deg);
    filter: url(#viju-flame-turbulence) blur(1.35px) drop-shadow(0 0 14px oklch(67% 0.28 28 / .32)) saturate(1.16) brightness(.96);
  }
  28% {
    opacity: .62;
    transform: translate(-50.6%, -50.4%) scaleX(1.04) scaleY(.98) rotate(.8deg);
    filter: url(#viju-flame-turbulence) blur(1.05px) drop-shadow(0 0 18px oklch(70% 0.29 30 / .42)) saturate(1.28) brightness(1.04);
  }
  55% {
    opacity: .52;
    transform: translate(-49.4%, -50.1%) scaleX(.99) scaleY(1.01) rotate(-.6deg);
    filter: url(#viju-flame-turbulence) blur(1.24px) drop-shadow(0 0 16px oklch(72% 0.3 32 / .34)) saturate(1.18) brightness(1);
  }
  78% {
    opacity: .64;
    transform: translate(-50.3%, -50.8%) scaleX(1.03) scaleY(1) rotate(.9deg);
    filter: url(#viju-flame-turbulence) blur(1px) drop-shadow(0 0 18px oklch(66% 0.28 26 / .42)) saturate(1.3) brightness(1.05);
  }
  100% {
    opacity: .45;
    transform: translate(-50%, -49%) scaleX(.98) scaleY(.94) rotate(-1deg);
    filter: url(#viju-flame-turbulence) blur(1.35px) drop-shadow(0 0 14px oklch(67% 0.28 28 / .34)) saturate(1.18) brightness(.96);
  }
}

@keyframes viju-flame-mid {
  0% {
    opacity: .54;
    transform: translate(-50%, -49.4%) scaleX(1) scaleY(.94) rotate(.5deg);
  }
  22% {
    opacity: .76;
    transform: translate(-49.6%, -50.2%) scaleX(1.04) scaleY(.98) rotate(-.8deg);
  }
  47% {
    opacity: .64;
    transform: translate(-50.4%, -49.8%) scaleX(.98) scaleY(1) rotate(.6deg);
  }
  72% {
    opacity: .78;
    transform: translate(-49.8%, -50.5%) scaleX(1.03) scaleY(.99) rotate(-.5deg);
  }
  100% {
    opacity: .56;
    transform: translate(-50%, -49.4%) scaleX(1) scaleY(.94) rotate(.5deg);
  }
}

@keyframes viju-flame-core {
  0% {
    opacity: .42;
    transform: translate(-50%, -49.5%) scaleX(.98) scaleY(.96);
  }
  26% {
    opacity: .64;
    transform: translate(-50%, -50.2%) scaleX(1.04) scaleY(.99) rotate(-.6deg);
  }
  54% {
    opacity: .52;
    transform: translate(-49.8%, -50%) scaleX(.98) scaleY(1.01) rotate(.7deg);
  }
  100% {
    opacity: .44;
    transform: translate(-50%, -49.5%) scaleX(.98) scaleY(.96);
  }
}

@keyframes viju-flame-sparks {
  0% {
    opacity: 0;
    transform: translate(-50%, -45%) scale(.86);
  }
  20% {
    opacity: .48;
  }
  72% {
    opacity: .28;
    transform: translate(-50%, -52%) scale(.96);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -55%) scale(.98);
  }
}

@keyframes burning-heart-pulse {
  0%, 100% {
    transform: translate(-50%, -42%) scale(.992);
  }
  46% {
    transform: translate(-50%, -43.5%) scale(1.025);
  }
  68% {
    transform: translate(-50%, -43%) scale(1.01);
  }
}

@media (prefers-reduced-motion: reduce) {
  .viju-common-loader *,
  .viju-common-loader *::before,
  .viju-common-loader *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}