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

html, body {
  height: 100%;
  overflow: hidden;
  background: linear-gradient(to bottom, #74b9e8 0%, #bfe6f5 50%, #8fce5c 50%, #4f9c34 100%);
}

/* --- sun --- */
#sun {
  position: fixed;
  top: 5%; left: 8%;
  width: 90px; height: 90px;
  background: radial-gradient(circle, #fffde0 0%, #ffe95c 55%, rgba(255,233,92,0) 72%);
  border-radius: 50%;
  animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: 0.85; }
}

/* --- clouds --- */
#clouds {
  position: fixed;
  inset: 0 0 50% 0;
  overflow: hidden;
  pointer-events: none;
}

.cloud {
  position: absolute;
  background: #fff;
  border-radius: 50px;
  opacity: 0.85;
  filter: blur(0.5px);
  animation: drift linear infinite;
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}

@keyframes drift {
  from { transform: translateX(-20vw); }
  to   { transform: translateX(120vw); }
}

/* --- field --- */
#field {
  position: relative;
  width: 100%;
  height: 100%;
}

.flower {
  position: absolute;
  bottom: 0;
  width: 34px;
  transform-origin: bottom center;
  animation: sway ease-in-out infinite;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,0.15));
}

.flower.back {
  filter: blur(0.6px) drop-shadow(0 2px 1px rgba(0,0,0,0.1)) brightness(0.9);
}

.stem {
  width: 5px;
  background: linear-gradient(to top, #2e6e1c, #4fa32d);
  margin: 0 auto;
  border-radius: 2px;
  transform-origin: bottom center;
  animation: growStem 0.55s ease-out backwards;
}

.leaf {
  position: absolute;
  width: 16px; height: 8px;
  background: #4fa32d;
  border-radius: 0 100% 0 100%;
}

.bloom {
  position: relative;
  width: 40px;
  height: 56px;
  margin: 0 auto;
  transform-origin: 50% 100%;
  animation: popBloom 0.5s ease-out backwards;
  filter: drop-shadow(0 0 5px rgba(255, 221, 64, 0.45));
}

/* stronger neon halo for the bouquet, on a dark background */
.bloom.glossy {
  filter:
    drop-shadow(0 0 7px rgba(255, 224, 64, 0.95))
    drop-shadow(0 0 16px rgba(255, 200, 40, 0.7))
    drop-shadow(0 0 30px rgba(255, 190, 20, 0.4));
}

/* each tulip is 3 overlapping petals so every petal reads as its own shape */
.petal {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 60%;
  height: 92%;
  border-radius: 50% 50% 45% 45% / 68% 68% 18% 18%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: inset -4px -6px 6px rgba(0, 0, 0, 0.2), inset 3px 4px 5px rgba(255, 255, 255, 0.55);
}
.petal.center { transform: translateX(-50%); z-index: 3; }
.petal.left   { transform: translateX(-50%) rotate(-26deg) scale(0.92); z-index: 1; }
.petal.right  { transform: translateX(-50%) rotate(26deg) scale(0.92); z-index: 2; }

.petal.yellow { background: linear-gradient(180deg, #fff2a0 0%, #ffd500 55%, #f4a400 100%); }
.petal.pink   { background: linear-gradient(180deg, #ffcbe8 0%, #ff6fb0 55%, #e0388a 100%); }
.petal.red    { background: linear-gradient(180deg, #ffb3a3 0%, #ff3b30 55%, #c41c1c 100%); }
.petal.purple { background: linear-gradient(180deg, #e8cfff 0%, #a259e6 55%, #6b1fb0 100%); }
.petal.white  { background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 55%, #d9d9d9 100%); }
.petal.orange { background: linear-gradient(180deg, #ffdfae 0%, #ff9a3c 55%, #e6660c 100%); }

@keyframes growStem {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes popBloom {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- grass --- */
.blade {
  position: absolute;
  bottom: -2px;
  width: 4px;
  background: linear-gradient(to top, #2f7a1e, #5cb136);
  border-radius: 40% 40% 0 0;
  transform-origin: bottom center;
  animation: sway ease-in-out infinite;
}

@keyframes sway {
  0%, 100% { transform: translateX(-50%) rotate(calc(var(--base-rot, 0deg) - var(--sway, 6deg))) scale(var(--s, 1)); }
  50% { transform: translateX(-50%) rotate(calc(var(--base-rot, 0deg) + var(--sway, 6deg))) scale(var(--s, 1)); }
}

/* --- butterflies --- */
#butterflies {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.butterfly {
  position: absolute;
  width: 16px; height: 14px;
  animation: fly linear infinite;
}
.butterfly .wing {
  position: absolute;
  width: 8px; height: 12px;
  top: 0;
  background: #fff2a8;
  border: 1px solid #e0a800;
  border-radius: 60% 60% 60% 0;
  animation: flap 0.3s ease-in-out infinite alternate;
}
.butterfly .wing.left { left: 0; transform-origin: right center; }
.butterfly .wing.right { right: 0; transform: scaleX(-1); transform-origin: right center; }

@keyframes flap {
  from { transform: scaleX(1) rotateY(0deg); }
  to   { transform: scaleX(0.4) rotateY(40deg); }
}
.butterfly .wing.right { animation-name: flapR; }
@keyframes flapR {
  from { transform: scaleX(-1) rotateY(0deg); }
  to   { transform: scaleX(-0.4) rotateY(40deg); }
}

@keyframes fly {
  0%   { transform: translate(-10vw, 40vh) rotate(0deg); }
  25%  { transform: translate(30vw, 20vh) rotate(8deg); }
  50%  { transform: translate(60vw, 45vh) rotate(-6deg); }
  75%  { transform: translate(85vw, 15vh) rotate(6deg); }
  100% { transform: translate(110vw, 35vh) rotate(0deg); }
}

/* --- gift button --- */
#giftBtn {
  position: fixed;
  left: 50%; bottom: 32px;
  transform: translateX(-50%);
  z-index: 500;
  padding: 18px 40px;
  font: 600 22px system-ui, sans-serif;
  color: #6b3f00;
  background: linear-gradient(180deg, #fff2b0, #ffd54f);
  border: none;
  border-radius: 40px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: transform 0.2s ease;
}
#giftBtn:hover { transform: translateX(-50%) scale(1.06); }

/* --- bouquet overlay --- */
#bouquetOverlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 42%, #123018 0%, #061a0c 55%, #020c06 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
#bouquetOverlay.open {
  opacity: 1;
  pointer-events: auto;
}

#closeBouquet {
  position: absolute;
  top: 20px; right: 24px;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
#closeBouquet:hover { background: rgba(255,255,255,0.3); }

#fireflies {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.firefly {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #ffe066;
  box-shadow: 0 0 6px 2px rgba(255,224,102,0.8);
  animation: twinkle ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: translateY(0) scale(0.8); }
  50%      { opacity: 1; transform: translateY(-10px) scale(1.2); }
}

#bouquet {
  position: relative;
  width: min(90vw, 460px);
  height: 60vh;
}

.ribbon {
  position: absolute;
  left: 50%; bottom: 34px;
  transform: translateX(-50%);
  width: 60px; height: 40px;
  z-index: 900;
}
.ribbon .knot {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  background: #d81b60;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 3px;
}
.ribbon .loop {
  position: absolute;
  top: 50%;
  width: 34px; height: 26px;
  background: #e91e8c;
  border-radius: 50% 50% 50% 0;
}
.ribbon .loop.left  { left: 2px; transform: translateY(-50%) rotate(-25deg); }
.ribbon .loop.right { right: 2px; transform: translateY(-50%) scaleX(-1) rotate(-25deg); }

#bouquetCaption {
  margin-top: 28px;
  font: italic 500 28px Georgia, serif;
  color: #ffe9a8;
  text-shadow: 0 0 14px rgba(255,224,102,0.6);
}