:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  overflow: hidden;
  font-family: Poppins, system-ui, sans-serif;
  background: linear-gradient(-45deg, #ffc3a0, #ffafbd, #a18cd1, #fbc2eb);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  -webkit-tap-highlight-color: transparent;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.page {
  position: relative;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  min-height: 100svh;
}

#particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
}

.title-wrap {
  position: absolute;
  top: max(72px, env(safe-area-inset-top) + 72px);
  left: 0;
  right: 0;
  z-index: 30;
  text-align: center;
  padding: 0 5rem 10px;
  opacity: 0;
  transform: translateY(-10px);
  animation: textReveal .9s ease-out .35s forwards;
}

h1 {
  margin: 0;
  font-family: 'Great Vibes', cursive;
  font-size: clamp(3.6rem, 10vw, 6.7rem);
  font-weight: 400;
  line-height: .95;
  color: #be185d;
  text-shadow: 0 3px 12px rgba(255,255,255,.55), 0 10px 32px rgba(131,24,67,.28);
}

.replay {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 40;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  color: #831843;
  background: rgba(255,255,255,.38);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  font-size: 1.35rem;
  cursor: pointer;
  touch-action: manipulation;
}

.stage {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: end;
  justify-content: center;
  width: min(118vw, 820px);
  height: min(76dvh, 780px);
  margin-top: 12vh;
  margin-bottom: 0;
}

.bouquet {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 25px 28px rgba(60, 12, 45, .34));
}

.bouquet-rise {
  opacity: 0;
  transform: translateY(10vh);
  animation: riseUp .95s cubic-bezier(.2,.8,.2,1) forwards;
}

.sway {
  transform-origin: 250px 480px;
  animation: swayAnim 9s ease-in-out infinite alternate;
}

.grow-path {
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: growStem 2.25s ease-in-out forwards;
}

.leafy {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: leafFadeScale .85s cubic-bezier(.2,.9,.25,1) forwards;
}

.flower-head {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: bloomInPlace .72s cubic-bezier(.2,.9,.25,1) forwards;
}

.flower-group {
  cursor: pointer;
  transition: filter .25s ease;
}
.flower-group:hover { filter: drop-shadow(0 0 12px rgba(255,255,255,.95)) brightness(1.12); }

.daisy { stroke: rgba(255,255,255,.28); stroke-width: 1; }
.white { fill: #f8fafc; }
.ivory { fill: #f1f5f9; }
.yellow { fill: #fef08a; }
.gold { fill: #fde047; }

.ribbon {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ribbonIn .8s ease-out 2.85s forwards;
}

.wiggle { animation: wiggle 7s ease-in-out infinite alternate; transform-origin: center; }
.wiggle-delayed { animation: wiggle 7.5s ease-in-out infinite alternate-reverse; transform-origin: center; }
.wiggle-fast { animation: wiggle 6.5s ease-in-out infinite alternate; transform-origin: center; }

.delay-1 { animation-delay: .10s; }
.delay-2 { animation-delay: .18s; }
.delay-3 { animation-delay: .26s; }
.delay-4 { animation-delay: .34s; }
.delay-5 { animation-delay: .42s; }
.delay-6 { animation-delay: .72s; }
.delay-7 { animation-delay: .84s; }
.delay-8 { animation-delay: .96s; }
.delay-9 { animation-delay: 1.08s; }
.delay-10 { animation-delay: 1.20s; }
.delay-11 { animation-delay: 1.32s; }
.delay-12 { animation-delay: 1.44s; }
.delay-13 { animation-delay: 1.56s; }

.scene-replay * { animation: none !important; }

@keyframes textReveal { to { opacity: 1; transform: translateY(0); } }
@keyframes riseUp { to { opacity: 1; transform: translateY(0); } }
@keyframes growStem { to { stroke-dashoffset: 0; } }
@keyframes leafFadeScale {
  0% { opacity: 0; scale: .78; }
  100% { opacity: 1; scale: 1; }
}
@keyframes bloomInPlace {
  0% { opacity: 0; scale: .45; }
  72% { opacity: 1; scale: 1.08; }
  100% { opacity: 1; scale: 1; }
}
@keyframes ribbonIn { to { opacity: 1; transform: scale(1); } }
@keyframes swayAnim { 0% { transform: rotate(-0.45deg); } 100% { transform: rotate(0.45deg); } }
@keyframes wiggle { 0% { transform: rotate(-0.8deg); } 100% { transform: rotate(0.8deg); } }

@media (max-width: 560px) {
  body { min-height: 100svh; }

  .page {
    height: 100svh;
    min-height: 100svh;
    place-items: center;
  }

  .title-wrap {
    top: max(34px, env(safe-area-inset-top) + 20px);
    padding-inline: 4.25rem;
  }

  h1 {
    font-size: clamp(3.45rem, 16vw, 5.2rem);
    line-height: .92;
    text-shadow: 0 3px 10px rgba(255,255,255,.58), 0 8px 24px rgba(131,24,67,.24);
  }

  .stage {
    width: min(150vw, 620px);
    height: 73svh;
    margin-top: 10svh;
    margin-bottom: 0;
  }

  .bouquet {
    margin-left: -48vw;
    filter: drop-shadow(0 18px 20px rgba(60, 12, 45, .3));
  }

  .replay {
    top: max(16px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: 42px;
    height: 42px;
    font-size: 1.12rem;
  }
}

@media (max-width: 380px) {
  .title-wrap { padding-inline: 3.8rem; }
  h1 { font-size: clamp(3.1rem, 15vw, 4.6rem); }
  .stage { width: 156vw; height: 71svh; margin-top: 11svh; }
  .bouquet { margin-left: -52vw; }
}

@media (max-height: 700px) and (max-width: 560px) {
  .title-wrap { top: 24px; }
  h1 { font-size: clamp(2.85rem, 13vw, 4.2rem); }
  .stage { height: 70svh; margin-top: 13svh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}