:root {
  --pink-soft: #ffc0cb;
  --peach-warm: #ffd1b3;
  --rose-deep: #b1124a;
  --rose-glow: rgba(255, 105, 160, 0.55);
  --glass-bg: rgba(255, 255, 255, 0.26);
  --glass-border: rgba(255, 255, 255, 0.7);
  --text-main: #4b1f2b;
  --text-accent: #d84c7f;
}

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

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
  color: var(--text-main);
  background: #000;
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  /* Daytime Romance Theme: Soft Morning Light */
  background: linear-gradient(to bottom, #fff0f3 0%, #ffe6e9 40%, #ffd1dc 100%);
  overflow: hidden;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Warm sunlight blooms */
  background: 
    radial-gradient(circle at 80% 20%, rgba(255, 230, 200, 0.4), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(255, 200, 220, 0.3), transparent 50%);
  filter: blur(60px);
  animation: sunlightShift 20s ease-in-out infinite alternate;
  z-index: 0;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Subtle paper texture for elegance */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: multiply;
}

@keyframes sunlightShift {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.1); opacity: 1; }
}

.petal-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.petal {
  position: absolute;
  width: 16px;
  height: 22px;
  background: linear-gradient(135deg, #ffd1dc, #ffc0cb);
  border-radius: 0 70% 40% 70%;
  opacity: 0.85;
  box-shadow: 0 0 10px rgba(255, 190, 210, 0.55);
  animation: petalFall 12s linear infinite, petalSway 4s ease-in-out infinite;
}

.petal:nth-child(odd) {
  filter: blur(0.4px);
}

@keyframes petalFall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: translateY(110vh) rotate(240deg); opacity: 0; }
}

@keyframes petalSway {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(60px) rotate(120deg); }
}

.petal:nth-child(1) { left: 8%; animation-duration: 11s, 4s; animation-delay: 0s; }
.petal:nth-child(2) { left: 18%; animation-duration: 13s, 5s; animation-delay: 2s; }
.petal:nth-child(3) { left: 30%; animation-duration: 12s, 4.5s; animation-delay: 4s; }
.petal:nth-child(4) { left: 42%; animation-duration: 14s, 5.2s; animation-delay: 1s; }
.petal:nth-child(5) { left: 55%; animation-duration: 10s, 4s; animation-delay: 3s; }
.petal:nth-child(6) { left: 68%; animation-duration: 12s, 4.2s; animation-delay: 1.5s; }
.petal:nth-child(7) { left: 78%; animation-duration: 13s, 5s; animation-delay: 4.5s; }
.petal:nth-child(8) { left: 88%; animation-duration: 11s, 3.8s; animation-delay: 2.5s; }
.petal:nth-child(9) { left: 95%; animation-duration: 15s, 5.5s; animation-delay: 0.8s; }
.petal:nth-child(10) { left: 12%; animation-duration: 12s, 4.8s; animation-delay: 6s; }
.petal:nth-child(11) { left: 36%; animation-duration: 13.5s, 5s; animation-delay: 5s; }
.petal:nth-child(12) { left: 64%; animation-duration: 11.5s, 4.6s; animation-delay: 3.5s; }

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.particle-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.heart-particle {
  position: absolute;
  width: 42px; /* Increased from 24px to compensate for transparent padding in png */
  height: auto;
  transform: none;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 12px rgba(255, 20, 100, 0.4));
}

.core-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 240, 250, 0.9) 0%, rgba(255, 105, 160, 0.45) 40%, rgba(255, 105, 160, 0) 70%);
  filter: blur(2px);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}

.central-heart {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(200px, 45vw, 500px);
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 0 24px rgba(255, 80, 130, 0.6));
  mix-blend-mode: screen;
  image-rendering: -webkit-optimize-contrast;
  will-change: transform, opacity;
}

.flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  z-index: 6;
  pointer-events: none;
}

.bouquet-container {
  position: absolute;
  left: 50%;
  top: 0%;
  transform: translate(-50%, -85%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(800px, 98vw);
  height: min(800px, 98vw);
  opacity: 0;
  z-index: 7;
  filter: drop-shadow(0 0 30px rgba(255, 60, 120, 0.6));
}

.single-flower {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 15px rgba(255, 80, 130, 0.6));
  image-rendering: -webkit-optimize-contrast;
  transform: translateZ(0);
  will-change: transform, opacity;
}

.dialogue-box {
  position: absolute;
  left: 50%;
  bottom: 6vh;
  transform: translateX(-50%);
  width: min(820px, 92vw);
  padding: 26px 30px;
  background: var(--glass-bg);
  border: 2px double rgba(255, 255, 255, 0.75);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2), inset 0 0 18px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: clamp(16px, 2.5vw, 20px);
  line-height: 1.7;
  color: #3f1d28;
  opacity: 0;
  z-index: 8;
  text-align: center;
}

.dialogue-title {
  font-size: clamp(18px, 2.6vw, 22px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: 8px;
  text-align: center;
}

.dialogue-text {
  white-space: pre-wrap;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .scene {
    animation: none;
  }
  .petal {
    animation: none;
    opacity: 0.4;
  }
}

/* Large Desktop */
@media (min-width: 1400px) {
  .dialogue-box {
    max-width: 700px;
    padding: 32px 40px;
    bottom: 8vh;
  }
  .dialogue-title {
    font-size: clamp(20px, 1.5vw, 26px);
  }
}