:root {
  --night-velvet: #090914;
  --plum-shadow: #201127;
  --spider-crimson: #c9284e;
  --rose-flame: #ff6b82;
  --letter-ivory: #fff9ee;
  --candle-gold: #f7c978;
  --leaf-emerald: #164d43;
  --eucalyptus-mist: #77a89a;
  --rose-mist: #e9a5b5;
  --ink: #321f2c;
  --ease-bloom: cubic-bezier(.16, .84, .32, 1);
  --ease-unfurl: cubic-bezier(.22, .62, .25, 1);
}
* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--letter-ivory);
  background: var(--night-velvet);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button {
  font: inherit;
}

button:focus-visible {
  outline: 2px solid var(--candle-gold);
  outline-offset: 5px;
}

.experience {
  min-height: 100vh;
}

.garden {
  position: relative;
  min-height: max(760px, 100svh);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 22%, #f7c97812 0 5%, transparent 24%),
    radial-gradient(circle at 66% 42%, #72253b4d 0, transparent 35%),
    radial-gradient(ellipse at 50% 108%, #164d4366 0, transparent 53%),
    linear-gradient(135deg, #0d0b1d 0%, var(--plum-shadow) 48%, var(--night-velvet) 100%);
  transition:
    opacity 1.8s cubic-bezier(.4, 0, .2, 1),
    filter 1.8s cubic-bezier(.4, 0, .2, 1),
    scale 1.8s cubic-bezier(.4, 0, .2, 1);
}

.garden.is-exiting {
  opacity: 0;
  filter: blur(14px);
  scale: .985;
  pointer-events: none;
}

.garden::before {
  position: absolute;
  z-index: 40;
  inset: 0;
  pointer-events: none;
  background: rgb(7 5 14 / 0%);
  backdrop-filter: blur(0);
  content: "";
  transition: background .8s ease, backdrop-filter .8s ease;
}

.garden::after {
  position: absolute;
  z-index: 0;
  right: -8%;
  bottom: -16%;
  width: min(78vw, 980px);
  height: 43%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #2a695d70 0%, #10292380 36%, transparent 72%);
  content: "";
  filter: blur(3px);
}

.sky {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}

.moon {
  position: absolute;
  top: clamp(58px, 9vh, 100px);
  left: 70%;
  width: clamp(92px, 11vw, 160px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, #fffdf2 0 8%, transparent 9%),
    radial-gradient(circle at 62% 68%, #d7b97944 0 7%, transparent 8%),
    radial-gradient(circle at 48% 45%, #fff7d9 0 34%, #f5dba8 58%, #d39a7180 100%);
  box-shadow: 0 0 40px #f7c97855, 0 0 120px #df7e8a2d;
  opacity: .86;
  transition: box-shadow 1s ease, filter 1s ease;
}

.moon-ring {
  position: absolute;
  top: clamp(42px, 7vh, 84px);
  left: 70%;
  width: clamp(126px, 15vw, 220px);
  aspect-ratio: 1;
  border: 1px solid #f7c97824;
  border-radius: 50%;
  translate: -14% -9%;
}

.moon-ring--two {
  width: clamp(174px, 21vw, 310px);
  border-color: #e9a5b512;
  translate: -25% -20%;
}

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--candle-gold);
  box-shadow: 0 0 10px 2px #f7c9789c;
  opacity: .45;
}

.star--one { top: 15%; left: 12%; }
.star--two { top: 24%; left: 42%; scale: .6; }
.star--three { top: 12%; right: 13%; scale: .75; }
.star--four { top: 39%; left: 8%; scale: .5; }
.star--five { top: 46%; right: 5%; scale: .65; }

.intro {
  position: absolute;
  z-index: 24;
  top: 48%;
  left: clamp(32px, 6.5vw, 104px);
  width: min(38vw, 540px);
  translate: 0 -50%;
}

.intro h1 {
  margin: 0;
  color: var(--letter-ivory);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.3rem, 6.4vw, 7rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .86;
  text-shadow: 0 4px 30px #0009;
}

.intro h1 em {
  display: block;
  margin-top: .08em;
  color: var(--rose-flame);
  font-weight: 400;
}

.intro h1 em::after {
  display: block;
  width: 72%;
  height: 1px;
  margin-top: .16em;
  background: linear-gradient(90deg, var(--candle-gold), transparent);
  content: "";
}

.bouquet {
  position: absolute;
  z-index: 8;
  bottom: 12px;
  left: 70%;
  width: min(660px, 58vw);
  height: 700px;
  pointer-events: none;
  translate: -50% 0;
  transition: filter .8s ease, opacity .8s ease;
}

.bouquet__aura {
  position: absolute;
  z-index: -1;
  top: 7%;
  left: 50%;
  width: 78%;
  height: 64%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #ff6b8220, #f7c9780d 42%, transparent 70%);
  filter: blur(18px);
  translate: -50% 0;
}

.flower-stem {
  position: absolute;
  z-index: -1;
  bottom: 56px;
  left: 50%;
  width: 10px;
  height: 76%;
  border-radius: 100% 100% 3px 3px;
  background:
    linear-gradient(90deg, #082a25 0 22%, #2c7464 48%, #8eb8a164 70%, #0b3d35 100%);
  box-shadow: inset -2px 0 4px #05171480;
  transform-origin: 50% 100%;
  translate: -50% 0;
}

.spider-lily,
.lily {
  position: absolute;
  transform-origin: 50% 100%;
  transition: translate .85s var(--ease-bloom), filter .85s ease;
}

.spider-lily--hero {
  z-index: 9;
  bottom: 62px;
  left: 50%;
  width: 320px;
  height: 580px;
  translate: -50% 0;
}

.spider-lily--small {
  z-index: 7;
  bottom: 66px;
  width: 210px;
  height: 440px;
}

.spider-lily--medium {
  width: 270px;
  height: 520px;
}

.spider-lily--back-center {
  z-index: 5;
  bottom: 75px;
  left: 44%;
  filter: brightness(.78) saturate(.82);
  rotate: 7deg;
  translate: -50% 0;
}

.spider-lily--new-left {
  z-index: 6;
  bottom: 72px;
  left: 16%;
  rotate: -24deg;
  translate: -50% 0;
}

.spider-lily--new-right {
  z-index: 6;
  bottom: 78px;
  left: 72%;
  rotate: 24deg;
  translate: -50% 0;
}

.spider-lily--small-left {
  left: 31%;
  rotate: -17deg;
  translate: -50% 0;
}

.spider-lily--small-right {
  right: 1%;
  rotate: 17deg;
}

.spider-lily__head {
  position: absolute;
  bottom: 76%;
  left: 50%;
  width: 1px;
  height: 1px;
}

.spider-lily__head::after {
  position: absolute;
  z-index: 5;
  width: 24px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--candle-gold) 0 18%, #9d1e3d 26%, #3f1426 72%);
  box-shadow: 0 0 16px #ff6b8277;
  content: "";
  translate: -50% -50%;
}

.spider-lily__petal {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 146px;
  height: 26px;
  border-radius: 100% 0 100% 0;
  background:
    linear-gradient(175deg, transparent 0 34%, #ffadad3d 36% 39%, transparent 41%),
    linear-gradient(90deg, #8f1538, var(--spider-crimson) 34%, var(--rose-flame) 78%, #ffafb9);
  box-shadow: inset 0 -5px 7px #5e102a44, 0 0 18px #ff4c6950;
  transform: rotate(var(--r));
  transform-origin: 0 50%;
}

.spider-lily__petal--outer {
  z-index: 1;
}

.spider-lily__petal--inner {
  z-index: 2;
  width: 94px;
  height: 20px;
  background:
    linear-gradient(172deg, transparent 0 29%, #ffd0d05c 31% 35%, transparent 37%),
    linear-gradient(90deg, #b91847, #f13f65 46%, #ff8292 78%, #ffd1d5);
  box-shadow: inset 0 -4px 6px #70133155, 0 0 20px #ff6b8270;
}

.spider-lily__head b {
  position: absolute;
  z-index: 4;
  bottom: -2px;
  left: 0;
  width: 142px;
  height: 54px;
  border-top: 2px solid var(--candle-gold);
  border-radius: 50%;
  filter: drop-shadow(0 0 4px #f7c978aa);
  transform: rotate(var(--r));
  transform-origin: 0 100%;
}

.spider-lily__head b::after {
  position: absolute;
  top: -4px;
  right: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--candle-gold);
  box-shadow: 0 0 8px var(--candle-gold);
  content: "";
}

.spider-lily--small .spider-lily__petal--outer {
  width: 104px;
  height: 19px;
}

.spider-lily--small .spider-lily__petal--inner {
  width: 68px;
  height: 14px;
}

.spider-lily--small .spider-lily__head b {
  width: 102px;
  height: 39px;
}

.spider-lily--small .spider-lily__head::after {
  width: 18px;
}

.spider-lily--medium .spider-lily__petal--outer { width: 124px; height: 22px; }
.spider-lily--medium .spider-lily__petal--inner { width: 80px; height: 17px; }
.spider-lily--medium .spider-lily__head b { width: 121px; height: 46px; }
.spider-lily--medium .spider-lily__head::after { width: 21px; }

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

.stem-leaves__leaf {
  position: absolute;
  bottom: calc(56px + var(--node));
  left: 50%;
  width: var(--w);
  height: var(--h);
  border: 1px solid rgb(119 168 154 / calc(var(--shade) * .2));
  border-radius: 95% 8% 92% 10% / 100% 8% 94% 10%;
  background:
    linear-gradient(90deg, transparent 0 47%, rgb(154 193 179 / calc(var(--shade) * .32)) 49% 51%, transparent 53%),
    linear-gradient(105deg, #092a25, rgb(35 102 85 / var(--shade)) 58%, #77a89a80);
  box-shadow: inset 7px 0 12px #061c1870, 0 14px 24px #0004;
  filter: brightness(var(--shade));
  transform-origin: 50% 100%;
  translate: -50% 0;
  rotate: var(--angle);
}

.stem-leaves__leaf:nth-child(3n + 2) { --sway: 7.7s; }
.stem-leaves__leaf:nth-child(3n) { --sway: 8.3s; }

.lily {
  z-index: 6;
  bottom: 68px;
  width: 220px;
  height: 470px;
}

.lily--left {
  left: 4%;
  rotate: -13deg;
}

.lily--right {
  right: -1%;
  rotate: 13deg;
}

.lily__bloom {
  position: absolute;
  bottom: 69%;
  left: 50%;
  width: 1px;
  height: 1px;
}

.lily__bloom::after {
  position: absolute;
  z-index: 3;
  width: 36px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--candle-gold), #8f3b42 48%, transparent 72%);
  content: "";
  translate: -50% -20%;
}

.lily__bloom i {
  position: absolute;
  bottom: 0;
  left: -44px;
  width: 88px;
  height: 145px;
  border-radius: 52% 48% 62% 38%;
  background:
    radial-gradient(ellipse at 50% 72%, #b45b6742 0 3%, transparent 4%),
    repeating-radial-gradient(ellipse at 50% 72%, transparent 0 9px, #a74d5b26 10px 11px),
    linear-gradient(145deg, #fffef8, var(--letter-ivory) 42%, #efc7cc 88%);
  box-shadow: inset 10px 4px 18px #fff, 0 0 18px #fff9ee45;
  transform: rotate(var(--r));
  transform-origin: 50% 100%;
}

.lily__bloom b {
  position: absolute;
  z-index: 4;
  bottom: -12px;
  left: -4px;
  width: 8px;
  height: 62px;
  border-radius: 99px;
  background: linear-gradient(to top, #a94b56, var(--candle-gold));
  box-shadow: 0 0 12px #f7c9789c;
}

.lily__leaf {
  --sway: 7.4s;
  position: absolute;
  z-index: -1;
  left: 50%;
  width: 116px;
  height: 48px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(155deg, #0b322c, #2a7162 62%, #77a89a66);
  transform-origin: 50% 100%;
  translate: -50% 0;
  rotate: var(--angle);
}

.lily__leaf--one {
  --angle: 24deg;
  --wind: 1.4deg;
  --delay: .08s;
  bottom: 22%;
}

.lily__leaf--two {
  --angle: -24deg;
  --wind: -1.4deg;
  --delay: .2s;
  --sway: 7.9s;
  bottom: 36%;
}

.eucalyptus {
  position: absolute;
  z-index: 2;
  bottom: 80px;
  width: 180px;
  height: 520px;
  transform-origin: 50% 100%;
  transition: translate .85s var(--ease-bloom);
}

.eucalyptus--left {
  left: 4%;
  rotate: -24deg;
}

.eucalyptus--right {
  right: 0;
  rotate: 24deg;
  scale: -1 1;
}

.eucalyptus__stem {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 5px;
  height: 96%;
  border-radius: 99px;
  background: linear-gradient(90deg, #173a34, #77a89a);
  transform-origin: bottom;
  rotate: -6deg;
}

.eucalyptus__leaf {
  position: absolute;
  bottom: calc(52px + (var(--i) * 78px));
  left: calc(50% - 4px);
  width: 74px;
  height: 38px;
  border: 1px solid #b2d2c333;
  border-radius: 70% 30% 65% 35%;
  background:
    radial-gradient(circle at 30% 34%, #bfd5c85c 0 4%, transparent 5%),
    linear-gradient(145deg, #315f54, var(--eucalyptus-mist) 72%, #adc8bc);
  box-shadow: inset 0 -8px 12px #173a3445, 0 7px 18px #0003;
  transform-origin: 0 50%;
  rotate: calc(-42deg + (var(--i) * 6deg));
}

.eucalyptus__leaf:nth-of-type(even) {
  left: calc(50% + 2px);
  scale: -1 1;
  rotate: calc(30deg - (var(--i) * 5deg));
}

.baby-breath {
  position: absolute;
  z-index: 5;
  bottom: 82px;
  width: 130px;
  height: 350px;
  transform-origin: 50% 100%;
  transition: translate .85s var(--ease-bloom);
}

.baby-breath--left {
  left: 21%;
  rotate: -12deg;
}

.baby-breath--right {
  right: 18%;
  rotate: 12deg;
}

.baby-breath__stem {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 3px;
  height: 87%;
  background: linear-gradient(to top, #14463d, #77a89a);
  transform-origin: bottom;
}

.baby-breath__stem::before,
.baby-breath__stem::after {
  position: absolute;
  top: 26%;
  width: 2px;
  height: 65%;
  background: inherit;
  content: "";
  transform-origin: bottom;
}

.baby-breath__stem::before {
  rotate: -24deg;
}

.baby-breath__stem::after {
  rotate: 28deg;
}

.baby-breath__bloom {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 50%;
  width: 13px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--candle-gold) 0 12%, transparent 14%),
    radial-gradient(circle at 50% 9%, var(--letter-ivory) 0 23%, transparent 25%),
    radial-gradient(circle at 89% 42%, #fff 0 23%, transparent 25%),
    radial-gradient(circle at 73% 86%, #f5dce0 0 23%, transparent 25%),
    radial-gradient(circle at 21% 82%, #fff 0 23%, transparent 25%),
    radial-gradient(circle at 10% 36%, #f5dce0 0 23%, transparent 25%);
  box-shadow: 0 0 10px #fff9ee55;
  transform: translate(var(--x), var(--y));
}

.is-blooming .flower-stem,
.is-blooming .eucalyptus__stem,
.is-blooming .baby-breath__stem {
  animation: flower-rise 1.8s var(--ease-bloom) both;
}

.is-blooming .spider-lily__petal--outer {
  animation: spider-unfurl 2.45s calc(1.8s + var(--d, 0s)) var(--ease-unfurl) both;
}

.is-blooming .spider-lily__petal--inner {
  animation: spider-unfurl 2.15s calc(2.1s + var(--d, 0s)) var(--ease-unfurl) both;
}

.is-blooming .spider-lily__head::after {
  animation: spider-center-reveal .54s 4.86s var(--ease-bloom) both;
}

.is-blooming .spider-lily--small .spider-lily__petal--outer {
  animation-duration: 2.35s;
}

.is-blooming .spider-lily--small .spider-lily__petal--inner {
  animation-duration: 2.05s;
}

.is-blooming .spider-lily__head b {
  animation:
    stamen-unfurl .8s calc(5.45s + var(--d, 0s)) var(--ease-unfurl) both,
    flower-breathe 5.2s 6.85s ease-in-out infinite;
}

.is-blooming .spider-lily--small .spider-lily__head b {
  animation-duration: .75s, 5.6s;
}

.is-blooming .lily__bloom i {
  animation:
    lily-open 1.5s calc(1.8s + var(--d, 0s)) var(--ease-bloom) both,
    flower-breathe 5.7s 6.85s ease-in-out infinite;
}

.is-blooming .lily__leaf {
  animation:
    lily-leaf-rise 1.35s calc(.45s + var(--delay)) var(--ease-bloom) both,
    lily-leaf-sway var(--sway, 7.4s) 6.85s ease-in-out infinite;
}

.is-blooming .baby-breath__bloom {
  animation:
    breath-appear .8s calc(2.35s + var(--d)) var(--ease-bloom) both,
    soft-glimmer 4.8s 6.85s ease-in-out infinite alternate;
}

.is-blooming .eucalyptus__leaf {
  animation:
    leaf-appear .65s calc(.55s + (var(--i) * .16s)) var(--ease-bloom) both,
    eucalyptus-sway 6.8s 6.85s ease-in-out infinite;
}

.is-blooming .stem-leaves__leaf {
  animation:
    stem-leaf-rise 1.55s calc(.35s + var(--delay)) var(--ease-bloom) both,
    stem-leaf-sway var(--sway, 7s) 6.85s ease-in-out infinite;
}

.is-blooming .star {
  animation: twinkle 4s 6.85s ease-in-out infinite alternate;
}

@keyframes flower-rise {
  from { opacity: 0; scale: 1 .05; }
  to { opacity: 1; scale: 1 1; }
}

@keyframes spider-unfurl {
  0% { opacity: 0; transform: rotate(var(--r)) scaleX(.05) rotateY(70deg); }
  58% { opacity: 1; transform: rotate(var(--r)) scaleX(.76) rotateY(16deg); }
  82% { opacity: 1; transform: rotate(var(--r)) scaleX(.94) rotateY(4deg); }
  100% { opacity: 1; transform: rotate(var(--r)); }
}

@keyframes spider-center-reveal {
  0% {
    opacity: 0;
    scale: .15;
    filter: brightness(1.65);
  }
  72% {
    opacity: 1;
    scale: 1.12;
    filter: brightness(1.35);
  }
  100% {
    opacity: 1;
    scale: 1;
    filter: brightness(1);
  }
}

@keyframes stamen-unfurl {
  from { opacity: 0; transform: rotate(var(--r)) scaleX(.08); }
  to { opacity: 1; transform: rotate(var(--r)) scaleX(1); }
}

@keyframes lily-open {
  from { opacity: 0; transform: rotate(var(--r)) scale(.18) rotateX(55deg); }
  to { opacity: 1; transform: rotate(var(--r)) scale(1) rotateX(0); }
}

@keyframes lily-leaf-rise {
  from { opacity: 0; scale: .4 .05; }
  to { opacity: 1; scale: 1 1; }
}

@keyframes lily-leaf-sway {
  50% { rotate: calc(var(--angle) + var(--wind)); }
}

@keyframes breath-appear {
  from { opacity: 0; scale: .1; }
  to { opacity: 1; scale: 1; }
}

@keyframes leaf-appear {
  from { opacity: 0; scale: .15; }
  to { opacity: 1; scale: 1; }
}

@keyframes stem-leaf-rise {
  from { opacity: 0; scale: .45 .05; }
  to { opacity: 1; scale: 1 1; }
}

@keyframes stem-leaf-sway {
  50% { rotate: calc(var(--angle) + var(--wind)); }
}

@keyframes eucalyptus-sway {
  50% { translate: 2px -3px; rotate: 2deg; }
}

@keyframes flower-breathe {
  50% { rotate: 1.2deg; }
}

@keyframes soft-glimmer {
  to { filter: brightness(1.2); opacity: .72; }
}

@keyframes twinkle {
  to { opacity: .9; scale: 1.35; }
}

.final-letter {
  position: fixed;
  z-index: 100;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 18%, #5f26353d 0, transparent 36%),
    linear-gradient(155deg, #100c1c 0%, #1b1020 54%, #090914 100%);
  transition: opacity .9s ease, visibility 0s linear .9s;
  overscroll-behavior: contain;
}

.final-letter__body {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(72px, 12vh, 132px) 0 clamp(84px, 14vh, 150px);
  color: #f9eee4;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.08rem, 1.2vw, 1.28rem);
  line-height: 1.9;
}

.final-letter__body p {
  margin: 0 0 2.2em;
  opacity: 0;
  translate: 0 20px;
  transition: opacity .9s ease, translate .9s var(--ease-bloom);
}

.final-letter__body em {
  color: #ff8097;
  font-style: normal;
}

.is-letter-visible .final-letter {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.is-letter-visible .final-letter__body p {
  opacity: 1;
  translate: 0 0;
  transition-delay: calc(.22s + (var(--i) * .24s));
}

@media (max-width: 960px) {
  .intro {
    left: 4vw;
    width: 43vw;
  }

  .bouquet {
    left: 72%;
  }

  .bouquet {
    width: 610px;
    scale: .88;
    transform-origin: 50% 100%;
  }
}

@media (max-width: 640px) {
  .final-letter__body {
    width: calc(100% - 32px);
    padding-block: 52px 72px;
    font-size: 1rem;
    line-height: 1.78;
  }

  .garden {
    min-height: 960px;
  }

  .moon {
    top: 30px;
    left: 76%;
    width: 88px;
  }

  .moon-ring {
    top: 22px;
    left: 76%;
    width: 118px;
  }

  .moon-ring--two {
    width: 162px;
  }

  .intro {
    top: 42px;
    left: 50%;
    width: calc(100% - 2rem);
    text-align: center;
    translate: -50% 0;
  }

  .intro h1 {
    max-width: 12ch;
    margin: 0 auto;
    font-size: clamp(2.7rem, 15vw, 4.4rem);
    line-height: .94;
  }

  .bouquet {
    bottom: 28px;
    left: 50%;
    width: 620px;
    height: 690px;
    scale: .61;
    translate: -50% 0;
    transform-origin: 50% 100%;
  }

  .spider-lily--small-left {
    left: 41%;
  }

  .spider-lily--small-right {
    right: 24%;
  }

  .spider-lily--new-left { left: 31%; }
  .spider-lily--back-center { left: 47%; }
  .spider-lily--new-right { left: 68%; }

}

@media (max-height: 700px) and (min-width: 641px) {
  .garden {
    min-height: 700px;
  }

  .intro {
    translate: 0 -52%;
  }

  .bouquet {
    bottom: -36px;
    scale: .82;
    transform-origin: 50% 100%;
  }

}

.no-js .garden,
.no-js .garden *,
.no-js .garden *::before,
.no-js .garden *::after {
  animation: none !important;
}

.no-js .stem-leaves__leaf {
  animation: none;
  opacity: 1;
  scale: 1;
}

.no-js .lily__leaf {
  animation: none;
  opacity: 1;
  scale: 1;
}

.no-js .garden { display: none; }
.no-js .final-letter {
  position: relative;
  visibility: visible;
  opacity: 1;
}
.no-js .final-letter__body p { opacity: 1; translate: 0 0; }

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

  .garden { display: none; }
  .final-letter {
    visibility: visible;
    opacity: 1;
    transition: none;
  }
  .final-letter__body p { transition: none; }
}