:root {
  --cream: #fbf6f0;
  --paper: #fffdf9;
  --ink: #2b2a28;
  --muted: #7b736b;
  --green: #2f4a3a;
  --rose: #c8406f;
  --rose-soft: #f7dfe7;
  --line: #ece3d8;
  --serif: 'Fraunces', 'Playfair Display', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--cream); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- bouquet SVG ---------- */
.bq { width: 100%; height: auto; display: block; overflow: visible; }
.bq .glow { opacity: .0; }
.bq .head, .bq .L, .bq .leaf, .bq .bow, .bq .sway, .bq .pop,
.bq .bow-band, .bq .loop, .bq .tails, .bq .knot { transform-origin: 0 0; }
/* paper pivots around the point where the stems are gathered */
.bq .sheet { transform-box: view-box; transform-origin: 300px 660px; }
.bq .wrap-front { transform-box: view-box; transform-origin: 300px 690px; }

/* Hover / tap a flower (recipient page, after it has bloomed) */
.bq .pop { transition: transform .28s cubic-bezier(.3, 1.6, .5, 1), filter .28s ease; }
.bq.touchable .pop { cursor: pointer; }
.bq .pop.lift { transform: scale(1.16); filter: drop-shadow(0 6px 10px rgba(90, 30, 45, .28)); }
.bq.touchable .glow, .bq.touchable .wrap-back, .bq.touchable .stems, .bq.touchable .greens,
.bq.touchable .wrap-front, .bq.touchable .bow { pointer-events: none; }
/* Once bloomed, stop the one-time animations so flowers can be re-layered safely */
.bloomed .head, .bloomed .L, .bloomed .leaf, .bloomed .stem, .bloomed .sheet, .bloomed .wrap-front,
.bloomed .bow-band, .bloomed .loop, .bloomed .tails, .bloomed .knot { animation: none !important; }

/* Animation only runs when a parent has .play.
   1. flowers spawn in   2. the paper wraps around them (--wrap)   3. the bow is tied (--bow) */
.play .glow { transform-box: fill-box; transform-origin: center; animation: fs-glow 2.6s ease-out both .3s; }
.play .stem { stroke-dasharray: 1 1; animation: fs-grow 1s cubic-bezier(.4, .1, .3, 1) both; animation-delay: calc(.1s + var(--i) * .04s); }
.play .leaf { animation: fs-leaf .9s cubic-bezier(.3, 1.3, .5, 1) both; animation-delay: calc(.3s + var(--i) * .06s); }
.play .head { animation: fs-bloom 1.1s cubic-bezier(.3, 1.35, .5, 1) both; animation-delay: calc(.5s + var(--i) * .12s); }
.play .L { animation: fs-unfurl 1.05s cubic-bezier(.25, .9, .3, 1) both; animation-delay: calc(.5s + var(--i) * .12s + var(--l) * .16s); }

.play .sheet-l { animation: fs-sheet-l .85s cubic-bezier(.2, .9, .3, 1.08) both; animation-delay: var(--wrap); }
.play .sheet-r { animation: fs-sheet-r .85s cubic-bezier(.2, .9, .3, 1.08) both; animation-delay: calc(var(--wrap) + .1s); }
.play .wrap-front { animation: fs-wrap-front .8s cubic-bezier(.2, .9, .3, 1.06) both; animation-delay: calc(var(--wrap) + .35s); }

.play .bow-band { animation: fs-band .4s cubic-bezier(.3, .8, .3, 1) both; animation-delay: var(--bow); }
.play .loop-l { animation: fs-loop-l .55s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--bow) + .3s); }
.play .loop-r { animation: fs-loop-r .55s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--bow) + .45s); }
.play .tails { animation: fs-tails .5s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--bow) + .6s); }
.play .knot { animation: fs-knot .4s cubic-bezier(.3, 1.8, .5, 1) both; animation-delay: calc(var(--bow) + .75s); }
.play .sway, .sway-on .sway { animation: fs-sway 4.8s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.73s); }

@keyframes fs-grow  { from { stroke-dashoffset: -1; } to { stroke-dashoffset: 0; } }
@keyframes fs-leaf  { from { transform: scale(0) rotate(-12deg); } }
@keyframes fs-bloom { from { transform: scale(0) rotate(-70deg); } }
@keyframes fs-unfurl{ from { transform: scale(.2) rotate(-40deg); opacity: 0; } }
/* back sheets swing in from outside and settle behind the flowers */
@keyframes fs-sheet-l { from { transform: rotate(-38deg) scale(1.1); opacity: 0; } 35% { opacity: 1; } }
@keyframes fs-sheet-r { from { transform: rotate(38deg) scale(1.1); opacity: 0; } 35% { opacity: 1; } }
/* front cone closes in snugly around the stems */
@keyframes fs-wrap-front { from { transform: translateY(46px) scaleX(1.55) scaleY(.85); opacity: 0; } 40% { opacity: 1; } }
/* ribbon wraps across, loops pull out, tails drop, knot cinches */
@keyframes fs-band   { from { transform: scaleX(0); } }
@keyframes fs-loop-l { from { transform: scale(0) rotate(50deg); } }
@keyframes fs-loop-r { from { transform: scale(0) rotate(-50deg); } }
@keyframes fs-tails  { from { transform: scaleY(0); } }
@keyframes fs-knot   { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes fs-sway  { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
@keyframes fs-glow  { 0% { opacity: 0; transform: scale(.3); } 40% { opacity: 1; } 100% { opacity: .75; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .play *, .sway-on * { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}