/* ==========================================================================
   Cielo — fondo permanente (js/sky.js inyecta el contenido en #sky-root)
   Capas internas (de atrás hacia adelante):
   .sky-bg     degradado nocturno + nebulosa tinta + calor dorado de horizonte (estático)
   .sky-field  canvas estático: polvo estelar + vía láctea (se mueve solo con transform)
   .sky-veil   velo oscuro del modo intro (solo opacidad)
   .sky-stars  canvas animado: estrellas en 3 profundidades, fugaces, polvo bokeh
   .sky-moon   luna creciente SVG en la esquina superior
   .sky-fx     (fuera de la raíz, en <body>) canvas de chispas para XV.sky.burst()
   ========================================================================== */

#sky-root {
  overflow: hidden;
  contain: strict;
  background: var(--night-950);
}

.sky-bg,
.sky-veil {
  position: absolute;
  inset: 0;
}

.sky-bg {
  background:
    /* calor dorado muy leve en el horizonte inferior */
    radial-gradient(120% 42% at 50% 108%, rgba(201, 161, 74, .17) 0%, rgba(122, 91, 28, .07) 42%, transparent 72%),
    /* nebulosa azul tinta */
    radial-gradient(75% 45% at 12% 22%, rgba(34, 43, 99, .38) 0%, transparent 70%),
    radial-gradient(65% 40% at 92% 62%, rgba(22, 29, 71, .55) 0%, transparent 72%),
    radial-gradient(90% 30% at 50% 88%, rgba(22, 29, 71, .45) 0%, transparent 70%),
    linear-gradient(180deg, var(--night-950) 0%, var(--night-900) 48%, var(--night-800) 100%);
}

.sky-field,
.sky-stars,
.sky-fx { max-width: none; max-height: none; } /* base.css limita canvas a 100%: el campo es más ancho que el viewport */

.sky-field,
.sky-stars {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out);
}

.sky-field { will-change: transform; } /* se desplaza en cada frame: capa propia justificada */

#sky-root.is-ready .sky-field,
#sky-root.is-ready .sky-stars { opacity: 1; }

/* Modo intro: cielo más quieto y oscuro */
.sky-veil {
  background: var(--night-950);
  opacity: .52;
  transition: opacity 2.4s var(--ease-in-out);
}
#sky-root.is-invitation .sky-veil { opacity: 0; }

/* ---------- Polvo dorado bokeh (posición/opacidad desde JS) ---------- */
.sky-dust {
  position: absolute;
  inset: 0;
}
.sky-dust__mote {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
  /* disco desenfocado: centro plano, borde apenas más brillante; la opacidad final la pone JS (≤ .13) */
  background: radial-gradient(closest-side,
    rgba(243, 220, 154, .07) 0%,
    rgba(243, 220, 154, .06) 62%,
    rgba(243, 220, 154, .08) 80%,
    rgba(243, 220, 154, .03) 90%,
    transparent 100%);
}
.sky-dust__mote--light {
  background: radial-gradient(closest-side,
    rgba(251, 239, 200, .07) 0%,
    rgba(251, 239, 200, .06) 62%,
    rgba(251, 239, 200, .08) 80%,
    rgba(251, 239, 200, .03) 90%,
    transparent 100%);
}

/* ---------- Luna creciente ---------- */
.sky-moon {
  --sky-moon-size: clamp(56px, 15vw, 104px);
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + clamp(18px, 4.5vh, 48px));
  left: clamp(14px, 6vw, 72px); /* izquierda: la esquina derecha la ocupa el botón de música */
  width: var(--sky-moon-size);
  height: var(--sky-moon-size);
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(.94);
  transition: opacity 2s var(--ease-out), transform 2.6s var(--ease-out);
}

body.is-open .sky-moon,
#sky-root.is-moon .sky-moon {
  opacity: .9;
  transform: none;
}

.sky-moon__halo {
  position: absolute;
  /* centrado sobre el lado iluminado del creciente */
  left: -95%;
  top: -105%;
  width: 300%;
  height: 300%;
  border-radius: 50%;
  background: radial-gradient(circle at 54% 52%,
    rgba(243, 220, 154, .22) 0%,
    rgba(230, 195, 111, .09) 22%,
    rgba(230, 195, 111, .03) 38%,
    transparent 60%);
  animation: sky-halo 9s var(--ease-in-out) infinite alternate;
}

.sky-moon__svg {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sky-moon__spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: sky-spark 4.8s var(--ease-in-out) infinite;
}
.sky-moon__spark--b { animation-duration: 6.4s; animation-delay: -2.1s; }

@keyframes sky-halo {
  from { opacity: .62; }
  to   { opacity: 1; }
}

@keyframes sky-spark {
  0%, 100% { opacity: .35; transform: scale(.7); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* ---------- Chispas (burst) por encima de la intro, debajo de música/modales ---------- */
.sky-fx {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--z-intro) + 5);
  pointer-events: none;
  visibility: hidden; /* JS la hace visible solo durante un burst */
}

/* ---------- Panel de medición (solo con ?skydebug) ---------- */
.sky-hud {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 6px 8px;
  font: 11px/1.4 ui-monospace, monospace;
  color: var(--gold-200);
  background: rgba(4, 5, 11, .72);
  border: 1px solid var(--line);
  border-radius: 6px;
  white-space: pre;
}

@media (prefers-reduced-motion: reduce) {
  .sky-moon { transition: opacity 1.2s linear; transform: none; }
  .sky-moon__halo,
  .sky-moon__spark { animation: none; }
}