/* ── Cosmic Background — Depth layers, parallax, constellation loading ── */

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

/* ── Distant star field (back layer) ─────────────── */
.cosmic-stars {
  position: absolute;
  inset: 0;
}

.cosmic-star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: starTwinkle ease-in-out infinite alternate;
}

@keyframes starTwinkle {
  0% { opacity: 0.15; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1.3); }
}

/* ── Mid-layer aurora blobs (DL v2 §3) ───────────── */
.cosmic-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(95px);
  animation: blobDrift linear infinite alternate;
  will-change: transform, opacity;
}

/* Ambient motion is decorative — freeze it when the user asks (DL v2 §3/§7). */
@media (prefers-reduced-motion: reduce) {
  .cosmic-blob,
  .cosmic-star,
  .cosmic-planet { animation: none !important; }
}

@keyframes blobDrift {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); }
  20% { transform: translate(30px, -40px) scale(1.08) rotate(5deg); }
  40% { transform: translate(-20px, 20px) scale(0.95) rotate(-3deg); }
  60% { transform: translate(40px, 30px) scale(1.05) rotate(8deg); }
  80% { transform: translate(-30px, -20px) scale(0.98) rotate(-5deg); }
  100% { transform: translate(10px, -10px) scale(1.02) rotate(2deg); }
}

/* ── Foreground floating planets ─────────────────── */
.cosmic-planet {
  position: absolute;
  border-radius: 50%;
  animation: planetFloat linear infinite;
  will-change: transform;
}

@keyframes planetFloat {
  0% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(15px, -25px) scale(1.05); }
  50% { transform: translate(-10px, -40px) scale(0.95); }
  75% { transform: translate(25px, -15px) scale(1.02); }
  100% { transform: translate(0, 0) scale(1); }
}

/* ── Parallax scroll effect ──────────────────────── */
.cosmic-layer-far { transform: translateZ(-2px) scale(3); }
.cosmic-layer-mid { transform: translateZ(-1px) scale(2); }
.cosmic-layer-near { transform: translateZ(0); }

/* ── Constellation loading animation ─────────────── */
.constellation-loader {
  width: 60px;
  height: 60px;
  position: relative;
  margin: 0 auto;
}

.constellation-loader .star-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255,212,112,0.5);
}

.constellation-loader .star-dot:nth-child(1) { left: 10px; top: 10px; animation: constellPulse 1.5s 0s infinite; }
.constellation-loader .star-dot:nth-child(2) { right: 10px; top: 5px; animation: constellPulse 1.5s 0.2s infinite; }
.constellation-loader .star-dot:nth-child(3) { left: 50%; top: 25px; animation: constellPulse 1.5s 0.4s infinite; }
.constellation-loader .star-dot:nth-child(4) { left: 5px; bottom: 15px; animation: constellPulse 1.5s 0.6s infinite; }
.constellation-loader .star-dot:nth-child(5) { right: 15px; bottom: 10px; animation: constellPulse 1.5s 0.8s infinite; }

.constellation-loader .star-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,212,112,0.3), transparent);
  transform-origin: left center;
  animation: lineReveal 1.5s ease-in-out infinite;
}

@keyframes constellPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.5); }
}

@keyframes lineReveal {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

/* ── Nujum star logo pulse (chat typing) ─────────── */
.nujum-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
}

.nujum-typing-star {
  font-size: 1.2rem;
  color: var(--gold);
  animation: starTyping 1.2s ease-in-out infinite;
}

@keyframes starTyping {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.nujum-typing-dots {
  display: flex;
  gap: 3px;
}

.nujum-typing-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  animation: dotBounce 1.4s infinite;
}
.nujum-typing-dots span:nth-child(2) { animation-delay: 0.16s; }
.nujum-typing-dots span:nth-child(3) { animation-delay: 0.32s; }

@keyframes dotBounce {
  0%, 80%, 100% { opacity: 0.2; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-4px); }
}

/* ── View transitions ────────────────────────────── */
.view {
  animation: viewFadeIn 0.3s ease-out;
}

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Moon phase icon ─────────────────────────────── */
.moon-phase-icon {
  display: inline-block;
  font-size: 2.5rem;
  filter: drop-shadow(0 0 12px rgba(255,212,112,0.4));
}