/* ═══════════════════════════════════════════════════════════
   escena.css — el cielo, el sol y las motas de luz.

   El horizonte es el BORDE INFERIOR de la pantalla. No hay línea
   ni suelo: el sol sale y se pone cruzando ese borde, y el propio
   viewport lo recorta. Por eso #campo se desplaza en vertical en
   vez de existir un elemento "horizonte".
   ═══════════════════════════════════════════════════════════ */

#escena{position:fixed;inset:0;overflow:hidden;opacity:0;transition:opacity 2.4s ease}
#escena.vivo{opacity:1}

/* Color plano de borde: si el campo se desplaza mucho, nunca asoma el vacío. */
#fondo{position:absolute;inset:0;background:var(--c5);transition:background var(--fundido) ease}

/* Cielo y sol viajan juntos, para que el resplandor siga al disco. */
#campo{
  position:absolute;inset:0;
  transform:translate(var(--dx),var(--dy));
  transition:transform var(--seguir) cubic-bezier(.25,.6,.3,1);
  will-change:transform;
}

#cielo{
  position:absolute;inset:-80%;
  /* Radio fijo en vmax: el degradado no depende del tamaño del elemento,
     así puede ser enorme (para cubrir el desplazamiento) sin que el sol
     se infle con él. */
  background:radial-gradient(circle 90vmax at 50% 44%,
    var(--c2) 0%, var(--c3) 32%, var(--c4) 62%, var(--c5) 100%);
  transition:background var(--fundido) ease;
}

#motas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.75}

/* ── El sol ─────────────────────────────────────────────── */
#sol{
  position:absolute;left:50%;top:44%;
  width:min(42vmin,400px);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(var(--escala));
  transition:transform var(--resp) cubic-bezier(.37,0,.36,1);
  will-change:transform;
}
#sol>div{position:absolute;inset:0;border-radius:50%}

.halo{
  inset:-130% !important;border-radius:50%;
  background:radial-gradient(circle,
    rgba(var(--g1),.95) 0%,
    rgba(var(--g2),.55) 26%,
    rgba(var(--g3),.22) 46%,
    transparent 66%);
  filter:blur(24px);
}

.rayos{
  inset:-115% !important;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    rgba(var(--g1),.55) 0deg 1.6deg, transparent 1.6deg 9deg);
  -webkit-mask-image:radial-gradient(circle,#000 14%,rgba(0,0,0,.35) 34%,transparent 60%);
          mask-image:radial-gradient(circle,#000 14%,rgba(0,0,0,.35) 34%,transparent 60%);
  animation:girar 140s linear infinite;
  will-change:transform;
}
.rayos.b{
  background:repeating-conic-gradient(from 4deg,
    rgba(var(--g1),.4) 0deg 3deg, transparent 3deg 17deg);
  animation:girar 210s linear infinite reverse;
  opacity:.7;
}
@keyframes girar{to{transform:rotate(360deg)}}

.disco{
  background:radial-gradient(circle,
    var(--c1) 0%, var(--c1) 38%,
    var(--c2) 66%, rgba(var(--g3),.35) 88%, transparent 100%);
  box-shadow:0 0 90px 30px rgba(var(--g2),.75),
             0 0 220px 90px rgba(var(--g3),.4);
  animation:latir 9s ease-in-out infinite;
}
@keyframes latir{0%,100%{filter:brightness(1)}50%{filter:brightness(1.09)}}

@media (prefers-reduced-motion:reduce){
  .rayos,.disco{animation:none}
  #sol,#campo{transition:none}
}