@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --gold: #f3ce5e;
  --cream: #fbf5dd;
  --muted: #c2bd9f;
}

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  display: block;
  min-height: 100vh;
  overflow: hidden;
  background: #090d08;
  color: var(--cream);
  font-family: Manrope, Arial, sans-serif;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.night {
  z-index: -3;
  background: radial-gradient(ellipse at 72% 42%, #796a211f, transparent 44%), radial-gradient(ellipse at top, #172018, transparent 70%), #090d08;
}

.experience {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.love-copy {
  position: absolute;
  top: 17vh;
  left: 8vw;
  z-index: 25;
  width: min(400px, 43vw);
  max-width: calc(100vw - 14vw);
  animation: copy-float 7s ease-in-out infinite alternate;
}

.eyebrow {
  margin: 0 0 20px;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 3px;
  line-height: 1.6;
}

h1 {
  margin: 0;
  max-width: 100%;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(44px, 6vw, 84px);
  font-weight: 400;
  letter-spacing: -3px;
  line-height: .86;
}

em {
  color: var(--gold);
  font-weight: 400;
}

.intro {
  width: min(340px, 100%);
  margin: 28px 0 28px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}

.recipient-line {
  min-height: 18px;
  margin: 17px 0 -15px;
  color: var(--gold);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 21px;
  font-style: italic;
}

.gold-button {
  border: 0;
  border-radius: 3px;
  padding: 15px 19px;
  background: var(--gold);
  box-shadow: 0 8px 35px #edc35422;
  color: #262b18;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: transform .25s ease, background .25s ease;
}

.gold-button span {
  margin-left: 22px;
  font-size: 15px;
}

.gold-button:hover {
  background: #ffe89a;
  transform: translateY(-2px);
}

@keyframes copy-float {
  from { transform: translateY(0); }
  to { transform: translateY(-7px); }
}

.garden {
  position: absolute;
  inset: 0;
  height: 100vh;
  pointer-events: none;
  transform-style: preserve-3d;
  transform: rotateX(var(--scene-tilt, 0deg)) rotateY(var(--scene-turn, 0deg));
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}

.garden .flowers {
  position: absolute;
  bottom: -14vmin;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%) translateZ(85px) scale(.9);
  display: block;
}

.sun-halo {
  position: absolute;
  top: 8%;
  left: 50%;
  width: min(700px, 75vw);
  height: min(700px, 75vw);
  border-radius: 50%;
  background: radial-gradient(circle, #f2ce6324 0, #f2ce6307 45%, transparent 70%);
  filter: blur(12px);
  transform: translateX(-50%) translateZ(-160px);
}

.star-field {
  position: absolute;
  inset: -10%;
  transform-style: preserve-3d;
  pointer-events: none;
}

.star-field--far {
  z-index: 0;
  transform: translateZ(-220px) scale(1.18);
}

.star-field--near {
  z-index: 2;
  transform: translateZ(15px) scale(1.02);
}

.star {
  position: absolute;
  display: block;
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  background: var(--star-color, #fff3bd);
  box-shadow: 0 0 8px var(--star-color, #fff3bd);
  opacity: var(--star-opacity, .8);
  animation: star-shimmer var(--star-speed, 4s) ease-in-out var(--star-delay, 0s) infinite alternate;
}

.star--cross::before,
.star--cross::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  background: inherit;
  box-shadow: inherit;
}

.star--cross::before { width: 240%; height: 1px; transform: translate(-50%, -50%); }
.star--cross::after { width: 1px; height: 240%; transform: translate(-50%, -50%); }

@keyframes star-shimmer {
  from { opacity: .25; transform: scale(.7); }
  to { opacity: 1; transform: scale(1.35); }
}

.heart-constellation {
  position: absolute;
  top: 12%;
  right: 12%;
  z-index: 8;
  width: 250px;
  height: 220px;
  transform: translateZ(90px) rotate(-8deg);
  transform-style: preserve-3d;
}

.heart-star {
  position: absolute;
  color: #f9d872;
  font-size: var(--heart-star-size, 19px);
  text-shadow: 0 0 9px #f3ce5e, 0 0 25px #f3ce5eaa;
  animation: constellation-pulse 3.5s ease-in-out var(--heart-star-delay, 0s) infinite alternate;
}

.heart-star::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 1px;
  background: linear-gradient(90deg, #f3ce5e55, transparent);
  content: '';
  transform: rotate(var(--line-angle, 25deg));
  transform-origin: left center;
}

.butterflies {
  position: absolute;
  inset: -8%;
  z-index: 12;
  overflow: visible;
  pointer-events: none;
  perspective: 900px;
  transform-style: preserve-3d;
}

#butterfly-canvas {
  position: fixed;
  inset: 0;
  z-index: 22;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

body.butterflies-3d-ready .butterflies { display: none; }

.butterflies.butterflies--gif {
  position: fixed;
  inset: 0;
  z-index: 22;
  overflow: hidden;
  pointer-events: none;
  perspective: 1100px;
  transform-style: preserve-3d;
}

.butterfly-gif {
  position: absolute;
  display: block;
  width: calc(180px * var(--gif-size));
  transform-style: preserve-3d;
  animation: butterfly-gif-flight var(--gif-duration) ease-in-out var(--gif-delay) infinite;
  filter: none;
}

.butterfly-gif img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
  user-select: none;
}

.butterfly-gif--gold img {
  mix-blend-mode: normal;
  transform: scaleX(-1);
}

.butterfly-gif--amber img {
  mix-blend-mode: normal;
  transform: scaleX(-1);
}

.butterfly-gif--silver img,
.butterfly-gif--morpho img,
.butterfly-gif--white img,
.butterfly-gif--tiny img {
  mix-blend-mode: normal;
}

.butterfly-gif--morpho img {
  transform: rotate(90deg);
}

.butterfly-gif--static {
  animation: butterfly-gif-appear 1.8s ease var(--gif-delay) both;
}

@keyframes butterfly-gif-flight {
  0% { transform: translate3d(-8vw, 14px, var(--gif-depth)) rotateZ(var(--gif-rotate)) rotateY(-13deg) scale(.88); }
  24% { transform: translate3d(22vw, -34px, calc(var(--gif-depth) + 45px)) rotateZ(calc(var(--gif-rotate) + 8deg)) rotateY(12deg) scale(1); }
  50% { transform: translate3d(56vw, 28px, calc(var(--gif-depth) - 20px)) rotateZ(calc(var(--gif-rotate) - 5deg)) rotateY(-8deg) scale(.94); }
  76% { transform: translate3d(91vw, -45px, calc(var(--gif-depth) + 28px)) rotateZ(calc(var(--gif-rotate) + 11deg)) rotateY(14deg) scale(1.04); }
  100% { transform: translate3d(133vw, 12px, var(--gif-depth)) rotateZ(var(--gif-rotate)) rotateY(-13deg) scale(.88); }
}

@keyframes butterfly-gif-appear {
  0% { opacity: 0; transform: translateY(12px) scale(.82) rotateZ(var(--gif-rotate)); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateZ(var(--gif-rotate)); }
}

.butterfly {
  position: absolute;
  display: block;
  width: calc(54px * var(--butterfly-size));
  height: calc(42px * var(--butterfly-size));
  transform-style: preserve-3d;
  filter: drop-shadow(0 8px 7px #0008);
  animation: butterfly-drift var(--butterfly-duration) ease-in-out var(--butterfly-delay) infinite;
}

.butterfly__wing {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  border: 1px solid color-mix(in srgb, var(--butterfly-accent) 72%, transparent);
  background:
    radial-gradient(circle at 62% 32%, var(--butterfly-accent) 0 5%, transparent 6%),
    radial-gradient(ellipse at 32% 72%, var(--butterfly-accent) 0 7%, transparent 8%),
    linear-gradient(145deg, var(--butterfly-accent) 0 5%, transparent 6% 100%),
    linear-gradient(135deg, var(--butterfly-color), color-mix(in srgb, var(--butterfly-color) 35%, #180d25));
  box-shadow: inset 0 0 9px #fff8, inset 0 -7px 10px #0005;
  backface-visibility: visible;
  transform-style: preserve-3d;
  animation: butterfly-flap var(--butterfly-flap) ease-in-out var(--butterfly-delay) infinite alternate;
}

.butterfly__wing--left {
  left: 0;
  border-radius: 90% 20% 75% 35%;
  clip-path: polygon(100% 50%, 65% 6%, 15% 0, 0 35%, 18% 78%, 68% 100%);
  transform-origin: 100% 52%;
}

.butterfly__wing--right {
  right: 0;
  border-radius: 20% 90% 35% 75%;
  clip-path: polygon(0 50%, 35% 6%, 85% 0, 100% 35%, 82% 78%, 32% 100%);
  transform-origin: 0 52%;
}

.butterfly__body {
  position: absolute;
  top: 15%;
  left: 50%;
  z-index: 3;
  width: 8%;
  height: 70%;
  border-radius: 50%;
  background: linear-gradient(90deg, #110b18, #6a4a50 48%, #110b18);
  box-shadow: 0 0 5px var(--butterfly-accent);
  transform: translateX(-50%);
}

.butterfly__body::before,
.butterfly__body::after {
  position: absolute;
  top: -21%;
  width: 120%;
  height: 45%;
  border-top: 1px solid var(--butterfly-accent);
  content: '';
}

.butterfly__body::before { right: 55%; transform: rotate(28deg); transform-origin: right center; }
.butterfly__body::after { left: 55%; transform: rotate(-28deg); transform-origin: left center; }

@keyframes butterfly-flap {
  0%, 100% { transform: rotateY(20deg) rotateZ(-7deg) scaleX(1); }
  50% { transform: rotateY(76deg) rotateZ(-2deg) scaleX(.82); }
}

@keyframes butterfly-drift {
  0% { transform: translate3d(-12px, 12px, var(--butterfly-depth)) rotateZ(-7deg) rotateY(-12deg); }
  25% { transform: translate3d(34px, -28px, calc(var(--butterfly-depth) + 35px)) rotateZ(8deg) rotateY(12deg); }
  50% { transform: translate3d(-15px, -58px, calc(var(--butterfly-depth) - 18px)) rotateZ(-4deg) rotateY(-9deg); }
  75% { transform: translate3d(-40px, 18px, calc(var(--butterfly-depth) + 25px)) rotateZ(10deg) rotateY(15deg); }
  100% { transform: translate3d(-12px, 12px, var(--butterfly-depth)) rotateZ(-7deg) rotateY(-12deg); }
}

@keyframes constellation-pulse {
  from { opacity: .34; transform: scale(.75) translateZ(0); }
  to { opacity: 1; transform: scale(1.2) translateZ(30px); }
}

.sunflower-field {
  position: absolute;
  right: 2vw;
  bottom: -2vh;
  z-index: 5;
  width: 420px;
  height: 410px;
  transform: translateZ(130px) rotateY(-8deg);
  transform-style: preserve-3d;
  display: none;
}

.botanical-garden {
  position: absolute;
  right: 1vw;
  bottom: -4vh;
  left: auto;
  z-index: 4;
  width: min(270px, 22vw);
  height: min(275px, 32vh);
  transform: translateZ(125px) rotateY(-8deg);
  transform-style: preserve-3d;
  pointer-events: none;
}

.botanical-garden svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 25px 25px #0008);
}

.botanical-stem {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: stem-grow 2.5s ease forwards;
}

.botanical-plant {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: botanical-sway 6.5s ease-in-out var(--flower-delay, 0s) infinite alternate;
}

.botanical-leaf,
.botanical-flower {
  animation: botanical-bloom 1.7s cubic-bezier(.2,.75,.25,1) both;
}

.botanical-leaf { animation-delay: var(--flower-delay, .4s); }
.botanical-flower { animation-delay: var(--flower-delay, .7s); }

.botanical-seed { opacity: .84; }

@keyframes stem-grow { to { stroke-dashoffset: 0; } }

@keyframes botanical-sway {
  0% { transform: rotate(-1.1deg) translateX(-1px); }
  50% { transform: rotate(0deg) translateX(0); }
  100% { transform: rotate(1.4deg) translateX(2px); }
}

@keyframes botanical-bloom {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sunflower {
  position: absolute;
  bottom: 0;
  width: 170px;
  height: 170px;
  transform-origin: bottom center;
  animation: sunflower-sway 5s ease-in-out infinite alternate;
}

.sunflower::after {
  position: absolute;
  bottom: -190px;
  left: 50%;
  width: 8px;
  height: 250px;
  border-radius: 100%;
  background: linear-gradient(90deg, #315122, #78a23e, #1c381b);
  content: '';
  transform: translateX(-50%) rotate(3deg);
  transform-origin: top center;
}

.sunflower__petals,
.sunflower__center,
.sunflower i {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.sunflower__petals {
  inset: 13px;
  background: repeating-conic-gradient(#f7d238 0deg 12deg, #c88712 12deg 20deg);
  box-shadow: 0 0 20px #ffc92977;
  transform: rotate(8deg);
}

.sunflower__petals::after {
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: repeating-conic-gradient(#ffe77a 0deg 7deg, transparent 7deg 20deg);
  content: '';
}

.sunflower__center {
  inset: 51px;
  z-index: 2;
  background: radial-gradient(circle at 30% 25%, #8e571c, #38200e 62%, #160d08);
  box-shadow: inset 0 0 0 5px #bb7a1c, 0 0 15px #261509;
}

.sunflower i {
  top: 81px;
  left: 27px;
  z-index: 3;
  width: 27px;
  height: 13px;
  border-radius: 100% 0;
  background: #6f9a36;
  transform: rotate(-34deg);
}

.sunflower--left { left: 5px; bottom: -7px; transform: scale(.8) rotate(-8deg); }
.sunflower--right { right: -6px; bottom: 30px; transform: scale(1.12) rotate(10deg); animation-delay: -1.2s; }
.sunflower--small { left: 140px; bottom: -25px; transform: scale(.55) rotate(-4deg); animation-delay: -.5s; }

@keyframes sunflower-sway {
  to { margin-left: 8px; }
}

.flower__leaf {
  background-image: linear-gradient(to top, #9c650c, #eebd30 45%, #fff2a6) !important;
  box-shadow: inset 0 0 1.5vmin #ffec9d88 !important;
}

.flower__white-circle {
  background: #ffda53 !important;
}

.flower__white-circle::after {
  background-image: radial-gradient(ellipse, #754008, #e8a91e) !important;
}

.flower__light {
  background-color: #ffe28c !important;
}

.flower__leafs::after {
  background-color: #f8d55e !important;
}

.hearts,
.moments {
  position: absolute;
  inset: 0;
  z-index: 15;
  overflow: hidden;
}

.heart {
  position: absolute;
  bottom: -8vh;
  color: var(--heart-color, #e8bc49);
  font-size: var(--heart-size, 20px);
  opacity: 0;
  text-shadow: 0 0 14px #f3ce5e88;
  animation: heart-rise var(--heart-time, 8s) linear var(--heart-delay, 0s) infinite;
}

@keyframes heart-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.4) rotate(0deg); }
  12% { opacity: .85; }
  75% { opacity: .6; }
  100% { opacity: 0; transform: translate3d(var(--heart-drift, 30px), -115vh, 0) scale(1.15) rotate(25deg); }
}

.moment {
  position: absolute;
  top: var(--moment-top);
  left: var(--moment-left);
  width: min(190px, 18vw);
  padding: 10px;
  border: 1px solid #f5d97842;
  border-radius: 3px;
  background: #10170ed9;
  box-shadow: 0 15px 45px #0008;
  opacity: 0;
  transform: translateY(18px) rotate(var(--moment-rotate));
  animation: moment-show 1.2s ease var(--moment-delay) forwards;
  backdrop-filter: blur(8px);
  pointer-events: auto;
}

.moment-photo,
.moment-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  object-fit: contain;
  background: #242a1d;
}

.moment-message {
  padding: 10px 3px 2px;
  color: var(--cream);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.05;
}

.moment-label {
  display: block;
  margin-top: 8px;
  color: var(--gold);
  font-size: 8px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

@keyframes moment-show {
  to { opacity: .96; transform: translateY(0) rotate(var(--moment-rotate)); }
}

.garden-caption {
  position: absolute;
  right: auto;
  bottom: 3vh;
  left: 50%;
  z-index: 40;
  width: min(390px, 36vw);
  padding: 10px 16px;
  border-left: 1px solid #f3ce5e66;
  background: linear-gradient(90deg, #090d08e8, transparent);
  text-align: center;
  transform: translateX(-50%);
  animation: caption-breathe 6s ease-in-out infinite alternate;
}

.garden-caption span {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 3px;
}

.garden-caption p {
  margin: 12px 0 0;
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: 16px;
  font-style: italic;
  line-height: 1.35;
}

@keyframes caption-breathe {
  from { opacity: .78; }
  to { opacity: 1; }
}

.music-toggle {
  position: absolute;
  right: 7vw;
  top: 7vh;
  z-index: 30;
  width: 39px;
  height: 39px;
  border: 1px solid #f3ce5e66;
  border-radius: 50%;
  background: #10170ebd;
  color: var(--gold);
  cursor: pointer;
  font-size: 17px;
  pointer-events: auto;
}

.music-toggle.is-playing {
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  50% { box-shadow: 0 0 0 9px #f3ce5e12; }
}

.final-message {
  position: absolute;
  top: 22%;
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 31;
  width: min(340px, 34vw);
  max-width: 340px;
  color: var(--cream);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 25px;
  font-style: italic;
  line-height: 1.05;
  white-space: pre-line;
  opacity: 0;
  text-align: center;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 1s ease;
}

.final-message.visible {
  opacity: 1;
}

.media-viewer {
  width: min(860px, calc(100vw - 32px));
  max-width: 860px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 1px solid #f3ce5e66;
  border-radius: 8px;
  padding: 18px;
  background: #0d150ddd;
  color: var(--cream);
}

.media-viewer::backdrop {
  background: #020603e8;
  backdrop-filter: blur(8px);
}

.media-viewer img,
.media-viewer video {
  display: block;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  background: #050805;
}

.media-viewer p {
  margin: 14px 0 0;
  color: var(--cream);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 23px;
  font-style: italic;
  line-height: 1.2;
}

.viewer-close {
  position: absolute;
  top: 4px;
  right: 10px;
  z-index: 2;
  border: 0;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  font-size: 30px;
}

.moment[data-media] {
  cursor: pointer;
}

.moment[data-media]:hover {
  border-color: #f5d978aa;
  box-shadow: 0 18px 55px #0009, 0 0 22px #f3ce5e22;
}

.moments.is-focused .moment--media {
  animation: memory-focus 1.1s ease-in-out 2 alternate;
}

@keyframes memory-focus {
  to { border-color: var(--gold); box-shadow: 0 18px 55px #000b, 0 0 30px #f3ce5e66; transform: translateY(-5px) scale(1.04) rotate(var(--moment-rotate)); }
}

@media (max-width: 760px) {
  body { overflow-x: hidden; overflow-y: auto; }
  .experience { display: flex; min-height: 0; flex-direction: column; overflow: visible; }
  .love-copy { position: relative; top: auto; left: auto; order: 2; width: 100%; padding: 6vh 7vw 8vh; }
  h1 { font-size: clamp(42px, 14vw, 62px); line-height: .92; letter-spacing: -1.5px; }
  .intro { width: min(270px, 100%); margin: 17px 0; font-size: clamp(11px, 3.2vw, 12px); line-height: 1.65; }
  .garden { position: relative; inset: auto; order: 1; width: 100%; height: 900px; min-height: 900px; transform: none; overflow: hidden; }
  .garden .flowers { bottom: calc(100% - 78svh - 10vmin); transform: translateX(-50%) translateZ(55px) scale(.7); transition: bottom 1.8s cubic-bezier(.2,.8,.2,1), transform 1.8s cubic-bezier(.2,.8,.2,1); }
  .botanical-garden { right: -4vw; bottom: calc(100% - 76svh); width: 180px; height: 190px; transform: translateZ(85px) rotateY(-8deg); transition: right 1.8s cubic-bezier(.2,.8,.2,1), left 1.8s cubic-bezier(.2,.8,.2,1), bottom 1.8s cubic-bezier(.2,.8,.2,1), transform 1.8s cubic-bezier(.2,.8,.2,1); }
  .heart-constellation { top: 3%; right: 2%; width: 180px; height: 160px; transform: translateZ(70px) scale(.72) rotate(-8deg); }
  .sunflower-field { right: -17vw; bottom: -3vh; transform: translateZ(90px) scale(.7) rotateY(-8deg); }
  .moment { width: min(42vw, 160px); }
  .moment-photo, .moment-video { aspect-ratio: 16 / 9; }
  .moment-message { font-size: 16px; }
  .garden-caption { top: calc(100svh + 24px); right: auto; bottom: auto; left: 50%; width: 82vw; padding: 7px 10px; text-align: center; transform: translateX(-50%); }
  .garden-caption span { font-size: 8px; letter-spacing: 2px; }
  .garden-caption p { margin-top: 5px; font-size: 13px; }
  .music-toggle { top: 16px; right: 7vw; }
  .final-message { top: 20px; right: auto; bottom: auto; left: 50%; width: 82vw; max-width: 300px; margin: 0; font-size: 21px; transform: translateX(-50%); }
  .moments { transform: translateY(100svh); transition: transform .8s ease; }
  body.started .moments { transform: translateY(0); }
  body.mobile-floral-intro .garden .flowers { bottom: calc(100% - 54svh - 10vmin); transform: translateX(-50%) translateZ(120px) scale(.88); }
  body.mobile-floral-intro .botanical-garden { right: auto; left: 50%; bottom: calc(100% - 48svh); transform: translateX(-50%) translateZ(130px) scale(1.04); }
  body.mobile-floral-intro .garden-caption,
  body.mobile-floral-intro .heart-constellation,
  body.mobile-floral-intro .music-toggle { opacity: 0; pointer-events: none; }
  body.mobile-floral-intro .garden-caption { animation-play-state: paused; }
  body.mobile-floral-settled .garden-caption,
  body.mobile-floral-settled .heart-constellation,
  body.mobile-floral-settled .music-toggle { opacity: 1; pointer-events: auto; }
  body.mobile-floral-settled .garden-caption { animation-play-state: running; }
  #butterfly-canvas { opacity: .96; }
  .butterfly-gif { width: calc(145px * var(--gif-size)); }
  .butterflies.butterflies--gif { z-index: 22; }
}

@media (prefers-reduced-motion: reduce) {
  .butterfly-gif { animation: none; }
}

@media (max-width: 760px) and (max-height: 700px) {
  .love-copy { padding-top: 3vh; }
  h1 { font-size: 48px; }
  .intro { margin: 12px 0; line-height: 1.5; }
  .gold-button { padding: 12px 15px; }
  .botanical-garden { bottom: calc(100% - 76svh); width: 155px; height: 165px; }
  .moment { width: 138px; padding: 7px; }
  .moment-message { padding-top: 7px; font-size: 15px; }
  .moment-label { margin-top: 5px; }
}

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