/* ─────────────────────────────────────────────
   Tokens
   ───────────────────────────────────────────── */
:root {
  /* Palette: paper → blush → plum. The page deepens as the story goes on. */
  --paper: #fcf8f4;
  --paper-deep: #f3ebe6;
  --blush: #f9eef3;
  --wine: #24121f;          /* deep plum for the closing */
  --cream: #f8eef4;
  --card: #fffdfb;
  --ink: #2a1426;
  --ink-soft: #715e6c;
  --wax: #a1307c;           /* berry: headings, seal, accents */
  --wax-dark: #6b1d55;
  --magenta: #d63fa6;       /* buttons and interaction */
  --pink: #eaa7d0;          /* soft pink on dark */
  --mauve: #b596b0;
  --line: rgba(42, 20, 38, 0.1);
  --bg: var(--paper);

  /* Type: one display, one text, one hand. The hand is used sparingly. */
  --display: "Instrument Serif", Georgia, serif;
  --body: "Plus Jakarta Sans", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --hand: "Nothing You Could Do", cursive;

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --spring-soft: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
  --spring-bounce: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .95rem + .25vw, 1.1rem);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 1.4s var(--ease-in-out);
}
body[data-tone="blush"] { --bg: var(--blush); }
body[data-tone="wine"]  { --bg: var(--wine); }
body.sealed { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }

/* Small italic lines are set in the display serif */
.intro__hint, .hero__line, .reasons__hint, .gift__text, .shot--ph, .note__front small,
.closing__ps, .again, .names__n {
  font-family: var(--display); font-weight: 400;
}

.grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: 0.22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.15 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Shared label style: small, tracked, uppercase */
.label, .moment__date, .chapter__label, .hero__scroll {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase;
}

/* ─────────────────────────────────────────────
   Intro / envelope
   ───────────────────────────────────────────── */
.intro {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center; align-content: center; gap: 2.5rem;
  padding: 16px;
  background: radial-gradient(ellipse at 50% 42%, #fffbf8 0%, var(--paper) 45%, var(--paper-deep) 100%);
}
.intro[hidden] { display: none; }
.intro__to {
  margin: 0; font-family: var(--hand); font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: var(--ink-soft); rotate: -3deg;
  animation: rise 1.4s var(--ease-out) both;
  transition: opacity .6s ease, translate .8s var(--ease-out);
}
.intro__hint {
  margin: 0; font-style: italic; color: var(--ink-soft); letter-spacing: 0.06em;
  animation: rise 1.4s var(--ease-out) .6s both, breathe 3.2s ease-in-out 2.4s infinite;
  transition: opacity .4s ease;
}
.intro.s1 .intro__hint, .intro.s3 .intro__to { opacity: 0; translate: 0 -12px; }

.stage {
  animation: rise 1.4s var(--ease-out) .25s both;
  transition: translate 1s var(--ease-in-out), opacity .8s ease;
}
.intro.s4 .stage { translate: 0 45vh; opacity: 0; }

.envelope {
  --w: min(78vw, 380px);
  position: relative; display: block; width: var(--w); aspect-ratio: 1.55;
  border: 0; padding: 0; background: none;
  perspective: 1200px;
  filter: drop-shadow(0 22px 30px rgba(58, 22, 50, 0.22));
  animation: float 6s ease-in-out 1.6s infinite;
}
.intro.s1 .envelope { animation-play-state: paused; }
.envelope:focus-visible { outline: 2px dashed var(--wax); outline-offset: 14px; }

.env { position: absolute; inset: 0; display: block; border-radius: 4px; }
.env--back { background: #e4cfd9; z-index: 0; }
.env--front {
  background: linear-gradient(170deg, #f4e7ed, #ecdbe3);
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
  z-index: 2;
}
.env--flap {
  background: linear-gradient(180deg, #e6d1db, #efe0e7);
  clip-path: polygon(0 0, 100% 0, 50% 58%);
  transform-origin: top center;
  z-index: 4;
  transition: transform .8s var(--ease-in-out), z-index 0s linear .4s;
}
.intro.s2 .env--flap { transform: rotateX(180deg); z-index: 0; }

.card {
  position: absolute; inset: 7% 8% 10%; z-index: 1;
  display: grid; place-content: center; text-align: center;
  background: var(--card); border-radius: 3px;
  box-shadow: 0 1px 0 var(--line);
  transition: transform 1s var(--spring-soft);
}
.intro.s3 .card { transform: translateY(-58%); }
.card__for { font-family: var(--hand); font-size: calc(var(--w) * .045); color: var(--ink-soft); }
.card__name {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: calc(var(--w) * .12); line-height: 1; color: var(--wax);
}

.postmark {
  position: absolute; z-index: 3; left: 6%; bottom: 8%;
  width: 27%; rotate: -14deg;
  fill: none; stroke: var(--ink); stroke-width: 1.4; opacity: .38;
  mix-blend-mode: multiply;
}
.postmark text {
  fill: var(--ink); stroke: none;
  font-family: var(--mono); font-size: 8.6px; font-weight: 500; letter-spacing: 1.6px;
}
.postmark__wave { stroke-width: 1.2; }

.seal {
  position: absolute; z-index: 5;
  left: 50%; top: 52%;
  width: calc(var(--w) * 0.2); aspect-ratio: 1;
  translate: -50% -50%;
  transition: scale .4s var(--spring-bounce);
}
.envelope:hover .seal { scale: 1.07; }
.seal__half {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 47% 53% 49% 51% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 35% 30%, #cf55a8, var(--wax) 45%, var(--wax-dark));
  box-shadow: inset 0 0 0 4px rgba(0,0,0,0.12), 0 3px 6px rgba(80, 15, 60, 0.35);
  font-family: var(--display); font-style: italic;
  font-size: calc(var(--w) * 0.1); color: #f9e0f0;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
  transition: transform .9s var(--ease-out), opacity .6s ease .2s;
}
.seal__half--l { clip-path: polygon(0 0, 56% 0, 46% 38%, 54% 62%, 45% 100%, 0 100%); }
.seal__half--r { clip-path: polygon(56% 0, 100% 0, 100% 100%, 45% 100%, 54% 62%, 46% 38%); }
.seal::after { /* soft glow that invites the tap */
  content: ""; position: absolute; inset: -18%; border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 63, 166, .35), transparent 65%);
  animation: glow 2.6s ease-in-out infinite;
  z-index: -1;
}
.intro.s1 .seal::after { display: none; }
.intro.s1 .seal__half--l { transform: translate(-40%, 140%) rotate(-38deg); opacity: 0; }
.intro.s1 .seal__half--r { transform: translate(45%, 150%) rotate(32deg); opacity: 0; }

/* The card grows out of the envelope into the page */
.bloom {
  position: fixed; z-index: 60;
  display: grid; place-content: center; text-align: center;
  background: var(--card); border-radius: 3px;
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   Scroll reveals
   ───────────────────────────────────────────── */
[data-io] {
  opacity: 0; translate: 0 28px;
  transition: opacity 1.1s var(--ease-out), translate 1.3s var(--ease-out);
  transition-delay: var(--d, 0s);
}
[data-io].in { opacity: 1; translate: 0 0; }

/* ─────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────── */
.hero {
  min-height: 100svh;
  display: grid; place-content: center; text-align: center;
  padding: 16px; position: relative;
}
.hero__inner {
  translate: 0 calc(var(--sy, 0) * .3px);
  opacity: calc(1 - var(--sy, 0) / 650);
}
.hero__kicker {
  margin: 0; font-family: var(--hand); font-size: clamp(1.3rem, 4vw, 1.9rem);
  color: var(--ink-soft); rotate: -2deg;
}
.hero__name {
  margin: 0.08em 0 0.22em;
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(4rem, 17vw, 13rem);
  line-height: 0.95; letter-spacing: -0.02em;
  color: var(--wax);
}
.hero__name .ch {
  display: inline-block;
  opacity: 0; filter: blur(12px);
  transform: translateY(.3em) rotate(6deg);
  transition: opacity 1s ease, filter 1.2s var(--ease-out), transform 1.4s var(--spring-soft);
  transition-delay: calc(.25s + var(--i) * 70ms);
}
.hero__line {
  margin: 0 auto; max-width: 30ch; font-style: italic; color: var(--ink-soft);
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
}
.hero__kicker, .hero__line, .hero__scroll {
  opacity: 0; translate: 0 14px;
  transition: opacity 1.2s ease, translate 1.2s var(--ease-out);
}
.hero__line { transition-delay: 1s; }
.hero__scroll { transition-delay: 1.6s; }
.hero.in .hero__name .ch { opacity: 1; filter: blur(0); transform: none; }
.hero.in .hero__kicker, .hero.in .hero__line, .hero.in .hero__scroll { opacity: 1; translate: 0 0; }

.hero__scroll {
  position: absolute; bottom: 2rem; left: 50%; margin-left: -3em; width: 6em;
  display: grid; justify-items: center; gap: .6rem;
  color: var(--ink-soft); font-size: .7rem;
}
.hero__scroll i {
  width: 1px; height: 44px; background: var(--ink-soft); opacity: .5;
  transform-origin: top; animation: drip 2.4s var(--ease-in-out) infinite;
}

/* ─────────────────────────────────────────────
   Chapter markers
   ───────────────────────────────────────────── */
.chapter {
  display: grid; justify-items: center; gap: .5rem;
  margin: 0 auto 1.4rem; color: var(--mauve);
}
.chapter__num { font-family: var(--display); font-style: italic; font-size: 1.3rem; line-height: 1; }
.chapter__orn { width: 160px; height: 20px; overflow: visible; }
.chapter__orn path {
  fill: transparent; stroke: currentColor; stroke-width: 1;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease-in-out) .2s, fill .8s ease 1.4s;
}
.chapter.in .chapter__orn path { stroke-dashoffset: 0; }
.chapter.in .chapter__orn .heart { fill: var(--wax); stroke: var(--wax); }
.chapter__label { color: var(--wax); }

.section-title {
  margin: 0 0 3rem; text-align: center;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 5rem); line-height: 1; letter-spacing: -0.02em;
  --d: .15s;
}
.section-title em { font-style: italic; color: var(--wax); }

/* ─────────────────────────────────────────────
   Letter
   ───────────────────────────────────────────── */
.letter-wrap { padding: 6rem 16px 9rem; display: grid; justify-items: center; }
.letter {
  position: relative;
  width: min(100%, 640px); margin-top: 2rem;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 6vw, 4rem);
  background:
    repeating-linear-gradient(transparent 0 2.3rem, rgba(161, 48, 124, 0.08) 2.3rem calc(2.3rem + 1px)),
    var(--card);
  box-shadow: 0 1px 0 var(--line), 0 30px 60px -30px rgba(58, 22, 50, 0.35);
  rotate: -0.8deg;
  font-family: var(--hand);
  font-size: clamp(1.15rem, 3.4vw, 1.45rem);
  line-height: 2.3rem;
  --d: .2s;
}
.letter p {
  margin: 0 0 2.3rem;
  /* Each paragraph is "written" left to right */
  clip-path: inset(-.5em 100% -.5em 0);
  transition: clip-path 1.6s var(--ease-in-out);
  transition-delay: calc(.7s + var(--i) * .75s);
}
.letter p:last-child { margin: 0; }
.letter.in p { clip-path: inset(-.5em -1em -.5em 0); }
.letter::before {
  content: ""; position: absolute; top: -14px; left: 50%;
  width: 110px; height: 28px; translate: -50% 0; rotate: 3deg;
  background: rgba(234, 167, 208, 0.5);
}

/* ─────────────────────────────────────────────
   Timeline
   ───────────────────────────────────────────── */
.story { padding: 2rem 16px 9rem; }
.timeline {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 980px; position: relative;
}
.timeline::before, .timeline::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
}
.timeline::before { border-left: 1.5px dashed rgba(161, 48, 124, 0.2); }
.timeline::after {  /* the thread that draws itself as you scroll */
  border-left: 1.5px solid var(--wax);
  transform-origin: top; transform: scaleY(var(--p, 0));
}
.moment {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem;
  align-items: center;
  margin-bottom: 5.5rem;
}
.moment::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 12px; height: 12px; translate: -50% -50%;
  border-radius: 50%; background: var(--wax);
  box-shadow: 0 0 0 6px var(--bg);
  scale: 0; transition: scale .8s var(--spring-bounce) .3s, box-shadow 1.4s;
}
.moment.in::after { scale: 1; }
.moment:nth-child(even) .polaroid { order: 2; }
.moment:nth-child(even) .moment__text { text-align: right; }

.polaroid {
  justify-self: center; margin: 0;
  width: min(100%, 300px);
  background: #fffefc;
  padding: 12px 12px 50px;
  box-shadow: 0 18px 40px -18px rgba(58, 22, 50, 0.45);
  rotate: var(--tilt, -3deg);
  position: relative;
  /* Dropped onto the table */
  opacity: 0;
  transform: translateY(-40px) rotate(calc(var(--tilt, -3deg) * 3)) scale(1.05);
  transition: opacity .6s ease, transform 1.3s var(--spring-soft), rotate .6s var(--ease-out), scale .6s var(--ease-out);
}
.moment.in .polaroid { opacity: 1; transform: none; }
.polaroid:hover { rotate: 0deg; scale: 1.03; }
.shot { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.shot--ph {
  display: grid; place-items: center;
  background: linear-gradient(135deg, #f3e4eb, #e3c8d6);
  color: rgba(42, 20, 38, 0.4); font-style: italic; font-size: 1.1rem;
}
/* Develops like a real polaroid */
.shot {
  filter: brightness(1.8) contrast(.55) saturate(0) blur(1.5px);
  transition: filter 3.2s var(--ease-in-out) .7s;
}
.moment.in .shot { filter: none; }
.polaroid figcaption {
  position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
  font-family: var(--hand); font-size: 1.15rem; color: var(--ink-soft);
}
.moment__text {
  opacity: 0; translate: 40px 0;
  transition: opacity 1s ease .35s, translate 1.2s var(--ease-out) .35s;
}
.moment:nth-child(even) .moment__text { translate: -40px 0; }
.moment.in .moment__text { opacity: 1; translate: 0 0; }
.moment__date { margin: 0 0 0.4rem; color: var(--wax); }
.moment__title {
  margin: 0 0 0.5rem; font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem); line-height: 1.1;
}
.moment__body { margin: 0; color: var(--ink-soft); }

/* ─────────────────────────────────────────────
   Reasons
   ───────────────────────────────────────────── */
.reasons { padding: 4rem 16px 9rem; }
.reasons .section-title { margin-bottom: 0.6rem; }
.reasons__hint { text-align: center; margin: 0 0 3rem; font-style: italic; color: var(--ink-soft); --d: .25s; }
.notes {
  max-width: 900px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.6rem;
}
.note {
  position: relative; aspect-ratio: 1;
  border: 0; padding: 0; background: none;
  perspective: 900px;
  rotate: var(--tilt, 0deg);
  scale: .92;
  transition: opacity .8s ease, translate 1.1s var(--spring-soft), scale 1.1s var(--spring-soft);
  transition-delay: var(--d, 0s);
}
.note.in { scale: 1; }
.note__inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 1s var(--spring-bounce);
}
.note.open .note__inner { transform: rotateY(180deg); }
.note:hover:not(.open) .note__inner { transform: rotateY(-10deg) rotateX(6deg) translateZ(10px); transition-duration: .5s; }
.note__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  display: grid; place-items: center; text-align: center;
  padding: 1.4rem;
  box-shadow: 0 12px 26px -14px rgba(58, 22, 50, 0.4);
}
.note__front {
  background:
    linear-gradient(135deg, transparent 49.5%, rgba(0,0,0,0.05) 50%, transparent 51%),
    #fbe8f2;
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 3rem; line-height: 1; color: var(--wax);
}
.note__front small {
  display: block; margin-top: .5rem;
  font-family: var(--body); font-style: italic; font-size: 0.9rem; color: var(--ink-soft);
}
.note__back {
  transform: rotateY(180deg);
  background: var(--card);
  font-family: var(--hand); font-size: 1.2rem; line-height: 1.5;
}
.note:focus-visible { outline: 2px dashed var(--wax); outline-offset: 6px; }

.spark {
  position: fixed; z-index: 70; pointer-events: none;
  color: var(--wax); font-size: 14px; line-height: 1;
}

/* ─────────────────────────────────────────────
   The gift
   ───────────────────────────────────────────── */
.gift { padding: 6rem 16px 9rem; text-align: center; }
.bigbike {
  display: block; width: min(520px, 92%); margin: 1rem auto 2.5rem; overflow: visible;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.bigbike [pathLength] {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 2s var(--ease-in-out) var(--dd, 0s);
}
.bigbike.in [pathLength] { stroke-dashoffset: 0; }
.bigbike .wheel { stroke: var(--ink); stroke-width: .7; --dd: .2s; }
.bigbike .spokes { stroke: var(--ink); stroke-width: .3; opacity: .55; --dd: .9s; }
.bigbike .frame { stroke: var(--wax); stroke-width: 1; --dd: .6s; }
.bigbike .basket { stroke: var(--mauve); stroke-width: .6; --dd: 1.4s; }
.bigbike .heart { fill: var(--wax); opacity: 0; scale: .2; transform-origin: 96px 20px; transition: opacity .4s ease 2.6s, scale .9s var(--spring-bounce) 2.6s; }
.bigbike.in .heart { opacity: 1; scale: 1; }
.bigbike__shadow { fill: rgba(42, 28, 21, .08); }
.gift__title { margin-bottom: 1.2rem; font-style: italic; color: var(--wax); --d: .3s; }
.gift__text { margin: 0 auto; max-width: 34ch; font-style: italic; color: var(--ink-soft); --d: .45s; }
a.again { text-decoration: none; display: inline-block; }

/* ─────────────────────────────────────────────
   From all of us
   ───────────────────────────────────────────── */
.friends { padding: 4rem 16px 9rem; }
.friends[hidden] { display: none; }
.friends .section-title { max-width: 14ch; margin: 0 auto 1rem; }

.ride { position: relative; max-width: 980px; height: 76px; margin: 0 auto; }
.ride__road {
  position: absolute; left: 0; right: 0; bottom: 6px;
  border-bottom: 1.5px dashed rgba(42, 28, 21, .25);
}
.bike {
  position: absolute; left: 0; bottom: -1px; width: 124px;
  fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  will-change: transform;
}
.bike .wheel path { stroke-width: 1; opacity: .6; }
.bike .wheel { transform-box: fill-box; transform-origin: center; rotate: var(--spin, 0deg); }
.bike .frame { stroke: var(--wax); stroke-width: 2.6; }
.bike .basket { stroke: var(--mauve); }
.bike .heart { fill: var(--wax); stroke: none; }

.names {
  margin: 0 calc(50% - 50vw) 4rem;
  padding: 1.1rem 0;
  background: #fdf6ef;
  border-block: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
}
.names__track {
  display: inline-flex; align-items: center;
  animation: marquee var(--dur, 40s) linear infinite;
}
.names:hover .names__track { animation-play-state: paused; }
.names__n {
  font-style: italic; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.1;
  color: var(--ink);
}
.names__n--alt { color: var(--magenta); }
.names__sep { margin: 0 clamp(1.2rem, 3vw, 2.2rem); color: var(--mauve); font-size: 1.1rem; }

.cards {
  max-width: 1080px; margin: 0 auto;
  columns: 3 280px; column-gap: 1.8rem;
}
.pc {
  break-inside: avoid; margin: 0 0 1.8rem;
  background: var(--card);
  padding: 12px 12px 20px;
  box-shadow: 0 1px 0 var(--line), 0 22px 40px -24px rgba(58, 22, 50, 0.45);
  rotate: var(--tilt, 0deg);
  transition: opacity .9s ease, translate 1.2s var(--spring-soft), rotate .6s var(--ease-out), scale .6s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.pc:hover { rotate: 0deg; scale: 1.02; }
.pc img { display: block; width: 100%; height: auto; filter: brightness(1.8) contrast(.55) saturate(0) blur(1.5px); transition: filter 3s var(--ease-in-out) .5s; }
.pc.in img { filter: none; }
.pc__msg {
  margin: 1rem .4rem 0; white-space: pre-line;
  font-family: var(--hand); font-size: 1.1rem; line-height: 1.7;
}
.pc__from {
  margin: .8rem .4rem 0; text-align: right;
  font-family: var(--display); font-style: italic; color: var(--wax);
}

/* ─────────────────────────────────────────────
   Closing
   ───────────────────────────────────────────── */
.closing {
  position: relative; overflow: hidden;
  min-height: 100svh; padding: 4rem 16px;
  display: grid; place-content: center; text-align: center; gap: 1rem;
  isolation: isolate;
  color: var(--cream);
}
.closing::before { /* magenta glows, like light through the dusk */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 80% 18%, rgba(160, 42, 128, .6), transparent 42%),
    radial-gradient(circle at 6% 104%, rgba(120, 30, 96, .55), transparent 36%);
  opacity: 0; transition: opacity 1.8s ease;
}
body[data-tone="wine"] .closing::before { opacity: 1; }
.closing__line {
  margin: 0; font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(2.8rem, 10vw, 7rem); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--pink);
}
.closing__line .w {
  display: inline-block; opacity: 0; filter: blur(10px); translate: 0 .25em;
  transition: opacity 1s ease, filter 1.2s var(--ease-out), translate 1.4s var(--spring-soft);
  transition-delay: calc(.2s + var(--i) * 160ms);
}
.closing__line.in .w { opacity: 1; filter: blur(0); translate: 0 0; }
.closing__sig {
  margin: 0; font-family: var(--hand); font-size: clamp(1.6rem, 4vw, 2.2rem);
  rotate: -3deg; --d: 1.2s;
}
.closing__ps { margin: 1.4rem 0 0; font-style: italic; font-size: 1.2rem; color: rgba(248, 238, 244, .75); --d: 2s; }
.again {
  position: relative; justify-self: center; margin-top: 3rem;
  border: 1px solid rgba(234, 167, 208, .35);
  background: rgba(255, 255, 255, .07);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: .75rem 1.6rem; border-radius: 999px;
  font-style: italic; font-size: 1.2rem; color: var(--cream);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, opacity 1.1s var(--ease-out), translate 1.3s var(--ease-out);
  --d: 1.8s;
}
.again:hover {
  background: linear-gradient(135deg, var(--magenta), var(--wax));
  border-color: transparent;
  box-shadow: 0 10px 30px -10px rgba(214, 63, 166, .7);
}

.petals { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.petals span {
  position: absolute; top: -8%; left: var(--x);
  width: var(--s); height: calc(var(--s) * .72);
  border-radius: 80% 0 80% 0;
  background: radial-gradient(circle at 30% 30%, #f6cde5, #c9649f);
  opacity: .75;
  animation: fall var(--dur) linear var(--delay) infinite;
  animation-play-state: paused;
}
body[data-tone="wine"] .petals span { animation-play-state: running; }

/* ─────────────────────────────────────────────
   Keyframes
   ───────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes breathe { 50% { opacity: 0.45; } }
@keyframes float { 50% { transform: translateY(-8px) rotate(.6deg); } }
@keyframes glow { 50% { opacity: .35; scale: 1.15; } }
@keyframes drip {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes fall {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(var(--drift), 115vh) rotate(var(--rot)); }
}

/* ─────────────────────────────────────────────
   Mobile
   ───────────────────────────────────────────── */
@media (max-width: 700px) {
  .timeline::before, .timeline::after { left: 10px; }
  .moment { grid-template-columns: 1fr; gap: 1.4rem; padding-left: 36px; margin-bottom: 4.5rem; }
  .moment::after { left: 10px; top: 0; translate: -50% 0; }
  .moment:nth-child(even) .polaroid { order: 0; }
  .moment:nth-child(even) .moment__text { text-align: left; }
  .moment .moment__text, .moment:nth-child(even) .moment__text { translate: 0 20px; }
  .polaroid { justify-self: start; width: min(100%, 260px); }
  .notes { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .note__back { font-size: 1rem; padding: 0.9rem; }
  .note__front { font-size: 2.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation: none !important; }
}