/* ============================================================
   COSMIC BACKGROUND — Dung chung cho ca 3 site:
   - animacare.global (marketing)
   - app.animacare.global (app)
   - ios.animacare.global (IOS portal)
   Nen: Luan xa 4,5,6,7 + sao bang bay cheo ngang
   ============================================================ */

:root {
  --c4: #6366f1;  /* Luan xa 5 - Co hong */
  --c5: #10b981;  /* Luan xa 4 - Tim */
  --c6: #14b8a6;  /* Luan xa 6 - Tran */
  --c7: #8b5cf6;  /* Luan xa 7 - Dinh dau */
  --cosmic-bg: #0a0a20;
}

/* Dark mode: body nen #0a0a20 de dong bo voi cosmic bg */
html.dark body { background: #0a0a20; }

.cosmic-bg-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background: var(--cosmic-bg);
}

.cosmic-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

@keyframes cosmic-chakra4 {
  0%,100% { transform: translate(0,0) scale(1); }
  25% { transform: translate(120px,40px) scale(1.15); }
  50% { transform: translate(200px,-30px) scale(.95); }
  75% { transform: translate(60px,-60px) scale(1.1); }
}
@keyframes cosmic-chakra5 {
  0%,100% { transform: translate(0,0) scale(1); }
  25% { transform: translate(-140px,30px) scale(1.1); }
  50% { transform: translate(-220px,-40px) scale(.92); }
  75% { transform: translate(-80px,50px) scale(1.08); }
}
@keyframes cosmic-chakra6 {
  0%,100% { transform: translate(0,0) scale(1); }
  25% { transform: translate(100px,-50px) scale(1.12); }
  50% { transform: translate(-50px,-120px) scale(.88); }
  75% { transform: translate(-120px,30px) scale(1.05); }
}
@keyframes cosmic-chakra7 {
  0%,100% { transform: translate(0,0) scale(1); }
  25% { transform: translate(-80px,80px) scale(.95); }
  50% { transform: translate(70px,150px) scale(1.18); }
  75% { transform: translate(130px,40px) scale(1.02); }
}

@keyframes cosmic-twinkle {
  0%,100% { opacity: .15; transform: scale(.8); }
  50% { opacity: .9; transform: scale(1.3); }
}

/* Sao bang bay cheo ngang — tu trai qua phai, nghieng nhe 12 do */
@keyframes cosmic-shoot {
  0% { opacity: 0; transform: translate(-200px,0) rotate(12deg); }
  5% { opacity: 1; }
  55% { opacity: 1; }
  95% { opacity: 0; transform: translate(calc(100vw + 200px),120px) rotate(12deg); }
  100% { opacity: 0; }
}

.cosmic-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  animation: cosmic-twinkle 3s ease-in-out infinite;
}

.cosmic-shoot {
  position: absolute;
  width: 120px;
  height: 1.5px;
  animation: cosmic-shoot 7s ease-in-out infinite;
  transform: rotate(12deg);
  border-radius: 2px;
  left: 0;
}

/* Dam bao content nam tren nen */
.cosmic-above { position: relative; z-index: 1; }