/* Amelia's scene: unicorn + gnomes + two rainbows in a grassy field */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow: hidden;
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(#05010f 0%, #0d0730 55%, #1a1240 55%, #1a1240 100%);
}

.sun {
  position: absolute;
  top: 6vh;
  right: 8vw;
  width: 13vh;
  height: 13vh;
  border-radius: 50%;
  background: radial-gradient(circle, #fff3a0 0%, #ffd93b 70%);
  box-shadow: 0 0 60px 20px rgba(255, 217, 59, 0.6);
}

/* Earth hanging in the space sky */
.earth {
  position: absolute;
  top: 5vh;
  left: 6vw;
  font-size: 16vh;
  filter: drop-shadow(0 0 22px #4aa8ff);
  animation: earthspin 14s linear infinite;
}
@keyframes earthspin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Rainbows arc across the sky */
.rainbow {
  position: absolute;
  width: 42vw;
  height: 21vw;
}
.rainbow-1 { top: 8vh;  left: 4vw; }
.rainbow-2 { top: 4vh;  left: 50vw; }

/* Grass strip */
.grass {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 42vh;
  background: linear-gradient(#7ed957 0%, #4caf2f 100%);
  border-top: 6px solid #6cc24a;
}

/* A little raised grassy ridge along the top of the field */
.moongrass {
  position: absolute;
  bottom: 42vh;
  left: 0;
  width: 100%;
  height: 3vh;
  z-index: 1;
  background:
    repeating-linear-gradient(90deg, #6cc24a 0 1.1vw, #7ed957 1.1vw 2.2vw),
    linear-gradient(#8be36a 0%, #4caf2f 100%);
  border-radius: 40% 30% 0 0 / 3vh 3vh 0 0;
}

/* The moon, now a big cratered ball up in the space sky */
.moon {
  position: absolute;
  top: 7vh;
  left: 43vw;
  width: 18vh;
  height: 18vh;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 40%, #a3a3ad 0 2.4vh, transparent 2.6vh),
    radial-gradient(circle at 66% 60%, #a3a3ad 0 3vh,  transparent 3.2vh),
    radial-gradient(circle at 58% 25%, #a3a3ad 0 1.6vh, transparent 1.8vh),
    radial-gradient(circle at 30% 28%, #f2f2f5, #b9b9c2 78%);
  box-shadow: 0 0 30px 8px rgba(220, 220, 245, 0.5);
}
.flowers span {
  position: absolute;
  z-index: 1;
}
.minis span {
  position: absolute;
  z-index: 1;
}
.stars i {
  position: absolute;
  width: var(--s);
  height: var(--s);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
                     50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Disco balls on strings */
.disco {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: top center;
  animation: sway 3s ease-in-out infinite;
}
.disco .string {
  width: 2px;
  height: 7vh;
  background: #9aa3ad;
}
.disco .ball {
  width: 8vh;
  height: 8vh;
  border-radius: 50%;
  background-color: #b9c6d8;
  background-image:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.95), rgba(255,255,255,0) 45%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.4) 0 3px, transparent 3px 6px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.18) 0 3px, transparent 3px 6px);
  box-shadow: 0 0 20px 5px rgba(180, 200, 255, 0.65);
  animation: shimmer 2.4s linear infinite;
}
@keyframes sway {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}
@keyframes shimmer {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ===== CRAZY MODE — everything moves! ===== */
.scene { animation: crazyhue 12s linear infinite; }
@keyframes crazyhue {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.sun { animation: sunspin 5s linear infinite; }
@keyframes sunspin {
  0%   { transform: rotate(0deg)   scale(1); }
  50%  { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}

.stars i { animation: twinkle 1.1s ease-in-out infinite alternate; }
.stars i:nth-child(3n)   { animation-delay: -0.4s; }
.stars i:nth-child(3n+1) { animation-delay: -0.8s; }
@keyframes twinkle {
  0%   { transform: scale(0.6) rotate(0deg); opacity: 0.7; }
  100% { transform: scale(1.35) rotate(90deg); opacity: 1; }
}

.flowers span {
  animation: grow 3s ease-in-out infinite alternate,
             glow 1.5s ease-in-out infinite alternate;
  transform-origin: bottom center;
}
@keyframes glow {
  0%   { filter: drop-shadow(0 0 3px #ffffffcc) drop-shadow(0 0 7px #ff9ff3); }
  100% { filter: drop-shadow(0 0 12px #ffffff) drop-shadow(0 0 24px #ff5ea8); }
}
.flowers span:nth-child(even) { animation-duration: 3.8s; animation-delay: -1s; }
.flowers span:nth-child(3n)   { animation-delay: -2s; }
@keyframes grow {
  0%   { transform: scale(0.2)  rotate(-6deg); }
  100% { transform: scale(1.25) rotate(6deg); }
}

.minis span { animation: hop 0.7s ease-in-out infinite; }
.minis span:nth-child(odd) { animation-delay: -0.35s; }
@keyframes hop {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3vh); }
}

.rainbow { animation: rainbowbob 1.6s ease-in-out infinite; }
.rainbow-2 { animation-delay: -0.8s; }
@keyframes rainbowbob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3vh) scale(1.04); }
}

/* unicorn gallops faster in crazy mode */
.unicorn { animation-duration: 3.2s; }

/* Talking speech bubbles */
.bubble {
  position: absolute;
  z-index: 5;
  width: 26vh;
  height: 6vh;
}
.bubble-uni { left: 50%; transform: translateX(-50%); bottom: 60vh; }
.bubble-gl  { left: 6vw;  bottom: 56vh; }
.bubble-gr  { right: 6vw; bottom: 56vh; }
.bubble span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #333;
  font-family: system-ui, sans-serif;
  font-weight: bold;
  font-size: 2.5vh;
  border-radius: 1.6vh;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  opacity: 0;
  animation: say 5.4s infinite;
}
.bubble span::after {
  content: "";
  position: absolute;
  bottom: -1.4vh;
  left: 50%;
  transform: translateX(-50%);
  border: 0.9vh solid transparent;
  border-top-color: #ffffff;
}
.bubble span:nth-child(2) { animation-delay: -1.8s; }
.bubble span:nth-child(3) { animation-delay: -3.6s; }
@keyframes say {
  0%   { opacity: 0; transform: scale(0.6); }
  4%   { opacity: 1; transform: scale(1); }
  28%  { opacity: 1; transform: scale(1); }
  33%  { opacity: 0; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(0.6); }
}

/* Music button */
.music-btn {
  position: fixed;
  bottom: 3vh;
  right: 3vw;
  z-index: 10;
  font-size: 3vh;
  padding: 1.4vh 2.4vw;
  border: none;
  border-radius: 999px;
  background: #ff5ea8;
  color: #fff;
  font-family: system-ui, sans-serif;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.music-btn.playing { background: #6a4c93; }
.music-btn:hover { filter: brightness(1.08); }

/* Unicorn galloping back and forth across the field */
.unicorn {
  position: absolute;
  bottom: 31vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 26vh;
  z-index: 3;
}
.u-inner {
  display: inline-block;
  transform-origin: bottom center;
  animation: udance 0.8s ease-in-out infinite;
}
@keyframes udance {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  25%      { transform: rotate(0deg)  translateY(-3vh); }
  50%      { transform: rotate(8deg)  translateY(0); }
  75%      { transform: rotate(0deg)  translateY(-3vh); }
}
@keyframes gallop {
  0%   { transform: translateX(5vw)  scaleX(-1); }  /* left edge, facing right */
  48%  { transform: translateX(66vw) scaleX(-1); }  /* run to right edge */
  50%  { transform: translateX(66vw) scaleX(1);  }  /* turn around */
  98%  { transform: translateX(5vw)  scaleX(1);  }  /* run back to left */
  100% { transform: translateX(5vw)  scaleX(-1); }  /* turn around */
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4vh); }
}

/* Gnomes standing in the grass on either side of the unicorn */
.gnome {
  position: absolute;
  bottom: 30vh;
  width: 16vh;
  height: 24vh;
  z-index: 2;
}
.gnome-left  { left: 20vw; animation: dance 0.9s ease-in-out infinite; }
.gnome-right { right: 20vw; animation: dance 0.9s ease-in-out infinite; animation-delay: -0.45s; }
.gnome { transform-origin: bottom center; }
@keyframes dance {
  0%, 100% { transform: rotate(-9deg) translateY(0); }
  25%      { transform: rotate(0deg)  translateY(-2.5vh); }
  50%      { transform: rotate(9deg)  translateY(0); }
  75%      { transform: rotate(0deg)  translateY(-2.5vh); }
}