/* ══════════════════════════════════════════════
   scene.css — Cielo, pasto, astros, nubes, estrellas
   Ciclo día/noche: .is-dawn | .is-day | .is-dusk | .is-night
   ══════════════════════════════════════════════ */

/* ── Contenedor de escena ── */
#scene { position:fixed; inset:0; z-index:0; display:flex; flex-direction:column }

/* ── Cielo ── */
#sky { flex:1; position:relative; overflow:hidden; transition:background 1.5s }
.is-dawn  #sky { background:linear-gradient(180deg,#FF7B54 0%,#FFD59F 55%,#FFF5D6 100%) }
.is-day   #sky { background:linear-gradient(180deg,#5B9FE0 0%,#A8D4F5 60%,#FFF9E6 100%) }
.is-dusk  #sky { background:linear-gradient(180deg,#C0392B 0%,#E67E22 35%,#F39C12 65%,#FFF5D6 100%) }
.is-night #sky { background:linear-gradient(180deg,#090E1A 0%,#18243A 55%,#2C3E5A 100%) }

/* ── Pasto ── */
#ground-band {
  height:26vh; min-height:100px; position:relative; overflow:visible;
  background:linear-gradient(180deg,#5DBB2A 0%,#3A8A10 60%,#2E6A0A 100%);
  transition:background 1.5s;
}
.is-night #ground-band { background:linear-gradient(180deg,#1E4A10 0%,#0E2A06 100%) }

/* Grass texture bumps on top */
#ground-band::before {
  content:''; position:absolute; top:-4px; left:0; right:0; height:22px;
  background:linear-gradient(180deg,#7AE040 0%,#52B020 60%,#3A8A10 100%);
  border-radius:0 0 55% 55%/0 0 12px 12px;
  z-index:1;
}
.is-night #ground-band::before { background:linear-gradient(180deg,#285A14,#163A08) }

/* ── Garden anchor ──
   Zero-height anchor at the TOP of ground-band (= grass line).
   translateY(-100%) on .flower-wrap makes each flower's BOTTOM touch this line. */
#garden {
  position:absolute;
  top:0; left:0; right:0;
  height:0;
  z-index:10;
  overflow:visible;
  pointer-events:none;
}

/* ── Astro (sol / luna) ── */
#celestial { position:absolute; border-radius:50%; top:10%; right:10%; transition:all 1.5s; z-index:1 }
.is-day  #celestial { width:clamp(44px,8vw,70px);  height:clamp(44px,8vw,70px);  background:radial-gradient(circle,#FFFACD,#FFD700); box-shadow:0 0 40px #FFD70066,0 0 80px #FFD70033 }
.is-dawn #celestial { width:clamp(38px,6vw,55px);  height:clamp(38px,6vw,55px);  background:radial-gradient(circle,#FFCF77,#FF9900); box-shadow:0 0 30px #FF990055; top:20%; right:18% }
.is-dusk #celestial { width:clamp(40px,7vw,60px);  height:clamp(40px,7vw,60px);  background:radial-gradient(circle,#FFCF77,#E8590A); box-shadow:0 0 50px #E8590A66; top:55%; right:6% }
.is-night #celestial { width:clamp(32px,5vw,48px); height:clamp(32px,5vw,48px); background:radial-gradient(circle,#FFFDE7,#E8DCC8); box-shadow:0 0 20px #FFFDE755; top:8%; right:12% }

/* ── Estrellas ── */
#stars { position:absolute; inset:0; opacity:0; transition:opacity 1.5s; z-index:0 }
.is-night #stars { opacity:1 }
.star { position:absolute; background:#fff; border-radius:50%; animation:twinkle 3s infinite alternate }
@keyframes twinkle { from { opacity:.15 } to { opacity:.95 } }

/* ── Nubes ── */
.cloud { position:absolute; background:rgba(255,255,255,.7); border-radius:50px; opacity:.8; animation:drift linear infinite; transition:opacity 1.5s }
.is-night .cloud { opacity:.03 }
@keyframes drift { from { transform:translateX(-220px) } to { transform:translateX(110vw) } }