:root {
  --yellow: #ffd84d;
  --yellow-deep: #f0b919;
  --gold: #d99700;
  --green: #3d8a48;
  --green-dark: #1f5d35;
  --sky-top: #8ed9ff;
  --sky-bottom: #fff0a8;
  --cream: #fff9de;
  --ink: #4b3c2a;
  --pink: #ef8fa9;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: #fff5bd;
  font-family: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink);
}

button {
  font: inherit;
}

.experience {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.intro,
.scene {
  position: absolute;
  inset: 0;
}

.intro {
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.92) 0 7%, transparent 8%),
    radial-gradient(circle at 78% 15%, rgba(255, 241, 118, 0.72) 0 12%, transparent 13%),
    linear-gradient(155deg, #fff8cf 0%, #ffe66d 52%, #f3ba20 100%);
  z-index: 20;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.intro::before,
.intro::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5);
  animation: drift 7s ease-in-out infinite;
}

.intro::before {
  top: -60px;
  left: -45px;
}

.intro::after {
  right: -70px;
  bottom: -60px;
  animation-delay: -2s;
}

.intro.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro__glow {
  position: absolute;
  width: min(92vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.75), transparent 66%);
  filter: blur(12px);
  animation: pulseGlow 3s ease-in-out infinite;
}

.intro__card {
  position: relative;
  width: min(100%, 390px);
  padding: 34px 26px 28px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 32px;
  text-align: center;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(16px);
  box-shadow: 0 28px 70px rgba(117, 75, 0, 0.2), inset 0 1px 0 rgba(255,255,255,.8);
  animation: cardIn 1s cubic-bezier(.2,.8,.2,1) both;
}

.mini-flower {
  display: inline-grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin-bottom: 8px;
  font-size: 44px;
  filter: drop-shadow(0 10px 10px rgba(140, 94, 0, 0.18));
  animation: flowerHello 2.8s ease-in-out infinite;
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #966b00;
}

.intro h1 {
  margin: 0;
  font-size: clamp(34px, 10vw, 54px);
  line-height: .98;
  letter-spacing: -0.045em;
}

.intro__text {
  margin: 18px auto 24px;
  max-width: 290px;
  font-size: 16px;
  line-height: 1.5;
  color: #6f5834;
}

.gift-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 15px 22px;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  color: #fff;
  font-weight: 900;
  font-size: 17px;
  background: linear-gradient(135deg, #efad00, #f58a1f 55%, #ed6e6e);
  box-shadow: 0 16px 30px rgba(206, 111, 11, .34), inset 0 1px 0 rgba(255,255,255,.45);
  cursor: pointer;
  transform: translateZ(0);
  animation: buttonBeat 2.2s ease-in-out infinite;
}

.gift-button:active {
  transform: scale(.97);
}

.gift-button__icon {
  font-size: 22px;
}

.gift-button__shine {
  position: absolute;
  inset: -20% auto -20% -35%;
  width: 25%;
  transform: skewX(-20deg);
  background: rgba(255,255,255,.45);
  animation: shine 2.6s ease-in-out infinite;
}

.intro__hint {
  margin: 14px 0 0;
  font-size: 12px;
  color: rgba(75, 60, 42, .7);
}

.scene {
  visibility: hidden;
  opacity: 0;
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom) 68%, #bce17a 69%, #62a84e 100%);
  transition: opacity 1s ease;
}

.scene.is-active {
  visibility: visible;
  opacity: 1;
}

.sky {
  position: absolute;
  inset: 0 0 30%;
  overflow: hidden;
}

.sun {
  position: absolute;
  top: 7%;
  right: 8%;
  width: clamp(76px, 22vw, 130px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffbd0 0 18%, #ffe264 46%, #ffb620 100%);
  box-shadow: 0 0 0 18px rgba(255, 219, 74, .13), 0 0 80px 35px rgba(255, 225, 116, .48);
  transform: scale(0);
}

.scene.is-playing .sun {
  animation: sunRise 2.1s 1.3s cubic-bezier(.2,.8,.2,1) forwards, sunBreathe 4s 3.6s ease-in-out infinite;
}

.cloud {
  position: absolute;
  width: 110px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  filter: drop-shadow(0 8px 10px rgba(61, 130, 168, .12));
  opacity: 0;
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  bottom: 4px;
  border-radius: 50%;
  background: inherit;
}

.cloud::before {
  left: 19px;
  width: 48px;
  height: 48px;
}

.cloud::after {
  right: 16px;
  width: 38px;
  height: 38px;
}

.cloud--one {
  top: 18%;
  left: -130px;
}

.cloud--two {
  top: 31%;
  right: -140px;
  transform: scale(.72);
}

.scene.is-playing .cloud--one {
  animation: cloudCross 18s 1.2s linear infinite;
}

.scene.is-playing .cloud--two {
  animation: cloudCrossReverse 24s 3s linear infinite;
}

.rainbow {
  position: absolute;
  left: 50%;
  top: 13%;
  width: min(88vw, 430px);
  height: min(42vw, 210px);
  transform: translateX(-50%) scale(.4) rotate(-6deg);
  transform-origin: 50% 100%;
  opacity: 0;
}

.rainbow span {
  position: absolute;
  inset: 0;
  border-radius: 999px 999px 0 0;
  border-style: solid;
  border-width: 16px 16px 0;
  border-bottom: 0;
}

.rainbow span:nth-child(1) { border-color: rgba(239, 94, 94, .75); }
.rainbow span:nth-child(2) { inset: 16px; border-color: rgba(255, 163, 57, .75); }
.rainbow span:nth-child(3) { inset: 32px; border-color: rgba(255, 224, 83, .78); }
.rainbow span:nth-child(4) { inset: 48px; border-color: rgba(101, 196, 110, .72); }
.rainbow span:nth-child(5) { inset: 64px; border-color: rgba(87, 149, 226, .66); }

.scene.is-playing .rainbow {
  animation: rainbowReveal 2.4s 3.7s cubic-bezier(.18,.89,.32,1.28) forwards, rainbowFloat 4s 6s ease-in-out infinite;
}

.message-stack {
  position: absolute;
  z-index: 8;
  top: max(52px, env(safe-area-inset-top));
  left: 50%;
  width: min(88vw, 430px);
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

.message {
  position: absolute;
  left: 50%;
  width: 100%;
  margin: 0;
  opacity: 0;
  transform: translate(-50%, 22px) scale(.92);
  text-shadow: 0 3px 16px rgba(255,255,255,.65);
}

.message--small {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #52703f;
}

.message--title {
  font-size: clamp(42px, 12vw, 64px);
  line-height: .92;
  letter-spacing: -.06em;
  color: #8b6100;
  filter: drop-shadow(0 6px 0 rgba(255,255,255,.42));
}

.message--body,
.message--final {
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 22px;
  background: rgba(255,255,255,.64);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 35px rgba(51, 107, 60, .13);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
}

.scene.is-playing .message[data-step="1"] {
  animation: messageShow 3.2s 1s ease both;
}

.scene.is-playing .message[data-step="2"] {
  animation: messageShow 4.2s 4s ease both;
}

.scene.is-playing .message[data-step="3"] {
  animation: messageShow 6.6s 8.2s ease both;
}

.scene.is-playing .message[data-step="4"] {
  animation: messageStay 1.2s 15s ease forwards;
}

.bouquet-wrap {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 8.5%;
  width: min(82vw, 390px);
  height: min(67vh, 540px);
  transform: translateX(-50%);
  filter: drop-shadow(0 24px 24px rgba(42, 95, 42, .22));
}

.bouquet {
  position: absolute;
  inset: 0;
  transform-origin: 50% 95%;
  opacity: 0;
}

.scene.is-playing .bouquet {
  animation: bouquetEnter 1.4s .4s cubic-bezier(.18,.89,.32,1.28) forwards, bouquetSway 4.2s 5.2s ease-in-out infinite;
}

.paper {
  position: absolute;
  z-index: 3;
  bottom: 6%;
  width: 57%;
  height: 52%;
  background: linear-gradient(145deg, rgba(255,250,220,.98), rgba(235,200,110,.96));
  border: 1px solid rgba(146, 103, 23, .18);
  box-shadow: inset 0 0 30px rgba(137, 91, 0, .08);
  transition: transform 1.5s cubic-bezier(.2,.8,.2,1);
}

.paper--left {
  left: 13%;
  clip-path: polygon(0 0, 100% 18%, 75% 100%, 34% 90%);
  transform: rotate(7deg) translateX(8%);
  transform-origin: 100% 88%;
}

.paper--right {
  right: 13%;
  clip-path: polygon(0 18%, 100% 0, 66% 90%, 25% 100%);
  transform: rotate(-7deg) translateX(-8%);
  transform-origin: 0 88%;
}

.bouquet.is-open .paper--left {
  transform: rotate(-16deg) translateX(-18%);
}

.bouquet.is-open .paper--right {
  transform: rotate(16deg) translateX(18%);
}

.ribbon {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 19%;
  width: 74px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(135deg, #e8a2b7, #d65d87);
  box-shadow: 0 6px 12px rgba(126, 39, 71, .2);
}

.ribbon::before,
.ribbon::after {
  content: "";
  position: absolute;
  top: 14px;
  width: 58px;
  height: 54px;
  background: linear-gradient(145deg, #efabc0, #c94f7b);
  clip-path: polygon(0 0, 100% 18%, 68% 100%, 42% 70%, 0 94%);
}

.ribbon::before { right: 46px; transform: rotate(18deg); }
.ribbon::after { left: 46px; transform: scaleX(-1) rotate(18deg); }

.ribbon span {
  position: absolute;
  inset: 7px 20px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
}

.stem {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 21%;
  width: 7px;
  height: 54%;
  border-radius: 999px;
  background: linear-gradient(to right, #2d773c, #66aa4e 48%, #276537);
  transform-origin: 50% 100%;
  transition: transform 1.4s cubic-bezier(.2,.8,.2,1);
}

.stem::before,
.stem::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 15px;
  border-radius: 100% 0 100% 0;
  background: #4c9548;
}

.stem::before { top: 42%; left: -21px; transform: rotate(22deg); }
.stem::after { top: 57%; left: 2px; transform: scaleX(-1) rotate(22deg); }

.stem--1 { transform: rotate(-5deg); }
.stem--2 { transform: rotate(-2deg); }
.stem--3 { transform: rotate(1deg); }
.stem--4 { transform: rotate(4deg); }
.stem--5 { transform: rotate(-8deg); }
.stem--6 { transform: rotate(7deg); }
.stem--7 { transform: rotate(0deg); }

.bouquet.is-open .stem--1 { transform: rotate(-20deg); }
.bouquet.is-open .stem--2 { transform: rotate(-11deg); }
.bouquet.is-open .stem--3 { transform: rotate(-4deg); }
.bouquet.is-open .stem--4 { transform: rotate(7deg); }
.bouquet.is-open .stem--5 { transform: rotate(-29deg); }
.bouquet.is-open .stem--6 { transform: rotate(25deg); }
.bouquet.is-open .stem--7 { transform: rotate(15deg); }

.flower {
  --size: 82px;
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 56%;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, 30px) scale(.25) rotate(-12deg);
  opacity: .88;
  transition: transform 1.6s cubic-bezier(.18,.89,.32,1.28), left 1.6s ease, bottom 1.6s ease, opacity .8s ease;
}

.petals,
.petals::before,
.petals::after {
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 0, var(--yellow) 0 42%, transparent 43%),
    radial-gradient(ellipse at 100% 50%, var(--yellow) 0 42%, transparent 43%),
    radial-gradient(ellipse at 50% 100%, var(--yellow) 0 42%, transparent 43%),
    radial-gradient(ellipse at 0 50%, var(--yellow) 0 42%, transparent 43%);
  content: "";
}

.petals::before { inset: 0; transform: rotate(30deg); }
.petals::after { inset: 0; transform: rotate(60deg); }

.center {
  position: absolute;
  z-index: 2;
  inset: 34%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9d6821, #5e3317 75%);
  box-shadow: inset 0 0 0 4px rgba(255,202,43,.28), 0 2px 6px rgba(77,38,9,.25);
}

.flower::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  box-shadow: 0 0 26px rgba(255, 216, 77, .7);
  opacity: 0;
}

.bouquet.is-open .flower {
  opacity: 1;
}

.bouquet.is-open .flower::after {
  animation: flowerGlow 2.6s 1.3s ease-in-out infinite;
}

.flower--1 { --size: 88px; }
.flower--2 { --size: 78px; }
.flower--3 { --size: 96px; }
.flower--4 { --size: 72px; }
.flower--5 { --size: 76px; }
.flower--6 { --size: 72px; }
.flower--7 { --size: 84px; }

.bouquet.is-open .flower--1 { left: 50%; bottom: 67%; transform: translate(-50%, 0) scale(1) rotate(3deg); }
.bouquet.is-open .flower--2 { left: 34%; bottom: 61%; transform: translate(-50%, 0) scale(1) rotate(-9deg); }
.bouquet.is-open .flower--3 { left: 65%; bottom: 61%; transform: translate(-50%, 0) scale(1) rotate(10deg); }
.bouquet.is-open .flower--4 { left: 22%; bottom: 52%; transform: translate(-50%, 0) scale(1) rotate(-14deg); }
.bouquet.is-open .flower--5 { left: 78%; bottom: 52%; transform: translate(-50%, 0) scale(1) rotate(14deg); }
.bouquet.is-open .flower--6 { left: 40%; bottom: 48%; transform: translate(-50%, 0) scale(1) rotate(-3deg); }
.bouquet.is-open .flower--7 { left: 61%; bottom: 47%; transform: translate(-50%, 0) scale(1) rotate(6deg); }

.meadow {
  position: absolute;
  z-index: 4;
  inset: auto 0 0;
  height: 34%;
  overflow: hidden;
  pointer-events: none;
}

.grass {
  position: absolute;
  inset: auto -5% 0;
  height: 80%;
  background:
    repeating-linear-gradient(82deg, transparent 0 9px, rgba(25,100,50,.44) 10px 12px, transparent 13px 19px),
    linear-gradient(to top, #318148, #78ba59 66%, transparent 67%);
  clip-path: polygon(0 45%, 5% 30%, 10% 43%, 16% 22%, 22% 41%, 29% 28%, 35% 45%, 43% 18%, 50% 43%, 58% 25%, 67% 45%, 76% 20%, 84% 40%, 91% 25%, 100% 44%, 100% 100%, 0 100%);
}

.grass--back {
  opacity: .52;
  transform: translateY(14%) scale(1.15);
}

.grass--front {
  transform: translateY(34%);
}

.meadow-flower {
  position: absolute;
  bottom: 4%;
  font-size: 22px;
  transform-origin: 50% 100%;
  animation: meadowSway 2.7s ease-in-out infinite alternate;
}

.floating-flower {
  position: absolute;
  z-index: 10;
  top: -12vh;
  font-size: var(--size, 24px);
  opacity: 0;
  animation: flowerFall var(--duration, 9s) var(--delay, 0s) linear infinite;
  filter: drop-shadow(0 5px 7px rgba(128, 83, 0, .15));
}

.sparkle {
  position: absolute;
  z-index: 9;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fffbe0;
  box-shadow: 0 0 12px 4px rgba(255,255,255,.75);
  animation: sparkle var(--duration, 2s) var(--delay, 0s) ease-in-out infinite;
}

.controls {
  position: absolute;
  z-index: 30;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(-12px);
}

.scene.is-playing .controls {
  animation: controlsIn .6s 2.2s ease forwards;
}

.control-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(34, 91, 75, .12);
  cursor: pointer;
}

.control-button:active {
  transform: scale(.92);
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(24px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes flowerHello {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50% { transform: rotate(7deg) translateY(-8px); }
}

@keyframes buttonBeat {
  0%, 100% { box-shadow: 0 16px 30px rgba(206,111,11,.34), 0 0 0 0 rgba(255,255,255,.7); }
  50% { box-shadow: 0 18px 34px rgba(206,111,11,.42), 0 0 0 10px rgba(255,255,255,0); }
}

@keyframes shine {
  0%, 25% { left: -35%; }
  55%, 100% { left: 125%; }
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(12px, -10px); }
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(.94); opacity: .75; }
  50% { transform: scale(1.06); opacity: 1; }
}

@keyframes bouquetEnter {
  0% { opacity: 0; transform: translateY(35%) scale(.62) rotate(-4deg); }
  70% { opacity: 1; transform: translateY(-2%) scale(1.03) rotate(2deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes bouquetSway {
  0%, 100% { transform: rotate(-1.4deg); }
  50% { transform: rotate(1.4deg); }
}

@keyframes sunRise {
  from { transform: scale(0) translateY(40px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes sunBreathe {
  0%, 100% { box-shadow: 0 0 0 18px rgba(255,219,74,.13), 0 0 80px 35px rgba(255,225,116,.48); }
  50% { box-shadow: 0 0 0 28px rgba(255,219,74,.07), 0 0 95px 45px rgba(255,225,116,.55); }
}

@keyframes cloudCross {
  0% { left: -130px; opacity: 0; }
  8% { opacity: .9; }
  92% { opacity: .9; }
  100% { left: calc(100% + 30px); opacity: 0; }
}

@keyframes cloudCrossReverse {
  0% { right: -140px; opacity: 0; }
  8% { opacity: .75; }
  92% { opacity: .75; }
  100% { right: calc(100% + 30px); opacity: 0; }
}

@keyframes rainbowReveal {
  0% { opacity: 0; transform: translateX(-50%) scale(.4) rotate(-9deg); }
  100% { opacity: .84; transform: translateX(-50%) scale(1) rotate(-4deg); }
}

@keyframes rainbowFloat {
  0%, 100% { transform: translateX(-50%) scale(1) rotate(-4deg) translateY(0); }
  50% { transform: translateX(-50%) scale(1.02) rotate(-3deg) translateY(-5px); }
}

@keyframes messageShow {
  0% { opacity: 0; transform: translate(-50%, 22px) scale(.92); }
  16%, 72% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -20px) scale(1.04); }
}

@keyframes messageStay {
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes flowerGlow {
  0%, 100% { opacity: .1; transform: scale(.9); }
  50% { opacity: .8; transform: scale(1.08); }
}

@keyframes flowerFall {
  0% { opacity: 0; transform: translate3d(0, -12vh, 0) rotate(0deg); }
  10% { opacity: .9; }
  90% { opacity: .85; }
  100% { opacity: 0; transform: translate3d(var(--drift, 40px), 116vh, 0) rotate(var(--spin, 420deg)); }
}

@keyframes sparkle {
  0%, 100% { transform: scale(.2); opacity: 0; }
  50% { transform: scale(1.4); opacity: 1; }
}

@keyframes meadowSway {
  from { transform: rotate(-8deg); }
  to { transform: rotate(8deg); }
}

@keyframes controlsIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-height: 700px) {
  .bouquet-wrap {
    height: 61vh;
    bottom: 4%;
  }

  .message-stack {
    top: max(34px, env(safe-area-inset-top));
  }

  .message--body,
  .message--final {
    font-size: 14px;
    padding: 12px 15px;
  }
}

@media (min-width: 700px) {
  .experience {
    width: min(100%, 520px);
    margin-inline: auto;
    box-shadow: 0 0 80px rgba(69, 80, 35, .2);
  }

  body {
    background: linear-gradient(135deg, #fff0a5, #c8e7a3);
  }
}

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