*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }

.hero {
  position: relative;
  width: 100vw; height: 100vh;
  background: radial-gradient(ellipse 90% 70% at 65% 0%,
    #0c1f52 0%, #071228 45%, #010509 100%);
  overflow: hidden;
}

#stars {
  position: absolute; inset: 0;
  width: 100%; height: 100%; z-index: 1;
}

.moon {
  position: absolute;
  top: 8%; right: 11%;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f5faff, #ccdff5 55%, #98b8e0);
  box-shadow:
    0 0 35px 14px rgba(180,210,255,0.25),
    0 0 100px 45px rgba(140,180,255,0.12),
    0 0 220px 90px rgba(100,150,255,0.06);
  z-index: 2;
  animation: moonFloat 10s ease-in-out infinite;
}

@keyframes moonFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

#garden {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  z-index: 3; overflow: visible;
}

/* ── keyframes used by JS via elem.style.animation ── */
@keyframes growUp {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes fadeScale {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes petalPop {
  0%   { opacity: 0; transform: rotate(var(--r)) translateY(0)   scale(0.05); }
  40%  { opacity: 1; }
  80%  { transform: rotate(var(--r)) translateY(var(--ty)) scale(1.06); }
  100% { opacity: 1; transform: rotate(var(--r)) translateY(var(--ty)) scale(1); }
}
@keyframes shimmer {
  0%,100% { opacity: 0.5; }
  50%      { opacity: 0.9; }
}
@keyframes sway {
  0%,100% { transform: rotate(0deg);    }
  35%      { transform: rotate(1.5deg); }
  70%      { transform: rotate(-1.2deg);}
}
@keyframes ffloat {
  0%        { opacity:0; transform:translate(0,0); }
  20%       { opacity:1; }
  50%       { opacity:0.4; transform:translate(var(--dx),var(--dy)); }
  80%       { opacity:1; }
  100%      { opacity:0; transform:translate(0,0); }
}
@keyframes grassBlade {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}