/* ======================================================================
   PROROK — visible cosmic background motion 4.4.3
   Digital Mysticism Luxe: CSS-only orbital arcs, glints and slow light drift.
   No images, canvas or requestAnimationFrame loops.
   ====================================================================== */

body {
  position: relative;
  isolation: isolate;
}

.pr-cosmic-bg {
  position: fixed;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  opacity: .92;
}

/* On the redesigned dashboard the content container already sits at z-index: 1,
   so the animated layer can safely live above the opaque body gradient. */
body.page-myday .pr-cosmic-bg {
  z-index: 0;
  opacity: 1;
}

body.page-myday .container.myday-page {
  position: relative;
  z-index: 1;
}

.pr-cosmic-bg::before,
.pr-cosmic-bg::after,
.pr-cosmic-bg__orbit,
.pr-cosmic-bg__stars {
  position: absolute;
  display: block;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* A third, central orbit makes movement visible in the open space between cards. */
.pr-cosmic-bg::before {
  content: "";
  width: min(74vmax, 760px);
  aspect-ratio: 1;
  right: min(-24vmax, -210px);
  top: 17vh;
  border: 1px solid rgba(184, 154, 255, .18);
  border-radius: 50%;
  background:
    conic-gradient(
      from 18deg,
      transparent 0 8%,
      rgba(196, 92, 255, .34) 11%,
      transparent 16% 43%,
      rgba(77, 211, 255, .24) 47%,
      transparent 52% 76%,
      rgba(255, 108, 168, .22) 80%,
      transparent 85% 100%
    );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  filter: drop-shadow(0 0 14px rgba(139, 92, 246, .20));
  opacity: .72;
  animation: prCosmicMiddleOrbit 58s linear infinite;
}

/* A moving atmospheric glow is intentionally visible, but remains behind content. */
.pr-cosmic-bg::after {
  content: "";
  width: min(74vw, 520px);
  aspect-ratio: 1;
  left: -18vw;
  top: 28vh;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(139, 92, 246, .18) 0,
    rgba(196, 92, 255, .09) 27%,
    rgba(77, 211, 255, .045) 48%,
    transparent 70%
  );
  filter: blur(7px);
  opacity: .78;
  animation: prCosmicGlowDrift 13s ease-in-out infinite alternate;
}

/* Large orbital structures. */
.pr-cosmic-bg__orbit {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(184, 154, 255, .20);
  box-shadow:
    0 0 28px rgba(139, 92, 246, .07),
    inset 0 0 30px rgba(77, 211, 255, .025),
    0 0 0 52px rgba(139, 92, 246, .022),
    0 0 0 104px rgba(77, 211, 255, .014);
}

.pr-cosmic-bg__orbit::before,
.pr-cosmic-bg__orbit::after,
.pr-cosmic-bg__orbit > i,
.pr-cosmic-bg__orbit > i::before,
.pr-cosmic-bg__orbit > i::after,
.pr-cosmic-bg__stars::before,
.pr-cosmic-bg__stars::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

/* Segmented luminous line travelling around the orbit. */
.pr-cosmic-bg__orbit::before {
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0 7%,
    rgba(196, 92, 255, .54) 10%,
    transparent 15% 34%,
    rgba(77, 211, 255, .42) 38%,
    transparent 44% 72%,
    rgba(255, 108, 168, .34) 77%,
    transparent 83% 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  filter: drop-shadow(0 0 10px rgba(196, 92, 255, .30));
}

.pr-cosmic-bg__orbit::after {
  width: 7px;
  height: 7px;
  top: 10.5%;
  left: 53%;
  border-radius: 50%;
  background: rgba(245, 242, 255, .92);
  box-shadow:
    0 0 13px rgba(196, 92, 255, .82),
    -86px 126px 0 -1px rgba(77, 211, 255, .72),
    112px 176px 0 -1px rgba(255, 108, 168, .58);
  animation: prCosmicNodePulse 4.8s ease-in-out infinite;
}

.pr-cosmic-bg__orbit > i {
  inset: 25%;
  border: 1px solid rgba(77, 211, 255, .18);
  border-left-color: rgba(196, 92, 255, .07);
  border-bottom-color: rgba(255, 108, 168, .10);
  border-radius: 50%;
  transform: rotate(-18deg);
  box-shadow: 0 0 18px rgba(77, 211, 255, .035);
}

.pr-cosmic-bg__orbit > i::before {
  width: 5px;
  height: 5px;
  right: 11%;
  bottom: 18%;
  border-radius: 50%;
  background: rgba(255, 108, 168, .78);
  box-shadow: 0 0 12px rgba(255, 108, 168, .58);
}

.pr-cosmic-bg__orbit > i::after {
  width: 1px;
  height: 34px;
  top: -15px;
  left: 50%;
  background: linear-gradient(180deg, transparent, rgba(245, 242, 255, .42), transparent);
  box-shadow: 0 0 10px rgba(139, 92, 246, .34);
}

.pr-cosmic-bg__orbit--one {
  width: min(112vmax, 1080px);
  left: max(-58vmax, -590px);
  top: max(-34vmax, -350px);
  opacity: .78;
  animation: prCosmicOrbitOne 52s linear infinite;
}

.pr-cosmic-bg__orbit--two {
  width: min(88vmax, 850px);
  right: max(-39vmax, -390px);
  bottom: max(-24vmax, -250px);
  opacity: .64;
  animation: prCosmicOrbitTwo 67s linear infinite reverse;
}

/* Star layers: brighter than 4.4.2, still sparse and elegant. */
.pr-cosmic-bg__stars {
  inset: -8%;
  border-radius: 50%;
  background-repeat: no-repeat;
}

.pr-cosmic-bg__stars--near {
  opacity: .68;
  background-image:
    radial-gradient(circle at 8% 17%, rgba(245, 242, 255, .92) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 22% 42%, rgba(196, 92, 255, .78) 0 1.6px, transparent 2.5px),
    radial-gradient(circle at 41% 11%, rgba(77, 211, 255, .76) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 58% 29%, rgba(245, 242, 255, .72) 0 1.3px, transparent 2.2px),
    radial-gradient(circle at 74% 14%, rgba(255, 108, 168, .68) 0 1.5px, transparent 2.4px),
    radial-gradient(circle at 91% 39%, rgba(77, 211, 255, .64) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 14% 72%, rgba(245, 242, 255, .70) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 36% 84%, rgba(196, 92, 255, .70) 0 1.6px, transparent 2.5px),
    radial-gradient(circle at 63% 69%, rgba(245, 242, 255, .76) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 86% 82%, rgba(77, 211, 255, .68) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 52% 54%, rgba(255, 255, 255, .54) 0 1px, transparent 1.9px),
    radial-gradient(circle at 31% 61%, rgba(255, 108, 168, .48) 0 1px, transparent 1.9px);
  animation: prCosmicStarsNear 17s ease-in-out infinite alternate;
}

/* Two visible four-point glints. */
.pr-cosmic-bg__stars--near::before,
.pr-cosmic-bg__stars--near::after {
  width: 13px;
  height: 13px;
  background:
    linear-gradient(90deg, transparent 46%, rgba(245, 242, 255, .95) 48% 52%, transparent 54%),
    linear-gradient(0deg, transparent 46%, rgba(245, 242, 255, .95) 48% 52%, transparent 54%);
  filter: drop-shadow(0 0 7px rgba(196, 92, 255, .74));
  opacity: .78;
  animation: prCosmicTwinkle 5.2s ease-in-out infinite;
}

.pr-cosmic-bg__stars--near::before {
  left: 73%;
  top: 16%;
}

.pr-cosmic-bg__stars--near::after {
  left: 18%;
  top: 57%;
  width: 10px;
  height: 10px;
  filter: drop-shadow(0 0 7px rgba(77, 211, 255, .70));
  animation-delay: -2.1s;
}

.pr-cosmic-bg__stars--far {
  inset: -18%;
  opacity: .38;
  background-image:
    radial-gradient(circle at 12% 25%, rgba(245, 242, 255, .66) 0 1px, transparent 1.8px),
    radial-gradient(circle at 29% 8%, rgba(77, 211, 255, .56) 0 1px, transparent 1.8px),
    radial-gradient(circle at 47% 54%, rgba(196, 92, 255, .60) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 67% 21%, rgba(245, 242, 255, .54) 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 58%, rgba(255, 108, 168, .50) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 21% 88%, rgba(77, 211, 255, .50) 0 1px, transparent 1.8px),
    radial-gradient(circle at 72% 90%, rgba(245, 242, 255, .52) 0 1px, transparent 1.8px);
  animation: prCosmicStarsFar 72s linear infinite;
}

/* Keep the atmosphere still while the user reads a modal sheet. */
body.lux-sheet-open .pr-cosmic-bg__orbit,
body.lux-sheet-open .pr-cosmic-bg__stars,
body.lux-sheet-open .pr-cosmic-bg::before,
body.lux-sheet-open .pr-cosmic-bg::after {
  animation-play-state: paused;
}

@keyframes prCosmicOrbitOne {
  from { transform: rotate(0deg) scale(1); }
  50% { opacity: .94; }
  to { transform: rotate(360deg) scale(1.025); }
}

@keyframes prCosmicOrbitTwo {
  from { transform: rotate(0deg) scale(1.02); }
  50% { opacity: .86; }
  to { transform: rotate(360deg) scale(.985); }
}

@keyframes prCosmicMiddleOrbit {
  from { transform: rotate(0deg); opacity: .56; }
  50% { opacity: .84; }
  to { transform: rotate(-360deg); opacity: .56; }
}

@keyframes prCosmicGlowDrift {
  0% { transform: translate3d(-5%, -3%, 0) scale(.94); opacity: .52; }
  100% { transform: translate3d(14%, 10%, 0) scale(1.12); opacity: .86; }
}

@keyframes prCosmicStarsNear {
  0% { transform: translate3d(-2.2%, .5%, 0) scale(1); opacity: .52; }
  45% { opacity: .78; }
  100% { transform: translate3d(2.5%, -1.8%, 0) scale(1.018); opacity: .64; }
}

@keyframes prCosmicStarsFar {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1.018); }
}

@keyframes prCosmicNodePulse {
  0%, 100% { transform: scale(.82); opacity: .56; }
  50% { transform: scale(1.22); opacity: 1; }
}

@keyframes prCosmicTwinkle {
  0%, 100% { transform: rotate(0deg) scale(.62); opacity: .32; }
  45% { transform: rotate(18deg) scale(1.12); opacity: .96; }
  70% { transform: rotate(25deg) scale(.82); opacity: .58; }
}

@media (max-width: 430px) {
  .pr-cosmic-bg {
    opacity: 1;
  }

  .pr-cosmic-bg::before {
    width: 92vmax;
    right: -43vmax;
    top: 21vh;
    opacity: .78;
  }

  .pr-cosmic-bg::after {
    width: 92vw;
    left: -34vw;
    top: 34vh;
    opacity: .88;
  }

  .pr-cosmic-bg__orbit--one {
    width: 126vmax;
    left: -69vmax;
    top: -37vmax;
  }

  .pr-cosmic-bg__orbit--two {
    width: 98vmax;
    right: -47vmax;
    bottom: -25vmax;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pr-cosmic-bg__orbit,
  .pr-cosmic-bg__stars,
  .pr-cosmic-bg::before,
  .pr-cosmic-bg::after {
    animation: none !important;
  }

  body.page-myday .pr-cosmic-bg {
    opacity: .82;
  }
}