:root {
  color-scheme: dark;
  --ink: #f2ebe5;
  --muted: #bbaaa4;
  --champagne: #ad8b62;
  --night: #090506;
  --rose: #a6192e;
  --leaf: #425940;
  --font-body: "Segoe UI", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;
  --stem: 0;
  --leaves: 0;
  --bud: 0;
  --bloom: 0;
  --outer-open: 0;
  --mid-open: 0;
  --inner-open: 0;
  --heart-open: 0;
  --detail: 0;
  --sway-angle: 0deg;
  --final: 0;
  --ambient-light: 0;
  --scroll-progress: 0;
}

* { box-sizing: border-box; }

html {
  background: var(--night);
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 20%, rgba(118, 10, 31, .2), transparent 31rem),
    radial-gradient(circle at 24% 74%, rgba(76, 14, 24, .12), transparent 29rem),
    linear-gradient(180deg, #090506 0%, #12070a 54%, #080405 100%);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .09;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.ambient {
  position: fixed;
  z-index: 0;
  width: 100vw;
  height: 100svh;
  right: 0;
  top: 0;
  background: radial-gradient(circle at 108% 26%, rgba(151, 15, 40, calc(.08 + var(--ambient-light) * .16)), transparent 58%);
  transition: background-color .3s linear;
  pointer-events: none;
}

main { position: relative; z-index: 2; }

.rose-stage {
  position: fixed;
  z-index: 1;
  inset: 0 0 auto auto;
  width: min(78vw, 24rem);
  height: 100svh;
  height: 100dvh;
  pointer-events: none;
  transform: translate3d(calc(var(--final) * -18vw), calc(var(--final) * -9svh), 0) scale(calc(1 + var(--final) * .06));
  transform-origin: 50% 55%;
}

.rose {
  position: absolute;
  width: 100%;
  height: 90%;
  right: -9%;
  bottom: -9%;
  overflow: visible;
  transform-origin: 50% 100%;
  transform: rotate(calc(-1.2deg + (var(--stem) * 1.5deg) + var(--sway-angle)));
  filter: saturate(1.04) contrast(1.02);
}

.stem,
.branch {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--stem));
}

.stem-shadow { stroke: #030804; stroke-width: 9; opacity: .58; }
.stem-main { stroke: url(#stemTone); stroke-width: 5.4; }
.stem-glint { stroke: rgba(191, 211, 177, .28); stroke-width: 1.15; }
.branch { stroke: #42583f; stroke-width: 3.6; stroke-dashoffset: calc(1 - clamp(0, (var(--leaves) - .04) * 1.65, 1)); }
.branch-right-high { stroke-dashoffset: calc(1 - clamp(0, (var(--leaves) - .14) * 1.8, 1)); }
.branch-left-low { stroke-dashoffset: calc(1 - clamp(0, (var(--leaves) - .27) * 2, 1)); }
.branch-right-low { stroke-dashoffset: calc(1 - clamp(0, (var(--leaves) - .39) * 2.2, 1)); }
.branch-bottom { stroke-dashoffset: calc(1 - clamp(0, (var(--leaves) - .52) * 2.5, 1)); }

.leaf {
  transform-box: fill-box;
  transform-origin: 100% 100%;
}

.leaf-blade {
  fill: url(#leafTone);
  stroke: rgba(146, 170, 131, .16);
  stroke-width: .8;
  stroke-linejoin: round;
}

.leaf-left-high {
  opacity: clamp(0, var(--leaves) * 1.8, 1);
  transform: scale(clamp(.08, var(--leaves) * 1.55, 1)) rotate(calc(-13deg + var(--leaves) * 13deg));
}

.leaf-right-high {
  opacity: clamp(0, (var(--leaves) - .13) * 2.2, 1);
  transform-origin: 0 100%;
  transform: scale(clamp(.08, (var(--leaves) - .1) * 1.75, 1)) rotate(calc(12deg - var(--leaves) * 12deg));
}

.leaf-left-low {
  opacity: clamp(0, (var(--leaves) - .26) * 2.25, 1);
  transform: scale(clamp(.08, (var(--leaves) - .22) * 1.7, 1)) rotate(calc(-12deg + var(--leaves) * 12deg));
}

.leaf-right-low {
  opacity: clamp(0, (var(--leaves) - .38) * 2.45, 1);
  transform-origin: 0 100%;
  transform: scale(clamp(.08, (var(--leaves) - .34) * 1.8, 1)) rotate(calc(11deg - var(--leaves) * 11deg));
}

.leaf-bottom {
  opacity: clamp(0, (var(--leaves) - .5) * 2.8, 1);
  transform: scale(clamp(.08, (var(--leaves) - .46) * 1.95, 1)) rotate(calc(-9deg + var(--leaves) * 9deg));
}

.leaf-vein {
  fill: none;
  stroke: rgba(203, 216, 187, .23);
  stroke-width: 1.15;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.thorns {
  fill: #354a35;
  opacity: clamp(0, (var(--leaves) - .25) * 1.7, .8);
}

.flower {
  transform-box: fill-box;
  transform-origin: 50% 95%;
  opacity: clamp(0, (var(--bud) - .01) * 1.7, 1);
  transform: translateY(calc((1 - var(--bud)) * 22px)) scale(calc(.11 + var(--bud) * .89)) rotate(calc((1 - var(--bud)) * -2deg));
}

.petal,
.sepal {
  transform-box: fill-box;
  vector-effect: non-scaling-stroke;
}

.petal {
  stroke: rgba(255, 151, 153, .12);
  stroke-width: .78;
  stroke-linejoin: round;
}

.petal-ring {
  transform-box: fill-box;
  transform-origin: 50% 94%;
}

.petal-ring--outer {
  transform: translateY(calc((1 - var(--outer-open)) * 24px)) scaleX(calc(.3 + var(--outer-open) * .7));
}

.petal-ring--outer .petal { fill: url(#roseOuter); }

.petal-ring--middle {
  opacity: clamp(0, calc(var(--mid-open) * 1.55), 1);
  transform: translateY(calc((1 - var(--mid-open)) * 38px)) scale(calc(.42 + var(--mid-open) * .58));
}

.petal-ring--middle .petal { fill: url(#roseMiddle); }

.petal-ring--inner {
  opacity: clamp(.12, calc(.12 + var(--inner-open) * 1.8), 1);
  transform: translate(calc(var(--inner-open) * -4px), calc((1 - var(--inner-open)) * 22px)) scale(calc(.66 + var(--inner-open) * .34));
}

.petal-ring--inner .petal { fill: url(#roseHeart); }

.petal--silhouette { fill: url(#roseShadow) !important; stroke: none; opacity: .92; }
.petal--outer-left { filter: brightness(.84); transform-origin: 88% 89%; transform: rotate(calc((1 - var(--outer-open)) * 9deg)); }
.petal--outer-right { filter: brightness(.84); transform-origin: 12% 90%; transform: rotate(calc((1 - var(--outer-open)) * -8deg)); }
.petal--crown,
.petal--crown-right { transform-origin: 50% 94%; transform: translateY(calc((1 - var(--outer-open)) * 10px)) scaleX(calc(.68 + var(--outer-open) * .32)); }
.petal--crown { filter: brightness(1.02); }
.petal--crown-right { filter: brightness(.86); }
.petal--far-left { opacity: clamp(.03, calc(var(--outer-open) * 1.45), 1); transform-origin: 94% 78%; transform: translateX(calc((1 - var(--outer-open)) * 26px)) rotate(calc((1 - var(--outer-open)) * 14deg)); }
.petal--far-right { opacity: clamp(.03, calc(var(--outer-open) * 1.45), 1); transform-origin: 6% 78%; transform: translateX(calc((1 - var(--outer-open)) * -25px)) rotate(calc((1 - var(--outer-open)) * -13deg)); }
.petal--guard-left { filter: brightness(.92); transform-origin: 90% 58%; transform: translateX(calc((1 - var(--outer-open)) * 22px)) rotate(calc((1 - var(--outer-open)) * 11deg)); }
.petal--guard-right { filter: brightness(.75); transform-origin: 10% 58%; transform: translateX(calc((1 - var(--outer-open)) * -21px)) rotate(calc((1 - var(--outer-open)) * -10deg)); }
.petal--front-guard { filter: brightness(.82); transform-origin: 50% 18%; transform: translateY(calc((1 - var(--outer-open)) * -16px)) scaleX(calc(.72 + var(--outer-open) * .28)); }
.petal--bud-left,
.petal--bud-right {
  opacity: clamp(0, calc((1 - var(--outer-open)) * 2.2), 1);
  transform-origin: 50% 96%;
}
.petal--bud-left { fill: url(#roseMiddle) !important; transform: translateX(calc(var(--outer-open) * -15px)) rotate(calc(var(--outer-open) * -8deg)); }
.petal--bud-right { fill: url(#roseOuter) !important; filter: brightness(.68); transform: translateX(calc(var(--outer-open) * 15px)) rotate(calc(var(--outer-open) * 8deg)); }

.petal--middle-left-back,
.petal--middle-left,
.petal--fold-left { transform-origin: 88% 88%; transform: rotate(calc((1 - var(--mid-open)) * 8deg)); }
.petal--middle-right-back,
.petal--middle-right,
.petal--fold-right { transform-origin: 12% 88%; transform: rotate(calc((1 - var(--mid-open)) * -7deg)); }
.petal--middle-upper-left { filter: brightness(1.08); }
.petal--middle-upper-right { filter: brightness(.83); }
.petal--middle-left,
.petal--middle-right { filter: brightness(.86); }
.petal--fold-left,
.petal--fold-right { filter: brightness(.78); }
.petal--middle-cup { filter: brightness(.8); }

.petal--inner-left-back { filter: brightness(.92); }
.petal--inner-right-back { filter: brightness(.76); }
.petal--inner-sweep-left,
.petal--inner-sweep-right { filter: brightness(.84); }
.petal--heart-left { filter: brightness(1.03); }
.petal--heart-right { filter: brightness(.7); }
.petal--spiral-one { filter: brightness(.92); }
.petal--spiral-two { filter: brightness(.62); }
.petal--inner-lip { filter: brightness(.74); }
.petal--heart-left,
.petal--heart-right,
.petal--spiral-one,
.petal--spiral-two { transform-origin: 50% 72%; transform: scale(calc(.78 + var(--heart-open) * .22)); }

.calyx { fill: url(#sepalTone); opacity: clamp(0, var(--bud) * 2.2, 1); }
.sepal { transform-origin: 50% 100%; }
.sepal--one { transform: rotate(calc((1 - var(--outer-open)) * 13deg)); }
.sepal--two { transform: rotate(calc((1 - var(--outer-open)) * 7deg)); }
.sepal--three { transform: rotate(calc((1 - var(--outer-open)) * -8deg)); }
.sepal--four { transform: rotate(calc((1 - var(--outer-open)) * -14deg)); }
.sepal--five { opacity: .62; }

.petal-rims,
.petal-shadows,
.spiral-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.petal-rims {
  stroke: url(#petalRim);
  stroke-width: 1;
  opacity: calc(var(--detail) * .82);
}

.petal-shadows {
  stroke: rgba(31, 1, 7, .48);
  stroke-width: 1.2;
  opacity: calc(var(--detail) * .58);
  filter: blur(.12px);
}

.spiral-line {
  stroke: rgba(255, 177, 170, .38);
  stroke-width: 1.05;
  opacity: calc(var(--detail) * var(--heart-open) * .75);
  filter: drop-shadow(0 1px 1px rgba(35, 1, 7, .55));
}

.drifting-petals { opacity: var(--final); }
.drift-petal { fill: #8d2034; transform-box: fill-box; transform-origin: center; opacity: 0; }
.drift-petal--one { animation: drift-one 9s 1.2s ease-in-out infinite; }
.drift-petal--two { animation: drift-two 11s 3s ease-in-out infinite; }
.drift-petal--three { animation: drift-three 10s 5.4s ease-in-out infinite; }

@keyframes drift-one {
  0%, 8% { transform: translate(0,0) rotate(0); opacity: 0; }
  18% { opacity: .72; }
  86% { opacity: .2; }
  100% { transform: translate(70px,220px) rotate(210deg); opacity: 0; }
}

@keyframes drift-two {
  0%, 12% { transform: translate(0,0) rotate(0); opacity: 0; }
  22% { opacity: .54; }
  100% { transform: translate(-58px,260px) rotate(-245deg); opacity: 0; }
}

@keyframes drift-three {
  0%, 16% { transform: translate(0,0) rotate(0); opacity: 0; }
  25% { opacity: .46; }
  100% { transform: translate(36px,190px) rotate(170deg); opacity: 0; }
}

.story-panel {
  position: relative;
  min-height: 112vh;
  min-height: 112svh;
  display: flex;
  align-items: center;
  padding: max(2rem, env(safe-area-inset-top)) 1.35rem max(2rem, env(safe-area-inset-bottom));
}

.hero {
  min-height: 100vh;
  min-height: 100svh;
  align-items: flex-start;
  padding-top: max(13svh, calc(env(safe-area-inset-top) + 3rem));
}

.copy {
  width: min(100%, 35rem);
  position: relative;
  z-index: 3;
  text-wrap: pretty;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .34);
}

.hero .copy { width: min(78vw, 27rem); }
.story-panel:not(.hero):not(.story-panel--emphasis):not(.bloom-moment):not(.finale) .copy { width: min(72vw, 25rem); color: rgba(242, 235, 229, .9); }

.eyebrow {
  margin: 0 0 1.25rem;
  color: var(--champagne);
  font-size: .7rem;
  line-height: 1;
  letter-spacing: .23em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 10.3vw, 4.9rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.03em;
}

p { margin: 0; }
p + p { margin-top: 1.4rem; }

.standalone {
  font-family: var(--font-display);
  font-size: clamp(1.68rem, 7.3vw, 3.25rem);
  line-height: 1.2;
  letter-spacing: -.015em;
}

.story-panel--pause { min-height: 125svh; align-items: flex-start; padding-top: 35svh; }
.story-panel--breath { min-height: 122svh; }

.story-panel--emphasis .copy,
.bloom-moment .copy {
  width: min(82vw, 31rem);
  padding: 1.25rem 1.2rem 1.35rem 1.3rem;
  background: none;
}

.story-panel--emphasis .copy::before,
.bloom-moment .copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1.7rem -3rem;
  pointer-events: none;
  background: radial-gradient(ellipse at 14% 50%, rgba(9,5,6,.97) 0 43%, rgba(9,5,6,.62) 66%, transparent 87%);
  filter: blur(7px);
}

.story-panel--emphasis p,
.bloom-moment p {
  font-family: var(--font-display);
  font-size: clamp(1.62rem, 6.8vw, 2.9rem);
  line-height: 1.25;
  letter-spacing: -.022em;
}

em { color: #f4d7d4; font-style: italic; }

.ornament {
  display: block;
  width: 2.7rem;
  height: 1px;
  margin-bottom: 1.25rem;
  background: var(--champagne);
  transform-origin: left;
  transform: scaleX(.6);
}

.bloom-moment {
  min-height: 140svh;
  align-items: flex-start;
  padding-top: 31svh;
}

.finale {
  min-height: 132vh;
  min-height: 132svh;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: max(11svh, calc(env(safe-area-inset-bottom) + 4rem));
  text-align: center;
}

.finale-copy { width: min(94%, 34rem); position: relative; z-index: 3; }

.finale h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 13.5vw, 7.2rem);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.final-wish {
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: 1.08rem;
}

.sender {
  margin-top: 1.65rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
}

.final-joke {
  margin-top: 3.2rem;
  color: rgba(205,187,182,.58);
  font-size: .78rem;
  letter-spacing: .055em;
}

.reveal {
  opacity: .18;
  transform: translateY(1.5rem);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

.scroll-cue {
  position: absolute;
  left: 1.35rem;
  bottom: max(1.6rem, calc(env(safe-area-inset-bottom) + 1rem));
  display: flex;
  align-items: center;
  gap: .65rem;
  color: rgba(246,239,234,.62);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: calc(1 - clamp(0, var(--scroll-progress) * 18, 1));
  transition: opacity .35s ease;
}

.scroll-cue svg { width: .9rem; fill: none; stroke: currentColor; stroke-width: 1.25; animation: cue 2.2s ease-in-out infinite; }

@keyframes cue {
  0%, 100% { transform: translateY(-2px); opacity: .5; }
  50% { transform: translateY(5px); opacity: 1; }
}

@media (min-width: 48rem) {
  body { font-size: 1.125rem; }
  .rose-stage { right: 4vw; width: min(42vw, 34rem); }
  .rose { right: 0; height: 93%; bottom: -11%; }
  .story-panel { padding-left: clamp(3rem, 9vw, 9rem); padding-right: 49vw; }
  .hero { padding-top: 19svh; }
  .hero .copy { width: min(40vw, 38rem); }
  .story-panel:not(.hero):not(.story-panel--emphasis):not(.bloom-moment):not(.finale) .copy { width: min(37vw, 34rem); }
  .story-panel--emphasis .copy,
  .bloom-moment .copy { width: min(40vw, 36rem); padding: 1.75rem 2rem 1.9rem 0; background: none; }
  .bloom-moment { padding-top: 34svh; }
  .finale { align-items: center; justify-content: flex-start; padding: max(3rem, env(safe-area-inset-top)) 52vw max(3rem, env(safe-area-inset-bottom)) clamp(3rem, 9vw, 9rem); text-align: left; }
  .finale-copy { width: min(40vw, 38rem); }
  .finale h2 { font-size: clamp(4.2rem, 6.5vw, 6.5rem); }
  .scroll-cue { left: clamp(3rem, 10vw, 10rem); }
  .rose-stage { transform: translate3d(calc(var(--final) * -2vw), calc(var(--final) * -3svh), 0) scale(calc(1 + var(--final) * .08)); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --stem: 1; --leaves: 1; --bud: 1; --bloom: 1; --outer-open: 1; --mid-open: 1; --inner-open: 1; --heart-open: 1; --detail: 1; --final: 1; --ambient-light: 1; --sway-angle: 0deg; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue svg { animation: none; }
  .rose { transform: none; }
  .drifting-petals { display: none; }
}