:root {
  --cpa-cosmos-dashboard-opacity: .18;
}

[data-theme="dark"] {
  --cpa-cosmos-dashboard-opacity: .64;
}

body.cpa-cosmos-ready {
  isolation: isolate;
}

#cpa-cosmos {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
  background: #070918;
}

#cpa-cosmos .cpa-cosmos__nebula {
  position: absolute;
  inset: -6%;
  background:
    radial-gradient(ellipse at 20% 26%, #663b974f, transparent 38%),
    radial-gradient(ellipse at 57% 48%, #33448a38, transparent 48%),
    radial-gradient(ellipse at 78% 85%, #9b693b29, transparent 32%),
    radial-gradient(ellipse at 36% 72%, #7336902e, transparent 38%);
  animation: cpa-cosmos-drift 42s ease-in-out infinite alternate;
}

#cpa-cosmos .cpa-cosmos__scene {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#cpa-cosmos .cpa-cosmos__stars {
  animation: cpa-cosmos-twinkle 8s ease-in-out infinite alternate;
}

#cpa-cosmos .cpa-cosmos__stars--second {
  animation-delay: -5s;
  animation-duration: 11s;
}

#cpa-cosmos .cpa-cosmos__stars--distant {
  animation-delay: -3s;
  animation-duration: 15s;
}

#cpa-cosmos .cpa-cosmos__orbit {
  transform-origin: 0 0;
  animation: cpa-cosmos-orbit 100s linear infinite;
}

#cpa-cosmos .cpa-cosmos__orbit--outer {
  animation-duration: 160s;
  animation-direction: reverse;
}

#cpa-cosmos .cpa-cosmos__planet {
  animation: cpa-cosmos-float 28s ease-in-out infinite alternate;
}

#cpa-cosmos .cpa-cosmos__planet--small {
  animation-duration: 34s;
  animation-delay: -14s;
}

#cpa-cosmos .cpa-cosmos__surface {
  transform-origin: 0 0;
  animation: cpa-cosmos-orbit 140s linear infinite;
}

#cpa-cosmos .cpa-cosmos__surface--small {
  animation-duration: 190s;
  animation-direction: reverse;
}

#cpa-cosmos .cpa-cosmos__comet {
  opacity: 0;
  animation: cpa-cosmos-comet 24s linear infinite;
}

body.cpa-cosmos-ready :is(.app-shell, [class*="LoginPage-module__container___"]) {
  background: transparent;
}

body.cpa-cosmos-ready [class*="LoginPage-module__brandPanel___"] {
  background: linear-gradient(135deg, #080d201c, #11143112);
}

body.cpa-cosmos-ready [class*="LoginPage-module__brandWord___"] {
  text-shadow: 0 2px 28px #05071380;
}

body.cpa-cosmos-ready [class*="LoginPage-module__loginCard___"] {
  background: var(--bg-primary);
  background: color-mix(in srgb, var(--bg-primary) 97%, transparent);
  border: 1px solid var(--border-color);
}

body.cpa-cosmos-ready:has(.app-shell) #cpa-cosmos {
  opacity: var(--cpa-cosmos-dashboard-opacity);
}

#cpa-cosmos[data-paused="true"] *,
#cpa-cosmos[data-quiet="true"] * {
  animation-play-state: paused !important;
}

@keyframes cpa-cosmos-drift {
  from { transform: translate(-1%, 1%) scale(1); }
  to { transform: translate(1%, -1%) scale(1.04); }
}

@keyframes cpa-cosmos-twinkle {
  from { opacity: .38; }
  to { opacity: .92; }
}

@keyframes cpa-cosmos-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes cpa-cosmos-float {
  from { transform: translateY(-7px); }
  to { transform: translateY(9px); }
}

@keyframes cpa-cosmos-comet {
  0%, 79% { opacity: 0; transform: translate(0, 0); }
  81% { opacity: .58; }
  88% { opacity: 0; transform: translate(-230px, 110px); }
  100% { opacity: 0; transform: translate(-230px, 110px); }
}

@media (max-width: 767px) {
  #cpa-cosmos .cpa-cosmos__stars--distant,
  #cpa-cosmos .cpa-cosmos__comet {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #cpa-cosmos * {
    animation: none !important;
  }
}

@media print {
  #cpa-cosmos {
    display: none;
  }
}