:root {
  --night: #171629;
  --night-soft: #302d50;
  --paper: #fff8eb;
  --ink: #4b3545;
  --rose: #e76182;
  --stem: #3f865e;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--night);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, a { -webkit-tap-highlight-color: transparent; }

.love-scene {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: start center;
  overflow: hidden;
  padding: max(4.8vh, 2.25rem) 1.25rem 19rem;
  background:
    radial-gradient(circle at 50% 114%, rgba(241, 150, 183, 0.32), transparent 42%),
    linear-gradient(180deg, #111122 0%, var(--night-soft) 61%, #40385d 100%);
}

.sky, .garden, .heart-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sky { overflow: hidden; }

.sky::before {
  content: "";
  position: absolute;
  top: 7%;
  left: 10%;
  width: clamp(3.4rem, 7vw, 6rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff4d1;
  box-shadow: 0 0 2.8rem rgba(255, 238, 181, 0.42);
  opacity: 0.88;
}

.sky::after {
  content: "";
  position: absolute;
  top: 5.6%;
  left: calc(10% + clamp(1.1rem, 2.3vw, 2rem));
  width: clamp(3.4rem, 7vw, 6rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #141426;
}

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff9d8;
  box-shadow: 0 0 8px #fff1aa;
  animation: twinkle 2.8s ease-in-out infinite alternate;
}

.star--1 { top: 8%; left: 31%; animation-delay: -1.2s; }
.star--2 { top: 17%; right: 15%; animation-delay: -.4s; }
.star--3 { top: 30%; left: 8%; animation-delay: -2s; }
.star--4 { top: 37%; right: 7%; animation-delay: -.8s; }
.star--5 { top: 7%; right: 35%; animation-delay: -1.6s; }
.star--6 { top: 24%; right: 29%; animation-delay: -2.4s; }
.star--7 { top: 46%; left: 20%; animation-delay: -.2s; }
.star--8 { top: 49%; right: 20%; animation-delay: -1.1s; }

.firefly {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffe66d;
  box-shadow: 0 0 5px #ffe66d, 0 0 14px #ffe66d;
  animation: drift 7s ease-in-out infinite, twinkle 1.8s ease-in-out infinite alternate;
}

.firefly--1 { top: 39%; left: 12%; animation-delay: -3s; }
.firefly--2 { top: 28%; right: 12%; animation-delay: -5s; }
.firefly--3 { top: 52%; left: 29%; animation-delay: -1s; }
.firefly--4 { top: 44%; right: 27%; animation-delay: -6s; }
.firefly--5 { top: 64%; right: 8%; animation-delay: -2s; }
.firefly--6 { top: 61%; left: 7%; animation-delay: -4.5s; }

.note {
  position: relative;
  z-index: 5;
  width: min(92vw, 36rem);
  padding: clamp(1.9rem, 4.5vw, 3.25rem) clamp(1.5rem, 5.5vw, 3.8rem) clamp(1.7rem, 4vw, 2.6rem);
  border-radius: 2px;
  background:
    linear-gradient(rgba(141, 100, 113, .065) 1px, transparent 1px) 0 2.9rem / 100% 2rem,
    var(--paper);
  box-shadow: 0 1.4rem 4rem rgba(5, 5, 20, .36), inset 0 0 4rem rgba(237, 208, 169, .18);
  text-align: center;
  transform: rotate(-1.2deg);
  animation: note-arrives 1.15s cubic-bezier(.2, .85, .2, 1) both;
}

.note::before, .note::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 92%;
  height: 94%;
  background: rgba(255, 248, 235, .42);
}

.note::before { inset: 4% 2% auto auto; transform: rotate(3deg); }
.note::after { inset: 3% auto auto 2%; transform: rotate(-2deg); }

.tape {
  position: absolute;
  top: -.8rem;
  width: 5.5rem;
  height: 1.75rem;
  background: rgba(240, 210, 176, .68);
  box-shadow: inset 0 0 0 1px rgba(171, 128, 104, .1);
}

.tape--left { left: -1.6rem; transform: rotate(-16deg); }
.tape--right { right: -1.6rem; transform: rotate(14deg); }

.note__tiny {
  margin: 0 0 .6rem;
  color: #967384;
  font-size: clamp(.58rem, 1.4vw, .7rem);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.note h1 {
  margin: 0;
  font-family: "Nanum Pen Script", cursive;
  font-size: clamp(3.35rem, 9.2vw, 6.1rem);
  font-weight: 400;
  line-height: .79;
  letter-spacing: -.035em;
}

.note h1 em { color: var(--rose); font-style: normal; }

.note__message {
  margin: clamp(1.25rem, 2.8vw, 1.85rem) auto 1.15rem;
  font-family: "Nanum Pen Script", cursive;
  font-size: clamp(1.65rem, 4.5vw, 2.3rem);
  line-height: 1.02;
}

.note__signoff {
  position: absolute;
  right: 1rem;
  bottom: .65rem;
  color: #a88892;
  font-family: "Nanum Pen Script", cursive;
  font-size: 1.05rem;
  transform: rotate(-7deg);
}

.love-button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .7rem 1.05rem;
  border: 1px solid rgba(161, 73, 97, .25);
  border-radius: 999px;
  background: rgba(255, 222, 226, .66);
  color: #a23f60;
  cursor: pointer;
  font: 600 clamp(.7rem, 2vw, .78rem)/1 "DM Sans", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.love-button:hover {
  background: #ffd8df;
  box-shadow: 0 .5rem 1rem rgba(180, 69, 99, .14);
  transform: translateY(-2px) rotate(1deg);
}

.love-button:active { transform: translateY(0) scale(.97); }
.love-button:focus-visible { outline: 3px solid #705aa8; outline-offset: 3px; }

.love-button__heart {
  color: var(--rose);
  font-size: 1rem;
  animation: heartbeat 1.8s ease-in-out infinite;
}

.garden {
  z-index: 2;
  top: auto;
  height: clamp(20rem, 45vh, 34rem);
}

.hill {
  position: absolute;
  bottom: -19%;
  left: -10%;
  width: 120%;
  height: 56%;
  border-radius: 50% 50% 0 0;
}

.hill--back { bottom: -4%; background: #254d43; transform: rotate(-3deg); }
.hill--front { background: linear-gradient(180deg, #356850, #1b4238); transform: rotate(2deg); }

.lilies { position: absolute; inset: 0; }
.lilies--back { z-index: 1; filter: saturate(.72) brightness(.82); opacity: .84; }
.lilies--front { z-index: 3; }

.lily {
  --petal: #f8a9bf;
  --petal-deep: #dc6f91;
  --delay: 0s;
  --left: 50%;
  --bottom: 3%;
  --height: 33;
  --scale: 1;
  --tilt: 0deg;
  position: absolute;
  bottom: var(--bottom);
  left: var(--left);
  width: clamp(4.2rem, 8.8vw, 7.4rem);
  height: clamp(10rem, calc(var(--height) * 1vh), 20rem);
  transform: translateX(-50%) rotate(var(--tilt)) scale(var(--scale));
  transform-origin: bottom center;
  animation: sway 4.6s calc(var(--delay) + 1.25s) ease-in-out infinite alternate;
}

.lily--blush { --petal: #f6a6bd; --petal-deep: #d85f84; }
.lily--cream { --petal: #fff4d6; --petal-deep: #efb77f; }
.lily--coral { --petal: #ffad9b; --petal-deep: #e56f70; }
.lily--lavender { --petal: #c6afe9; --petal-deep: #9274c5; }
.lily--white { --petal: #fffaf0; --petal-deep: #e5c4c1; }

.stem {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: clamp(.28rem, .62vw, .52rem);
  height: 76%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, #28583f, #78b379 57%, #35674a);
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom;
  animation: stem-grow 1.35s var(--delay) cubic-bezier(.2, .86, .3, 1) forwards;
}

.leaf {
  position: absolute;
  top: 45%;
  width: clamp(2rem, 4vw, 3.4rem);
  height: clamp(.72rem, 1.55vw, 1.25rem);
  border-radius: 100% 0 100% 0;
  background: linear-gradient(145deg, #67a76c, #2e694d);
  opacity: 0;
  animation: leaf-open .65s calc(var(--delay) + .75s) ease forwards;
}

.leaf--left { right: 42%; transform: rotate(20deg); transform-origin: right; }
.leaf--right { top: 65%; left: 42%; border-radius: 0 100% 0 100%; transform: rotate(-18deg); transform-origin: left; }

.bloom {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  aspect-ratio: 1;
  opacity: 0;
  transform: translateX(-50%) scale(.05) rotate(-22deg);
  animation: bloom-open 1.05s calc(var(--delay) + .75s) cubic-bezier(.18, 1.45, .5, 1) forwards;
}

.petal, .throat, .stamen {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
}

.petal {
  width: 35%;
  height: 58%;
  margin: -52% 0 0 -17.5%;
  border-radius: 58% 58% 44% 44% / 68% 68% 35% 35%;
  background:
    radial-gradient(circle at 38% 58%, var(--petal-deep) 0 2%, transparent 2.8%),
    radial-gradient(circle at 62% 69%, var(--petal-deep) 0 1.7%, transparent 2.5%),
    radial-gradient(circle at 48% 79%, var(--petal-deep) 0 1.8%, transparent 2.6%),
    linear-gradient(90deg, transparent 47%, rgba(129, 58, 83, .18) 49% 51%, transparent 53%),
    linear-gradient(155deg, rgba(255,255,255,.72), transparent 42%),
    var(--petal);
  box-shadow: inset -.2rem -.35rem .55rem rgba(102, 42, 68, .12);
  clip-path: polygon(50% 0, 87% 20%, 100% 65%, 82% 92%, 50% 100%, 18% 92%, 0 65%, 13% 20%);
  transform-origin: 50% 91%;
}

.petal--1 { transform: rotate(0deg) rotateX(14deg); }
.petal--2 { transform: rotate(60deg) rotateX(14deg); }
.petal--3 { transform: rotate(120deg) rotateX(14deg); }
.petal--4 { transform: rotate(180deg) rotateX(14deg); }
.petal--5 { transform: rotate(240deg) rotateX(14deg); }
.petal--6 { transform: rotate(300deg) rotateX(14deg); }

.throat {
  z-index: 2;
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #f7d876 0 28%, #86a95f 31% 58%, transparent 62%);
  transform: translate(-50%, -50%);
}

.stamen {
  z-index: 3;
  width: 2px;
  height: 31%;
  border-radius: 999px;
  background: #eee3a7;
  transform-origin: 50% 100%;
}

.stamen::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 5px;
  height: 9px;
  border-radius: 50%;
  background: #a86342;
  transform: translateX(-50%);
}

.stamen--1 { transform: translate(-50%, -100%) rotate(-25deg); }
.stamen--2 { transform: translate(-50%, -100%) rotate(0deg); height: 35%; }
.stamen--3 { transform: translate(-50%, -100%) rotate(25deg); }

.heart-burst { z-index: 10; }

.floating-heart {
  --x: 0px;
  --r: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  color: #ff8dab;
  font-size: clamp(1rem, 3vw, 2rem);
  filter: drop-shadow(0 0 .5rem rgba(255, 117, 157, .45));
  animation: float-heart 1.9s ease-out forwards;
}

.love-scene.is-loved .note { animation: note-happy .6s ease both; }
.love-scene.is-loved .bloom { animation: lily-happy .7s ease both; opacity: 1; }

.credit {
  position: fixed;
  z-index: 6;
  right: max(.8rem, env(safe-area-inset-right));
  bottom: max(.6rem, env(safe-area-inset-bottom));
  color: rgba(255,255,255,.5);
  font-size: .58rem;
  letter-spacing: .05em;
}

.credit a { color: inherit; text-underline-offset: 2px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes note-arrives {
  from { opacity: 0; transform: translateY(-2.2rem) rotate(-5deg) scale(.9); }
  to { opacity: 1; transform: translateY(0) rotate(-1.2deg) scale(1); }
}

@keyframes note-happy {
  0%, 100% { transform: rotate(-1.2deg) scale(1); }
  45% { transform: rotate(1deg) scale(1.035); }
}

@keyframes stem-grow { to { transform: translateX(-50%) scaleY(1); } }
@keyframes leaf-open { from { opacity: 0; scale: .1; } to { opacity: 1; scale: 1; } }

@keyframes bloom-open {
  to { opacity: 1; transform: translateX(-50%) scale(1) rotate(0); }
}

@keyframes lily-happy {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.14) rotate(5deg); }
}

@keyframes sway { from { rotate: -1.6deg; } to { rotate: 2.5deg; } }
@keyframes twinkle { from { opacity: .22; scale: .7; } to { opacity: 1; scale: 1.25; } }

@keyframes drift {
  0%, 100% { translate: 0 0; }
  35% { translate: 1.8rem -1.2rem; }
  70% { translate: -1rem 1.1rem; }
}

@keyframes heartbeat {
  0%, 35%, 100% { transform: scale(1); }
  12% { transform: scale(1.25); }
  24% { transform: scale(1.08); }
}

@keyframes float-heart {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.4) rotate(0); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), -48vh) scale(1.35) rotate(var(--r)); }
}

@media (max-width: 640px) {
  .love-scene { padding: max(3.25rem, 7.5vh) 1rem 15rem; }
  .note { width: min(92vw, 29rem); padding: 1.9rem 1.2rem 1.65rem; }
  .tape { width: 4.2rem; height: 1.35rem; }
  .tape--left { left: -.7rem; }
  .tape--right { right: -.7rem; }
  .note__signoff { display: none; }
  .desktop-break { display: none; }
  .garden { height: clamp(17rem, 39vh, 23rem); }
  .lily { width: clamp(3.9rem, 15.5vw, 5.5rem); height: clamp(8.5rem, calc(var(--height) * .84vh), 15rem); }
  .sky::before { left: 7%; }
  .sky::after { left: calc(7% + 1.2rem); }
  .credit { font-size: .5rem; }
}

@media (max-height: 720px) and (min-width: 641px) {
  .love-scene { padding-top: 1.65rem; }
  .note { padding-block: 1.6rem 1.4rem; }
  .note h1 { font-size: clamp(3.5rem, 8vh, 4.8rem); }
  .note__message { margin-top: .9rem; font-size: 1.75rem; }
  .garden { height: 43vh; }
}

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