@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playwrite+BR:wght@100..400&display=swap');

:root {
  color-scheme: light;
  --wine: #7b2d4b;
  --wine-deep: #59203a;
  --pink: #f7d9df;
  --pink-soft: #fff1f3;
  --paper: #fffaf2;
  --paper-shadow: #e9ddca;
  --ink: #453a38;
  --muted: #877a73;
  --sage: #89947a;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --script: 'Playwrite BR', 'Segoe Print', 'Bradley Hand', cursive;
  font-family: var(--sans);
  color: var(--ink);
  background: #f8f2e9;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { min-width: 320px; min-height: 100%; background: #f8f2e9; }
body {
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 15% 14%, rgba(247, 217, 223, .35), transparent 28rem),
    radial-gradient(ellipse at 88% 82%, rgba(228, 216, 193, .34), transparent 27rem),
    #f8f2e9;
}

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .19;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
}

.page-shell {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 28px 18px;
}

.entrance {
  width: min(100%, 480px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 20px 38px;
  text-align: center;
}
.envelope-scene {
  position: relative;
  z-index: 1;
  width: min(100%, 320px);
  aspect-ratio: 1.53;
  margin: 0 0 28px;
  perspective: 900px;
  filter: drop-shadow(0 13px 15px rgba(81, 58, 39, .12));
  transform: scale(1);
  transform-origin: center;
  transition: transform 1.42s cubic-bezier(.16,.78,.2,1) .12s;
}
.envelope-back {
  position: absolute;
  inset: 14% 2% 5%;
  z-index: 1;
  border: 1px solid rgba(136, 103, 76, .28);
  border-radius: 10px;
  background: linear-gradient(145deg, #f1e0cf, #dfc3a8);
}
.envelope-pocket {
  position: absolute;
  inset: 14% 2% 5%;
  z-index: 3;
  clip-path: polygon(0 0, 50% 57%, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(135deg, #f0dac3 0%, #e8d0b8 52%, #e0c3a7 100%);
  border-radius: 10px;
}
.envelope-flap {
  position: absolute;
  top: 14%;
  left: 2%;
  z-index: 5;
  width: 96%;
  height: 53%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(160deg, #f3dfcb, #e4c7aa);
  transform: rotateX(0deg);
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform .36s cubic-bezier(.2,.72,.25,1);
}
.envelope-address {
  position: absolute;
  bottom: 20%;
  left: 17%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
}
.address-row { display: grid; grid-template-columns: 35px 1fr; align-items: baseline; column-gap: 5px; color: #725347; font-size: .88rem; line-height: 1.05; }
.address-row small { color: #967a68; font-size: .57rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.address-row span { color: var(--wine); font-family: var(--script); font-size: clamp(1rem, 4vw, 1.24rem); }
.address-recipient span { font-size: clamp(1.15rem, 4.3vw, 1.38rem); }
.envelope-stamp {
  position: absolute;
  top: 38%;
  right: 10%;
  z-index: 4;
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1px dashed rgba(137, 100, 75, .55);
  border-radius: 50%;
  background: rgba(255, 250, 242, .42);
  color: #9b7862;
}
.envelope-stamp svg { display: block; width: 100%; height: 100%; }
.entrance.is-opening {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100vw;
  height: 100svh;
  padding: 0;
  pointer-events: none;
}
.entrance.is-opening .envelope-scene {
  position: fixed;
  top: var(--opening-envelope-top);
  left: var(--opening-envelope-left);
  width: var(--opening-envelope-width);
  margin: 0;
  transform: none;
  transition: none;
  will-change: transform;
}
.entrance.is-opening h1,
.entrance.is-opening > p,
.entrance.is-opening .entrance-button {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .24s ease, transform .3s ease;
}
.envelope-scene.is-opening .envelope-flap { transform: rotateX(180deg); }
.garden-stage.is-unfolding {
  position: fixed;
  z-index: 3;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
}
.garden-stage.is-unfolding::before,
.garden-stage.is-unfolding::after { display: none; }
.garden-stage.is-unfolding .letter-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(calc(100vw - 26px), 650px);
  margin: 0;
  transform: translate(-50%, var(--letter-start-y)) scale(.14);
  transform-origin: top center;
  will-change: transform;
  animation: none;
}
.letter-card.has-emerged { animation: none; }
.entrance h1 {
  max-width: 390px;
  margin: 0;
  color: #5e514a;
  font-family: var(--serif);
  font-size: clamp(1.52rem, 5vw, 2rem);
  font-weight: 400;
  line-height: 1.35;
}
.entrance p {
  margin: 13px 0 27px;
  color: #786e67;
  font-size: 1rem;
  line-height: 1.65;
}

.button {
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 12px 27px;
  font: 600 1rem/1.2 var(--sans);
  letter-spacing: .01em;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(.98); }
.button:focus-visible { outline: 3px solid #bd7890; outline-offset: 4px; }
.button:disabled { cursor: wait; opacity: .82; transform: none; }
.button-primary {
  color: #fffaf6;
  background: var(--wine);
  box-shadow: 0 8px 18px rgba(123, 45, 75, .17);
}
.button-primary:hover { background: var(--wine-deep); box-shadow: 0 10px 22px rgba(123, 45, 75, .23); }
.entrance-button { min-width: 146px; }
.button-secondary {
  color: var(--wine);
  background: #fff9f6;
  border-color: rgba(123, 45, 75, .23);
  box-shadow: 0 5px 14px rgba(89, 32, 58, .08);
}
.button-secondary:hover { background: var(--pink-soft); }

.garden-stage {
  position: relative;
  display: grid;
  width: min(100%, 760px);
  place-items: center;
  padding: 16px 0;
  isolation: isolate;
}
.garden-stage::before,
.garden-stage::after {
  position: absolute;
  z-index: -1;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  content: '';
  pointer-events: none;
  filter: blur(3px);
}
.garden-stage::before { top: 7%; left: -12%; background: radial-gradient(circle, rgba(247,217,223,.48), transparent 68%); }
.garden-stage::after { right: -12%; bottom: 8%; background: radial-gradient(circle, rgba(204,190,158,.3), transparent 69%); }
.letter-card,
.final-card {
  position: relative;
  width: min(100%, 650px);
  overflow: hidden;
  border: 1px solid rgba(143, 113, 83, .25);
  border-radius: 7px 7px 15px 7px;
  background:
    linear-gradient(90deg, rgba(146, 112, 75, .035) 0 1px, transparent 1px 100%),
    var(--paper);
  background-size: 31px 31px, auto;
  box-shadow: 0 20px 52px rgba(81, 58, 39, .14), 0 3px 8px rgba(81, 58, 39, .07);
  animation: card-arrive .8s cubic-bezier(.2,.75,.25,1) both;
}
.card-edge {
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(158, 129, 100, .21);
  border-radius: 4px 4px 11px 4px;
  pointer-events: none;
}
.letter-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 27px clamp(24px, 6vw, 48px) 0;
}
.recipient-mark { display: flex; align-items: center; gap: 9px; }
.brand-flower { width: 28px; height: 28px; object-fit: contain; }
.from-to {
  margin: 0;
  color: var(--wine);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.postmark {
  color: #9d7d6d;
  font-family: var(--script);
  font-size: .76rem;
  transform: rotate(-7deg);
}
.letter-tools { display: flex; align-items: center; justify-content: flex-end; gap: 13px; }
.music-toggle {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(123, 45, 75, .18);
  border-radius: 999px;
  padding: 7px 11px;
  color: #765160;
  background: rgba(255, 250, 246, .82);
  font: 600 .68rem/1.2 var(--sans);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.music-toggle:hover { color: var(--wine); background: #fff1f3; transform: translateY(-1px); }
.music-toggle:focus-visible { outline: 3px solid #bd7890; outline-offset: 3px; }
.music-toggle.is-playing { color: var(--wine); background: #fff1f3; }
.music-note { font-size: .95rem; }
.letter-body { position: relative; padding: 27px clamp(27px, 7vw, 64px) 13px; }
.eyebrow {
  margin: 0 0 16px;
  color: #9a756e;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}
.handwritten { font-family: var(--script); font-weight: 300; }
.title-line {
  margin: 0 auto 23px;
  color: var(--wine);
  font-size: clamp(1.6rem, 5.9vw, 2.35rem);
  line-height: 1.65;
  text-align: center;
}
.title-line:focus, .final-words:focus { outline: none; }
.main-message {
  max-width: 490px;
  margin: 0 auto;
  color: #514743;
  font-size: clamp(1rem, 2.8vw, 1.08rem);
  line-height: 1.9;
  text-align: center;
}
.photo-gallery {
  display: grid;
  width: min(100%, 480px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(7px, 2vw, 13px);
  margin: 24px auto 2px;
  padding: 3px 6px 8px;
}
.photo-frame {
  min-width: 0;
  margin: 0;
  border: 1px solid rgba(143, 113, 83, .2);
  padding: 7px 7px 13px;
  background: #fffdf9;
  box-shadow: 0 5px 13px rgba(81, 58, 39, .12);
  opacity: 1;
}
.photo-frame-one { --photo-angle: -2.2deg; --photo-start-angle: -13deg; }
.photo-frame-two { --photo-angle: 1.4deg; --photo-start-angle: 12deg; margin-top: 7px; }
.photo-frame-three { --photo-angle: -1deg; --photo-start-angle: -11deg; }
.photo-frame-four { --photo-angle: 1.8deg; --photo-start-angle: 13deg; grid-column: 2; grid-row: 2; margin-top: 6px; }
.photo-frame-five { --photo-angle: -1.5deg; --photo-start-angle: -12deg; grid-column: 3; grid-row: 2; margin-top: 2px; }
.photo-frame-six { --photo-angle: 2deg; --photo-start-angle: -14deg; grid-column: 1; grid-row: 2; margin-top: 4px; }
.garden-stage.is-revealed .photo-frame { animation: photo-arrive 1.25s cubic-bezier(.16,1,.3,1) both; }
.garden-stage.is-revealed .photo-frame:nth-child(1) { animation-delay: .12s; }
.garden-stage.is-revealed .photo-frame:nth-child(2) { animation-delay: .35s; }
.garden-stage.is-revealed .photo-frame:nth-child(3) { animation-delay: .58s; }
.garden-stage.is-revealed .photo-frame:nth-child(4) { animation-delay: .81s; }
.garden-stage.is-revealed .photo-frame:nth-child(5) { animation-delay: 1.04s; }
.garden-stage.is-revealed .photo-frame:nth-child(6) { animation-delay: 1.27s; }
.cely-photo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 190px;
  border-radius: 1px;
  background: #f3ece3;
  object-fit: contain;
}
.question-block { display: flex; flex-direction: column; align-items: center; padding: 27px 0 5px; }
.question-line {
  margin: 0 0 18px;
  color: #774b57;
  font-size: clamp(1.1rem, 4vw, 1.42rem);
  line-height: 1.7;
  text-align: center;
}
.response-block { padding-top: 22px; animation: reveal-soft .55s ease both; }
.response-copy {
  max-width: 490px;
  margin: 0 auto 23px;
  color: #5a4646;
  font-size: 1rem;
  line-height: 1.8;
  text-align: center;
}
.response-flirt {
  max-width: 460px;
  margin: 0 auto 24px;
  color: var(--wine);
  font-size: clamp(1.05rem, 3.7vw, 1.32rem);
  line-height: 1.75;
  text-align: center;
}
.choice-card {
  max-width: 540px;
  margin: 0 auto 24px;
  border: 1px dashed rgba(123, 45, 75, .27);
  border-radius: 17px;
  padding: 17px clamp(13px, 4vw, 22px) 14px;
  background: rgba(255, 250, 246, .76);
}
.choice-disclosure {
  max-width: 460px;
  margin: 0 auto;
  color: #79645c;
  font-size: .86rem;
  line-height: 1.7;
  text-align: center;
}
.choice-question {
  margin: 11px 0 12px;
  color: var(--wine);
  font-size: clamp(1.05rem, 3.6vw, 1.25rem);
  text-align: center;
}
.choice-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 9px;
}
.choice-button {
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  font-size: .9rem;
}
.choice-button[aria-pressed="true"] {
  border-color: rgba(123, 45, 75, .62);
  background: var(--pink-soft);
  box-shadow: 0 0 0 2px rgba(123, 45, 75, .1);
}
.choice-feedback {
  min-height: 1.4em;
  margin: 11px 0 0;
  color: var(--wine);
  font-size: .84rem;
  line-height: 1.5;
  text-align: center;
}
.choice-skip-note {
  margin: 14px auto 0;
  color: #847775;
  font-size: .78rem;
  line-height: 1.55;
  text-align: center;
}
.choice-skip {
  display: block;
  min-height: 44px;
  margin: 2px auto 0;
  border: 0;
  border-radius: 999px;
  padding: 10px 15px;
  color: #766569;
  background: transparent;
  font: 500 .85rem/1.35 var(--sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.choice-skip:hover { color: var(--wine); }
.choice-skip:disabled { opacity: .55; cursor: wait; }
.choice-skip:focus-visible { outline: 3px solid #bd7890; outline-offset: 2px; }
.compliment-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  border-top: 1px dashed rgba(123, 45, 75, .24);
  padding: 21px 0 2px;
}
.choice-card[hidden],
.compliment-wrap[hidden] { display: none !important; }
.compliment-meta { display: inline-flex; align-items: center; gap: 7px; color: #907273; font-size: .76rem; letter-spacing: .045em; }
.tiny-flower { color: #b36d80; font-size: 1rem; }
.compliment {
  min-height: 4.1em;
  max-width: 495px;
  margin: 0;
  color: var(--wine);
  font-size: clamp(1.12rem, 3.9vw, 1.48rem);
  line-height: 1.8;
  text-align: center;
}
.compliment.motion-0 { animation: compliment-rise var(--motion-duration, .42s) cubic-bezier(.2,.8,.2,1) both; }
.compliment.motion-1 { animation: compliment-unfold var(--motion-duration, .42s) ease-out both; }
.compliment.motion-2 { animation: compliment-slide-left var(--motion-duration, .42s) ease-out both; }
.compliment.motion-3 { animation: compliment-slide-right var(--motion-duration, .42s) ease-out both; }
.compliment.motion-4 { animation: compliment-bloom var(--motion-duration, .42s) cubic-bezier(.2,.8,.2,1) both; }
.compliment.motion-5 { animation: compliment-sway var(--motion-duration, .42s) ease-out both; }
.compliment.motion-6 { animation: compliment-focus var(--motion-duration, .42s) ease-out both; }
.compliment.motion-7 { animation: compliment-ink var(--motion-duration, .42s) ease-out both; }
.compliment.motion-8 { animation: compliment-bounce var(--motion-duration, .42s) cubic-bezier(.2,.8,.2,1) both; }
.compliment.motion-9 { animation: compliment-twinkle var(--motion-duration, .42s) ease-out both; }
.garden-progress { position: relative; width: min(100%, 430px); height: 50px; margin: 0 auto; }
.garden-vine { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.garden-vine-base { fill: none; stroke: #c7cdb9; stroke-width: 1.35; stroke-dasharray: 1.6 2.8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.garden-vine-progress { fill: none; stroke: #829177; stroke-width: 1.8; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset .58s cubic-bezier(.2,.7,.2,1); vector-effect: non-scaling-stroke; }
.garden-blooms { position: absolute; inset: 0; }
.garden-bloom { position: absolute; color: var(--flower-color, #bd8291); font-family: var(--serif); font-size: clamp(9px, 2.5vw, 12px); line-height: 1; opacity: 0; filter: blur(1px); transform: translate(-50%, -50%) scale(.12) rotate(-28deg); transition: opacity .32s ease, filter .32s ease, transform .42s cubic-bezier(.2,.8,.2,1); }
.garden-bloom.is-bloomed { opacity: .96; filter: blur(0); transform: translate(-50%, -50%) scale(1) rotate(var(--flower-rotation, 0deg)); animation: bloom-open .5s cubic-bezier(.2,.8,.2,1) both; }
.garden-progress.is-finale .garden-bloom.is-bloomed {
  font-size: clamp(11px, 2.8vw, 15px);
  text-shadow: 0 0 8px rgba(217, 143, 163, .65), 0 0 15px rgba(228, 189, 138, .4);
  animation: final-bloom 1.5s cubic-bezier(.15,.85,.25,1) both;
}
.garden-caption { margin: -7px 0 -2px; color: #927a72; font-size: .69rem; letter-spacing: .035em; line-height: 1.5; text-align: center; }
.garden-caption.is-finale { color: var(--wine); font-size: .83rem; font-weight: 700; }
.letter-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 24px 30px;
}
.pressed-botanical { display: block; width: min(180px, 45vw); height: auto; margin: 2px auto 10px; object-fit: contain; }
.signature { max-width: 100%; margin: 0; color: #79645c; font-size: .81rem; line-height: 1.7; text-align: center; }
.signature span { color: var(--wine); font-weight: 700; }

.final-card {
  display: flex;
  min-height: 410px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 8vw, 64px) 24px;
  text-align: center;
  animation: card-arrive .75s cubic-bezier(.2,.75,.25,1) both;
}
.final-card .eyebrow { margin-bottom: 15px; }
.final-flower { width: 76px; height: 76px; margin: 0 auto 8px; object-fit: contain; }
.final-words { margin: 0; color: var(--wine); font-size: clamp(2.2rem, 9vw, 4rem); line-height: 1.55; animation: final-glow 2.8s ease-in-out infinite alternate; }
.discreet-heart { display: inline-block; margin-top: 5px; color: #b66b7d; font-size: 1.15rem; animation: heart-tender 2.4s ease-in-out infinite; }
.final-signoff { margin: 19px 0 0; color: #79645c; font-size: .9rem; line-height: 1.9; }
.final-signoff .handwritten { color: var(--wine); font-size: 1.2rem; }

.petal-layer { position: fixed; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.floating-petal {
  position: absolute;
  top: 52%;
  left: 50%;
  width: var(--size, 9px);
  height: calc(var(--size, 9px) * 1.5);
  border-radius: 90% 10% 90% 10%;
  background: var(--petal-color, #e8aeba);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--angle, 0deg));
  animation: petal-drift var(--duration, 3.2s) cubic-bezier(.18,.55,.4,1) forwards;
}
.floating-petal.sparkle {
  width: auto;
  height: auto;
  background: none;
  color: var(--petal-color, #c5935f);
  font-size: var(--size, 11px);
  line-height: 1;
}
.noscript-note { position: fixed; inset: auto 12px 10px; color: #695a53; font-size: .9rem; text-align: center; }

@keyframes card-arrive {
  from { opacity: 0; transform: translateY(21px) rotate(-.45deg) scale(.985); }
  to { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
@keyframes reveal-soft {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bloom-open {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.1) rotate(-36deg); }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1.28) rotate(7deg); }
  100% { opacity: .96; transform: translate(-50%, -50%) scale(1) rotate(var(--flower-rotation, 0deg)); }
}
@keyframes final-bloom {
  0% { opacity: 0; filter: blur(5px); transform: translate(-50%, -50%) scale(.08) rotate(-36deg); }
  62% { opacity: 1; filter: blur(0) drop-shadow(0 0 8px rgba(217, 143, 163, .85)); transform: translate(-50%, -50%) scale(1.7) rotate(12deg); }
  100% { opacity: 1; filter: blur(0) drop-shadow(0 0 4px rgba(217, 143, 163, .55)); transform: translate(-50%, -50%) scale(1.28) rotate(var(--flower-rotation, 0deg)); }
}
@keyframes photo-arrive {
  0% { opacity: 0; filter: blur(4px); transform: translateY(44px) rotate(var(--photo-start-angle)) scale(.58); }
  68% { opacity: 1; filter: blur(0) drop-shadow(0 10px 12px rgba(123, 45, 75, .2)); transform: translateY(-11px) rotate(var(--photo-start-angle)) scale(1.12); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0) rotate(var(--photo-angle)) scale(1); }
}
@keyframes compliment-rise { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes compliment-unfold { from { opacity: 0; transform: perspective(500px) rotateX(28deg) translateY(8px); } to { opacity: 1; transform: perspective(500px) rotateX(0) translateY(0); } }
@keyframes compliment-slide-left { from { opacity: 0; transform: translateX(var(--motion-x, 12px)); } to { opacity: 1; transform: translateX(0); } }
@keyframes compliment-slide-right { from { opacity: 0; transform: translateX(calc(0px - var(--motion-x, 12px))); } to { opacity: 1; transform: translateX(0); } }
@keyframes compliment-bloom { from { opacity: 0; transform: scale(.78) rotate(-8deg); } 72% { opacity: 1; transform: scale(1.06) rotate(2deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes compliment-sway { from { opacity: 0; transform: translateY(10px) rotate(calc(0deg - var(--motion-angle, 6deg))); } 65% { opacity: 1; transform: translateY(-2px) rotate(var(--motion-angle, 6deg)); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes compliment-focus { from { opacity: 0; filter: blur(5px); transform: scale(.96); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes compliment-ink { from { opacity: 0; letter-spacing: .11em; clip-path: inset(0 100% 0 0); } to { opacity: 1; letter-spacing: normal; clip-path: inset(0 0 0 0); } }
@keyframes compliment-bounce { 0% { opacity: 0; transform: translateY(13px) scale(.9); } 72% { opacity: 1; transform: translateY(-3px) scale(1.025); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes compliment-twinkle { from { opacity: 0; filter: brightness(1.4); transform: scale(.9) rotate(-2deg); } 55% { opacity: 1; filter: brightness(1.12); transform: scale(1.035) rotate(1deg); } to { opacity: 1; filter: brightness(1); transform: scale(1) rotate(0); } }
@keyframes petal-drift {
  0% { opacity: 0; transform: translate(-50%, -45%) rotate(var(--angle, 0deg)) scale(.65); }
  14% { opacity: 1; }
  52% { opacity: .95; transform: translate(calc(-50% + var(--dx-mid)), calc(-50% + var(--dy-mid))) rotate(var(--angle, 0deg)) scale(1.35); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(calc(var(--angle, 0deg) + 160deg)) scale(1.1); }
}
@keyframes final-glow {
  from { text-shadow: 0 0 0 rgba(183, 117, 137, 0); }
  to { text-shadow: 0 4px 24px rgba(183, 117, 137, .22); }
}
@keyframes heart-tender {
  0%, 100% { transform: scale(1); opacity: .76; }
  50% { transform: scale(1.13); opacity: 1; }
}

@media (min-width: 760px) {
  .page-shell { padding: 38px 28px; }
  .garden-stage { padding: 22px 0; }
  .letter-header { padding-top: 35px; }
  .letter-body { padding-top: 32px; }
  .letter-footer { padding-bottom: 37px; }
}
@media (max-width: 480px) {
  .page-shell { padding: 15px 13px; }
  .entrance { padding: 24px 14px 30px; }
  .envelope-scene { width: min(100%, 290px); margin-bottom: 24px; }
  .entrance p { max-width: 300px; font-size: .95rem; }
  .letter-card { border-radius: 5px 5px 12px 5px; }
  .card-edge { inset: 8px; }
  .letter-header { align-items: flex-start; padding: 21px 24px 0; }
  .letter-tools { flex-direction: column; align-items: flex-end; gap: 7px; }
  .postmark { margin-top: 2px; font-size: .65rem; }
  .letter-body { padding: 26px 25px 12px; }
  .title-line { line-height: 1.7; }
  .main-message { line-height: 1.8; }
  .response-copy { font-size: .97rem; }
  .compliment { min-height: 5.4em; }
  .letter-footer { padding: 8px 18px 25px; }
  .pressed-botanical { width: min(145px, 44vw); }
  .final-card { min-height: 350px; }
  .music-toggle { min-height: 34px; padding: 6px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .petal-layer { display: none !important; }
  .garden-stage.is-revealed .photo-frame { animation: none !important; }
}


@media (max-width: 560px) {
  .photo-gallery {
    width: min(100%, 360px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(9px, 3vw, 14px);
  }
  .photo-frame-four { grid-column: auto; }
  .photo-frame-five {
    grid-column: 1 / -1;
    width: calc(50% - 5px);
    justify-self: center;
  }
}