:root {
  --paper: #f8f2e8;
  --paper-light: #fffdf8;
  --paper-deep: #eee3d5;
  --red: #c92f2f;
  --red-dark: #8f1f24;
  --pink: #f4c9ce;
  --ink: #2d2925;
  --muted: #786e67;
  --line: #d9cdbe;
  --shadow: 0 12px 26px rgba(92, 66, 53, 0.18), 0 3px 7px rgba(92, 66, 53, 0.12);
  --display: KaiTi, STKaiti, "FZKai-Z03", "Noto Serif SC", serif;
  --serif: FangSong, STFangsong, "Songti SC", STSong, "Noto Serif SC", serif;
  --script: KaiTi, STKaiti, "FZKai-Z03", "Noto Serif SC", cursive;
  --latin: Georgia, "Times New Roman", serif;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #b5282e;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--serif);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button {
  color: inherit;
  font: inherit;
}

.card-app {
  position: relative;
  width: min(100vw, calc(100svh * 9 / 16), 430px);
  height: min(100svh, calc(100vw * 16 / 9), 764.45px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 15% 18%, rgba(201, 47, 47, 0.035) 0 1px, transparent 1.6px) 0 0 / 17px 17px,
    radial-gradient(circle at 80% 73%, rgba(45, 41, 37, 0.03) 0 0.8px, transparent 1.4px) 0 0 / 13px 13px,
    var(--paper);
}

.paper-noise {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.25;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(8deg, rgba(90, 70, 55, 0.025) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(97deg, rgba(255, 255, 255, 0.3) 0 1px, transparent 1px 7px);
}

.utility-bar {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 16px;
  right: 16px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.sound-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(201, 47, 47, 0.36);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.88);
  box-shadow: 0 4px 12px rgba(75, 51, 43, 0.1);
  color: var(--red-dark);
  font-family: var(--script);
  font-size: 12px;
  letter-spacing: 0.04em;
  pointer-events: auto;
  cursor: pointer;
  backdrop-filter: blur(5px);
}

.sound-button.is-playing .sound-icon {
  animation: musicPulse 1s ease-in-out infinite;
}

.chapter-indicator {
  max-width: 190px;
  overflow: hidden;
  color: rgba(45, 41, 37, 0.56);
  font-family: var(--script);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pages,
.page {
  position: absolute;
  inset: 0;
}

.pages {
  perspective: 1600px;
  transform-style: preserve-3d;
}

.page {
  z-index: 0;
  overflow: hidden;
  padding: max(64px, calc(env(safe-area-inset-top) + 50px)) 24px max(88px, calc(env(safe-area-inset-bottom) + 76px));
  opacity: 0;
  visibility: hidden;
  transform: perspective(1400px) translateX(5%) rotateY(7deg) scale(0.99);
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition:
    opacity 300ms ease,
    transform 760ms cubic-bezier(0.55, 0.08, 0.22, 0.96),
    filter 760ms ease,
    visibility 0s 760ms;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.7), transparent 58%),
    transparent;
}

.page::after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -32px;
  width: 150px;
  height: 94px;
  z-index: -1;
  transform: rotate(-8deg);
  border-radius: 52% 48% 0 0;
  background: var(--red);
  opacity: 0.92;
}

.page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 18;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(74, 39, 32, 0.02), rgba(74, 39, 32, 0.34));
  transition: opacity 620ms ease;
}

.page.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: perspective(1400px) translateX(0) rotateY(0) scale(1);
  transition-delay: 0s;
}

.page.is-before {
  transform: perspective(1400px) translateX(-5%) rotateY(-7deg) scale(0.99);
}

.page.is-turning-in,
.page.is-turning-out {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.page.is-turning-in {
  z-index: 3;
  filter: brightness(0.94);
}

.page.is-turning-in.turn-forward {
  transform: perspective(1400px) translateX(2%) rotateY(6deg) scale(0.985);
  transform-origin: right center;
}

.page.is-turning-in.turn-backward {
  transform: perspective(1400px) translateX(-2%) rotateY(-6deg) scale(0.985);
  transform-origin: left center;
}

.page.is-turning-in.is-turning {
  transform: perspective(1400px) translateX(0) rotateY(0) scale(1);
  filter: brightness(1);
}

.page.is-turning-out {
  z-index: 4;
  filter: brightness(1);
}

.page.is-turning-out.turn-forward {
  transform-origin: left center;
}

.page.is-turning-out.turn-backward {
  transform-origin: right center;
}

.page.is-turning-out.turn-forward.is-turning {
  transform: perspective(1400px) translateX(-2%) rotateY(-94deg) scale(0.995);
  filter: brightness(0.78);
}

.page.is-turning-out.turn-backward.is-turning {
  transform: perspective(1400px) translateX(2%) rotateY(94deg) scale(0.995);
  filter: brightness(0.78);
}

.page.is-turning-out.is-turning::before {
  opacity: 1;
}

.page-heading {
  position: relative;
  z-index: 3;
  text-align: center;
}

.page-heading h1,
.page-heading h2,
.intro-copy h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.1em;
}

.page-heading h2 {
  font-size: clamp(27px, 7.3vw, 33px);
  line-height: 1.28;
}

.page-heading p {
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.85;
}

.script-note {
  margin: 0 0 7px;
  color: var(--red);
  font-family: var(--script);
  font-size: 14px;
  letter-spacing: 0.06em;
}

.chapter-number {
  position: absolute;
  top: 60px;
  right: 22px;
  z-index: 3;
  color: rgba(201, 47, 47, 0.38);
  font-family: var(--latin);
  font-size: 56px;
  font-style: italic;
  line-height: 1;
}

.chapter-number::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: -5px;
  width: 42px;
  border-bottom: 2px solid currentColor;
  transform: rotate(-5deg);
}

.body-copy {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  text-align: center;
}

.paper-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 47px;
  padding: 10px 27px;
  border: 1px dashed var(--red);
  border-radius: 13px;
  background: var(--paper-light);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.paper-button::before,
.paper-button::after {
  content: "♡";
  margin: 0 9px;
  color: var(--red);
  font-family: var(--script);
}

.paper-button:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: 0 6px 12px rgba(92, 66, 53, 0.14);
}

.photo-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px dashed rgba(201, 47, 47, 0.48);
  background:
    linear-gradient(135deg, rgba(244, 201, 206, 0.33), transparent 55%),
    repeating-linear-gradient(-45deg, rgba(201, 47, 47, 0.035) 0 8px, transparent 8px 16px),
    #f8eee6;
  color: var(--red-dark);
  font-family: var(--script);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.photo-slot::before {
  content: "♡";
  display: block;
  position: absolute;
  top: 16px;
  color: rgba(201, 47, 47, 0.34);
  font-size: 30px;
}

.photo-slot > .photo-image {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-slot.photo-contain > .photo-image {
  object-fit: contain;
  background: #fff;
}

.photo-slot.has-photo::before { opacity: 0; }

.birthday-hat-overlay {
  position: absolute;
  top: var(--hat-y);
  left: var(--hat-x);
  z-index: 5;
  width: var(--hat-size);
  height: auto;
  opacity: 0;
  transform: translate(-50%, -100%) rotate(var(--hat-rotate));
  transform-origin: 50% 92%;
  filter: drop-shadow(0 3px 2px rgba(88, 44, 44, 0.2));
  pointer-events: none;
}

.page.is-active .birthday-hat-overlay,
.page.is-turning-in .birthday-hat-overlay {
  animation: hatPop 620ms var(--hat-delay) cubic-bezier(0.2, 0.88, 0.3, 1.2) both;
}

.photo-square { aspect-ratio: 1; }
.photo-portrait { aspect-ratio: 3 / 4; }
.photo-landscape { aspect-ratio: 4 / 3; }

.polaroid {
  margin: 0;
  padding: 9px 9px 12px;
  background: var(--paper-light);
  border: 1px solid rgba(130, 105, 91, 0.15);
  box-shadow: var(--shadow);
}

.polaroid figcaption {
  margin-top: 8px;
  color: var(--red-dark);
  font-family: var(--script);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.tilt-left { transform: rotate(-5deg); }
.tilt-right { transform: rotate(5deg); }
.tilt-left-soft { transform: rotate(-2deg); }

.taped-note,
.quote-card {
  position: relative;
  padding: 17px 18px;
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid rgba(151, 126, 108, 0.2);
  box-shadow: 0 7px 18px rgba(92, 66, 53, 0.12);
  color: var(--ink);
  font-family: var(--script);
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

.taped-note::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 66px;
  height: 18px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(236, 168, 160, 0.72);
  box-shadow: 0 1px 2px rgba(90, 60, 50, 0.1);
}

.kitty-sticker {
  position: absolute;
  z-index: 5;
  width: 108px;
  height: auto;
  filter: drop-shadow(0 5px 5px rgba(92, 66, 53, 0.14));
  pointer-events: none;
}

.kitty-small { width: 66px; }

.bow {
  position: absolute;
  width: 58px;
  height: 38px;
  z-index: 4;
  transform: rotate(-8deg);
}

.bow::before,
.bow::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 30px;
  height: 28px;
  background: var(--red);
  border: 2px solid var(--red-dark);
}

.bow::before {
  left: 0;
  border-radius: 60% 36% 50% 42%;
  transform: rotate(14deg);
}

.bow::after {
  right: 0;
  border-radius: 36% 60% 42% 50%;
  transform: rotate(-14deg);
}

.bow i {
  position: absolute;
  top: 10px;
  left: 22px;
  z-index: 2;
  width: 17px;
  height: 17px;
  border: 2px solid var(--red-dark);
  border-radius: 50%;
  background: #df4040;
}

.doodle-hearts,
.doodle-star {
  position: absolute;
  color: var(--red);
  font-family: var(--script);
}

/* Calendar */
.page-calendar {
  padding-top: 76px;
  text-align: center;
}

.page-calendar::after,
.page-childhood::after,
.wishes-envelope::after,
.wishes-letter::after {
  left: -34px;
  right: auto;
  bottom: -38px;
  transform: rotate(7deg);
}

.intro-copy h1 {
  font-size: clamp(28px, 7.5vw, 34px);
}

.calendar-stack {
  position: relative;
  width: min(78vw, 326px);
  height: min(83vw, 345px);
  margin: 34px auto 18px;
  perspective: 900px;
}

.calendar-sheet {
  position: absolute;
  inset: 0;
  border: 1px solid #d3c2af;
  border-radius: 8px 8px 4px 4px;
  background:
    repeating-linear-gradient(0deg, rgba(119, 89, 70, 0.025) 0 1px, transparent 1px 4px),
    var(--paper-light);
  box-shadow: var(--shadow);
}

.calendar-sheet-back {
  transform: rotate(3deg) translate(7px, 4px);
  background: var(--paper-deep);
}

.calendar-sheet-front {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 36px 22px 24px;
  transform-origin: 50% 0;
  backface-visibility: hidden;
}

.calendar-stack.is-flipping .calendar-sheet-front {
  animation: calendarFlip 720ms cubic-bezier(0.5, 0.04, 0.45, 0.96);
}

.calendar-stack.is-year-running .calendar-sheet-front {
  animation: calendarYearRun 150ms ease-in-out infinite;
}

.calendar-stack.is-year-running .calendar-year,
.calendar-stack.is-year-running .calendar-date {
  animation: yearInkPulse 150ms ease-in-out infinite;
}

.page.is-active .photo-slot,
.page.is-turning-in .photo-slot {
  animation: photoReveal 760ms cubic-bezier(0.16, 0.82, 0.24, 1.08) both;
  animation-delay: var(--photo-delay, 180ms);
}

.calendar-binding {
  position: absolute;
  top: -16px;
  left: 24px;
  right: 24px;
  z-index: 4;
  display: flex;
  justify-content: space-around;
}

.calendar-binding i {
  width: 11px;
  height: 37px;
  border: 3px solid var(--red-dark);
  border-radius: 9px;
  background: #eee3d5;
  box-shadow: 1px 2px 3px rgba(62, 44, 39, 0.2);
}

.calendar-month {
  padding-bottom: 12px;
  border-bottom: 2px solid var(--red);
  color: var(--red);
  font-family: var(--latin);
  font-size: 22px;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
}

.calendar-year {
  align-self: end;
  color: var(--muted);
  font-family: var(--latin);
  font-size: 24px;
  letter-spacing: 0.12em;
}

.calendar-day {
  color: var(--red);
  font-family: var(--latin);
  font-size: clamp(104px, 29vw, 128px);
  font-weight: 700;
  line-height: 0.83;
}

.calendar-date {
  margin-top: 20px;
  color: var(--ink);
  font-family: var(--latin);
  font-size: 14px;
  letter-spacing: 0.16em;
}

.calendar-message {
  min-height: 57px;
  margin: 10px auto 17px;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.05em;
}

.page-calendar > .paper-button {
  margin-top: 4px;
}

.kitty-calendar {
  right: 6px;
  bottom: 60px;
  transform: rotate(5deg);
}

.bow-calendar {
  top: 132px;
  left: 5px;
}

.torn-corner-top {
  position: absolute;
  top: -36px;
  left: -54px;
  width: 230px;
  height: 112px;
  transform: rotate(-8deg);
  border-radius: 0 0 52% 48%;
  background: var(--red);
}

/* Childhood */
.compact-heading h2 {
  font-size: clamp(25px, 6.7vw, 31px);
}

.childhood-collage {
  position: relative;
  height: 410px;
  margin-top: 16px;
}

.childhood-collage .polaroid {
  position: absolute;
  width: 57%;
}

.childhood-one { top: 18px; left: 4px; z-index: 2; }
.childhood-two { top: 116px; right: 1px; z-index: 3; }
.childhood-copy { margin: -1px 0 13px; }
.page-next-button { display: flex; margin: 0 auto; }
.hearts-childhood { right: 26px; top: 365px; font-size: 24px; transform: rotate(-12deg); }

/* Story */
.page-story-chat .page-heading {
  margin-top: 8px;
}

.page-story-chat .page-heading h2 {
  display: inline-block;
  padding: 8px 20px;
  border: 1px dashed var(--red);
  border-radius: 12px;
  background: var(--paper-light);
  box-shadow: 0 7px 18px rgba(92, 66, 53, 0.1);
}

.page-story-chat .page-heading p {
  max-width: 335px;
  font-size: 13px;
}

.phone-frame {
  position: relative;
  width: 70%;
  height: 52%;
  margin: 14px auto 0;
  padding: 24px 7px 10px;
  border: 4px solid var(--ink);
  border-radius: 25px;
  background: var(--paper-light);
  box-shadow: var(--shadow);
}

.phone-speaker {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 44px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: var(--ink);
}

.phone-frame .photo-slot {
  border-radius: 13px;
}

.note-chat {
  width: 88%;
  margin: 17px auto 0;
  transform: rotate(-1.2deg);
  font-size: 13px;
}

.bow-story {
  top: 296px;
  right: 19px;
  transform: rotate(13deg) scale(0.72);
}

.top-note {
  margin: 9px 0 2px;
  text-align: center;
}

.confession-photo {
  position: relative;
  width: 84%;
  margin: 21px auto 0;
}

.confession-photo > .photo-slot {
  min-height: 215px;
}

.story-gift-inset {
  position: absolute;
  right: -18px;
  bottom: -27px;
  z-index: 5;
  width: 31%;
  padding: 5px 5px 14px;
  transform: rotate(5deg);
  border: 1px solid rgba(130, 105, 91, 0.18);
  background: var(--paper-light);
  box-shadow: 0 8px 17px rgba(77, 53, 40, 0.2);
}

.story-gift-inset .photo-slot {
  min-height: 0;
  aspect-ratio: 3 / 4;
}

.story-gift-inset::after {
  content: "the little gift";
  position: absolute;
  right: 6px;
  bottom: 2px;
  color: var(--red-dark);
  font-family: var(--latin);
  font-size: 8px;
  letter-spacing: 0.03em;
}

.big-quote {
  margin: 29px auto 0;
  text-align: center;
}

.big-quote > span {
  display: block;
  margin-bottom: 9px;
  color: var(--muted);
  font-family: var(--script);
  font-size: 15px;
}

.big-quote strong {
  font-size: clamp(26px, 7vw, 32px);
  font-weight: 500;
  line-height: 1.5;
}

.big-quote em {
  color: var(--red);
  font-style: normal;
  font-size: 1.2em;
}

.red-thread {
  position: absolute;
  right: -34px;
  bottom: 130px;
  width: 145px;
  height: 60px;
  border: 3px solid var(--red);
  border-color: var(--red) transparent transparent var(--red);
  border-radius: 50%;
  transform: rotate(-16deg);
}

.kitty-confession { left: 9px; bottom: 78px; transform: rotate(-8deg); }

/* Moments */
.moments-heading {
  padding-right: 54px;
  text-align: left;
}

.moments-heading h2 {
  display: inline;
  border-bottom: 3px solid var(--red);
  line-height: 1.5;
}

.vertical-film {
  position: relative;
  width: 78%;
  margin: 21px auto 0;
  padding: 19px 14px;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: var(--shadow);
}

.vertical-film > .photo-slot {
  height: 190px;
  margin: 7px 0;
  border: 3px solid var(--paper-light);
}

.film-hole-row {
  height: 8px;
  background: repeating-linear-gradient(90deg, var(--paper) 0 8px, transparent 8px 18px);
}

.moments-copy {
  margin: 15px -5px 0;
  font-size: 13px;
}

.apple-sticker {
  position: absolute;
  right: 18px;
  bottom: 90px;
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border-radius: 48% 52% 45% 55%;
  background: var(--red);
  color: white;
  font-size: 22px;
  transform: rotate(8deg);
  box-shadow: var(--shadow);
}

.scattered-photos {
  position: relative;
  height: 575px;
  margin-top: 24px;
}

.scattered-photos .polaroid {
  position: absolute;
}

.photo-a { width: 53%; top: 12px; left: 2px; z-index: 2; }
.photo-b { width: 47%; top: 72px; right: 0; z-index: 3; }
.photo-c { width: 64%; top: 334px; left: 58px; z-index: 4; }
.note-moments { margin: -42px auto 0; width: 90%; transform: rotate(1deg); }
.doodle-star { right: 20px; top: 450px; font-size: 43px; transform: rotate(17deg); }

.moment-feature {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 17px;
  align-items: center;
  margin-top: 54px;
}

.scalloped-frame {
  position: relative;
  padding: 12px;
  background: var(--paper-light);
  border: 4px double var(--red);
  box-shadow: var(--shadow);
  transform: rotate(-3deg);
}

.scalloped-frame::before {
  content: "";
  position: absolute;
  inset: -9px;
  z-index: -1;
  background: radial-gradient(circle, var(--paper-light) 6px, transparent 6.5px) 0 0 / 13px 13px;
}

.moment-feature-copy {
  font-family: var(--script);
  font-size: 15px;
  line-height: 1.75;
}

.moment-feature-copy strong {
  color: var(--red-dark);
  font-size: 19px;
  font-weight: 500;
}

.moments-three .quote-card {
  width: 88%;
  margin: 50px auto 0;
  border: 1px dashed var(--red);
  font-size: 15px;
}

.kitty-moments { right: 13px; bottom: 80px; transform: rotate(8deg); }

/* Food */
.food-heading {
  text-align: left;
  padding-right: 48px;
}

.food-heading h2 {
  font-size: clamp(24px, 6.4vw, 29px);
}

.food-heading p {
  margin-left: 0;
  font-family: var(--script);
  text-align: left;
}

.food-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-rows: 170px 170px;
  gap: 11px;
  margin-top: 18px;
  padding: 11px;
  background: var(--paper-light);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: rotate(-1deg);
}

.food-card {
  margin: 0;
  min-width: 0;
  overflow: hidden;
}

.food-card-tall {
  grid-row: 1 / 3;
}

.food-copy {
  margin-top: 18px;
  font-size: 13px;
}

.strawberry-doodle {
  position: absolute;
  right: 14px;
  top: 293px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 50px;
  border: 3px solid var(--red-dark);
  border-radius: 45% 45% 58% 58%;
  background: var(--red);
  color: white;
  transform: rotate(8deg);
}

.tablecloth-strip {
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 100%;
  opacity: 0.17;
  background:
    linear-gradient(90deg, transparent 50%, var(--red) 50%) 0 0 / 24px 24px,
    linear-gradient(0deg, transparent 50%, var(--red) 50%) 0 0 / 24px 24px;
}

.food-main-photo {
  position: relative;
  z-index: 2;
  width: 90%;
  margin: 32px auto 0;
}

.food-main-photo .photo-slot {
  min-height: 255px;
}

.food-main-photo figcaption {
  font-size: 13px;
}

.menu-note {
  position: relative;
  z-index: 3;
  width: 80%;
  margin: 33px 0 0 10px;
  padding: 22px;
  border: 1px solid var(--red);
  background: var(--paper-light);
  box-shadow: var(--shadow);
  font-family: var(--script);
  font-size: 14px;
  line-height: 1.7;
  transform: rotate(-2deg);
}

.menu-note p { margin: 0; }
.menu-note hr { border: 0; border-top: 1px dashed var(--red); margin: 12px 0; }
.cutlery { position: absolute; right: 18px; bottom: 110px; color: var(--red); font-size: 60px; transform: rotate(15deg); }

/* Us */
.us-heading .script-note {
  font-family: var(--latin);
  font-size: 18px;
  font-style: italic;
}

.us-heading h2 {
  display: inline-block;
  min-width: 155px;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--red);
  font-size: 42px;
}

.us-collage {
  position: relative;
  height: 510px;
  margin-top: 20px;
}

.us-collage .polaroid {
  position: absolute;
}

.us-photo-one { width: 57%; top: 0; left: 2px; }
.us-photo-two { width: 55%; top: 156px; right: 0; }
.us-copy { margin: -16px 0 0; }
.bow-us { left: 10px; bottom: 120px; transform: rotate(-14deg) scale(0.82); }

.postcard {
  position: relative;
  margin-top: 48px;
  padding: 13px;
  border: 1px solid #bda891;
  background: var(--paper-light);
  box-shadow: var(--shadow);
  transform: rotate(-1.6deg);
}

.postcard-photo { height: 270px; }
.postcard-message { position: relative; min-height: 205px; padding: 22px 16px 14px; }
.postcard-message::before { content: ""; position: absolute; top: 18px; bottom: 12px; left: 50%; border-left: 1px solid #bda891; }
.postcard-message p { width: 47%; margin: 0; font-family: var(--script); font-size: 13px; line-height: 1.7; }

.postmark {
  position: absolute;
  top: 22px;
  right: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 128px;
  border: 3px double var(--red);
  border-radius: 50%;
  color: var(--red);
  font-family: var(--latin);
  transform: rotate(7deg);
}

.postmark span { font-size: 15px; letter-spacing: 0.14em; }
.postmark b { padding: 3px 0; font-size: 21px; border-top: 1px solid; border-bottom: 1px solid; }
.postmark small { margin-top: 4px; font-size: 8px; letter-spacing: 0.12em; }
.us-quote { width: 88%; margin: 35px auto 0; border: 1px dashed var(--red); }

.days-counter {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  align-items: end;
  width: 76%;
  margin: 28px auto 6px;
  color: var(--red);
}

.days-counter span { grid-column: 1 / 3; color: var(--ink); font-family: var(--script); font-size: 16px; letter-spacing: 0.12em; }
.days-counter strong { font-family: var(--latin); font-size: 86px; line-height: 0.95; }
.days-counter em { margin-bottom: 8px; font-family: var(--latin); font-size: 18px; }

.contact-sheet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 145px 145px;
  gap: 7px;
  padding: 12px;
  background: var(--ink);
  box-shadow: var(--shadow);
  transform: rotate(1deg);
}

.contact-sheet .photo-slot { border: 3px solid var(--paper-light); }
.long-us-copy { margin-top: 25px; text-align: center; font-size: 13px; line-height: 1.75; }
.long-us-copy p { margin: 0 0 11px; }
.long-us-copy strong { color: var(--red-dark); font-weight: 500; }
.kitty-us { right: 6px; bottom: 68px; transform: rotate(8deg); }

/* Wishes */
.wishes-heading {
  margin-top: 10px;
}

.wishes-heading h2,
.letter-title h2,
.cake-title h2 {
  display: inline-block;
  padding: 8px 20px;
  border: 1px dashed var(--red);
  border-radius: 12px;
  background: var(--paper-light);
  box-shadow: var(--shadow);
}

.wishes-heading h2::before,
.wishes-heading h2::after,
.letter-title h2::before,
.letter-title h2::after,
.cake-title h2::before,
.cake-title h2::after {
  content: "♡";
  margin: 0 8px;
  color: var(--red);
  font-family: var(--script);
  font-size: 0.72em;
}

.wishes-heading p {
  margin-top: 25px;
  color: var(--ink);
  font-size: 19px;
  line-height: 2;
}

.envelope-stage {
  position: relative;
  width: 94%;
  height: 340px;
  margin: 27px auto 0;
  perspective: 800px;
}

.envelope {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 240px;
  filter: drop-shadow(0 13px 12px rgba(92, 66, 53, 0.2));
}

.envelope-back {
  position: absolute;
  inset: 0;
  border: 1px solid #d2c4b4;
  background: var(--paper-light);
}

.envelope-front-left,
.envelope-front-right {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--paper-light);
}

.envelope-front-left { clip-path: polygon(0 0, 55% 100%, 0 100%); }
.envelope-front-right { clip-path: polygon(100% 0, 45% 100%, 100% 100%); }

.envelope-flap {
  position: absolute;
  inset: 0;
  z-index: 4;
  clip-path: polygon(0 0, 100% 0, 50% 63%);
  transform-origin: 50% 0;
  background: #f6eee4;
  border-top: 1px solid #d2c4b4;
  transition: transform 650ms cubic-bezier(0.45, 0, 0.25, 1), z-index 0s 310ms;
}

.letter-peek {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 47px;
  height: 235px;
  z-index: -1;
  border: 1px solid var(--line);
  background: var(--paper-light);
  transition: transform 760ms 430ms cubic-bezier(0.22, 0.8, 0.28, 1);
}

.letter-peek::before {
  content: "Cookie";
  position: absolute;
  top: 23px;
  left: 27px;
  color: var(--red);
  font-family: var(--latin);
  font-size: 25px;
  font-style: italic;
}

.envelope-letter-label {
  position: absolute;
  left: 50%;
  bottom: 25px;
  z-index: 6;
  width: 180px;
  padding: 10px 15px;
  transform: translateX(-50%);
  border: 1px dashed var(--red);
  border-radius: 8px;
  background: var(--paper-light);
  font-family: var(--latin);
  font-size: 13px;
  line-height: 1.8;
}

.envelope-letter-label strong { color: var(--red); font-size: 18px; font-style: italic; }
.envelope-letter-label span { display: inline-block; width: 75px; border-bottom: 1px solid var(--ink); }

.wax-seal {
  position: absolute;
  top: 76px;
  left: 50%;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 67px;
  height: 67px;
  padding: 7px;
  transform: translateX(-50%);
  border: 0;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 5px 8px rgba(102, 34, 34, 0.24);
  cursor: pointer;
  transition: transform 220ms ease, opacity 200ms ease;
}

.wax-seal img { width: 100%; height: 100%; object-fit: contain; }
.wax-seal:active { transform: translateX(-50%) scale(0.92); }

.envelope-stage.is-open .envelope-flap { z-index: 1; transform: rotateX(180deg); }
.envelope-stage.is-open .letter-peek { z-index: 2; transform: translateY(-122px); }
.envelope-stage.is-open .wax-seal { opacity: 0; pointer-events: none; }

.open-letter-label {
  display: flex;
  width: max-content;
  margin: 4px auto 0;
  cursor: default;
}

.open-letter-label:active {
  transform: none;
  box-shadow: var(--shadow);
}
.page-fraction { margin-top: 15px; color: var(--ink); font-family: var(--latin); font-size: 15px; font-weight: 700; letter-spacing: 0.16em; text-align: center; }

.letter-title { margin-top: 48px; }
.letter-title { position: relative; z-index: 6; }
.letter-title h2 { font-size: 25px; }

.letter-paper {
  position: relative;
  z-index: 4;
  width: 95%;
  margin: 23px auto 0;
  padding: 28px 22px 26px;
  border: 1px solid var(--line);
  background: var(--paper-light);
  box-shadow: var(--shadow);
  text-align: center;
}

.letter-paper::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 38%;
  width: 82px;
  height: 22px;
  transform: rotate(2deg);
  background: rgba(231, 143, 142, 0.65);
}

.letter-paper h3 {
  margin: 0 0 18px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--red);
  font-size: 19px;
  font-weight: 500;
}

.letter-paper h3 em { color: var(--red); font-family: var(--latin); font-size: 25px; }
.letter-paper p { margin: 0 0 14px; font-size: 13px; line-height: 1.75; }
.letter-paper .signature { margin: 5px 0 0; text-align: right; font-family: var(--script); }
.letter-paper .signature span { display: inline-block; border-bottom: 1px solid var(--ink); }

.wishes-cake { text-align: center; }

.cake-title {
  position: relative;
  z-index: 8;
  margin-top: 9px;
}

.cake-title p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.7;
}

.cake-stage {
  position: relative;
  width: min(88%, 350px);
  height: 405px;
  margin: -5px auto 0;
}

.birthday-cake {
  position: absolute;
  left: 50%;
  bottom: 2px;
  z-index: 2;
  width: 100%;
  max-height: 380px;
  transform: translateX(-50%);
  object-fit: contain;
  filter: drop-shadow(0 13px 14px rgba(89, 49, 43, 0.16));
}

.candles {
  position: absolute;
  top: 70px;
  left: 50%;
  z-index: 7;
  width: 49%;
  height: 90px;
  transform: translateX(-50%);
}

.candle {
  position: absolute;
  bottom: 0;
  width: 13px;
  height: 59px;
  border: 2px solid var(--red-dark);
  border-radius: 4px 4px 2px 2px;
  background: repeating-linear-gradient(-35deg, #fff3e7 0 7px, #ef9ca8 7px 14px);
  box-shadow: 2px 3px 0 rgba(166, 53, 63, 0.12);
  transition: transform 420ms ease;
}

.candle::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 2px;
  height: 7px;
  transform: translateX(-50%);
  background: #5c3f39;
}

.candle-one { left: 16%; transform: rotate(-2deg); }
.candle-two { left: 47%; height: 67px; }
.candle-three { left: 77%; height: 56px; transform: rotate(2deg); }

.flame {
  position: absolute;
  top: -29px;
  left: 50%;
  width: 18px;
  height: 27px;
  transform: translateX(-50%) rotate(3deg);
  transform-origin: 50% 100%;
  border: 2px solid #c72f2f;
  border-radius: 65% 35% 60% 40%;
  background: radial-gradient(circle at 50% 70%, #fff5b5 0 21%, #ffd25e 22% 49%, #f37a5a 50% 100%);
  box-shadow: 0 0 14px rgba(248, 157, 75, 0.72);
  animation: candleFlicker 920ms ease-in-out infinite alternate;
}

.candle-two .flame { animation-delay: -310ms; }
.candle-three .flame { animation-delay: -610ms; }

.smoke {
  position: absolute;
  top: -23px;
  left: 50%;
  width: 6px;
  height: 31px;
  opacity: 0;
  border: 2px solid rgba(116, 100, 96, 0.5);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}

.cake-stage.is-blown .flame { animation: blowOut 450ms ease-in both; }
.cake-stage.is-blown .candle-two .flame { animation-delay: 90ms; }
.cake-stage.is-blown .candle-three .flame { animation-delay: 180ms; }
.cake-stage.is-blown .smoke { animation: smokeRise 1.5s 380ms ease-out both; }
.cake-stage.is-blown .candle-two .smoke { animation-delay: 470ms; }
.cake-stage.is-blown .candle-three .smoke { animation-delay: 560ms; }

.wish-sparkles {
  position: absolute;
  inset: 38px 0 45px;
  z-index: 8;
  pointer-events: none;
}

.wish-sparkles i {
  position: absolute;
  width: 9px;
  height: 9px;
  opacity: 0;
  transform: rotate(45deg);
  background: var(--red);
}

.wish-sparkles i:nth-child(1) { top: 16%; left: 8%; }
.wish-sparkles i:nth-child(2) { top: 4%; right: 12%; width: 7px; height: 7px; }
.wish-sparkles i:nth-child(3) { top: 42%; left: 4%; width: 6px; height: 6px; }
.wish-sparkles i:nth-child(4) { top: 33%; right: 2%; }
.wish-sparkles i:nth-child(5) { top: 58%; right: 10%; width: 6px; height: 6px; }

.cake-stage.is-blown .wish-sparkles i {
  animation: wishSparkle 1.45s 460ms ease-out both;
}

.cake-stage.is-blown .wish-sparkles i:nth-child(2) { animation-delay: 610ms; }
.cake-stage.is-blown .wish-sparkles i:nth-child(3) { animation-delay: 760ms; }
.cake-stage.is-blown .wish-sparkles i:nth-child(4) { animation-delay: 910ms; }
.cake-stage.is-blown .wish-sparkles i:nth-child(5) { animation-delay: 1.06s; }

.blow-candles-button {
  position: relative;
  z-index: 9;
  display: block;
  min-width: 145px;
  margin: -7px auto 0;
}

.blow-candles-button:disabled {
  cursor: default;
  opacity: 0.9;
}

.cake-wish-result {
  margin: 11px 0 0;
  color: var(--red-dark);
  font-family: var(--script);
  font-size: 15px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 550ms ease, transform 550ms ease;
}

.cake-wish-result.is-visible { opacity: 1; transform: translateY(0); }
.cake-final-line { margin: 8px 0 0; color: var(--red-dark); font-family: var(--script); font-size: 15px; }
.open-envelope-shell {
  position: absolute;
  top: 316px;
  left: 10px;
  right: 10px;
  z-index: 2;
  height: 235px;
  border: 1px solid var(--line);
  background: #f5ecdf;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.open-envelope-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(255,255,255,0.45), transparent 60%);
}

.open-envelope-left,
.open-envelope-right {
  position: absolute;
  inset: 0;
  background: var(--paper-light);
}

.open-envelope-left { clip-path: polygon(0 0, 62% 100%, 0 100%); }
.open-envelope-right { clip-path: polygon(100% 0, 38% 100%, 100% 100%); }

.kitty-letter {
  top: 155px;
  left: 2px;
  z-index: 7;
  width: 72px;
  transform: rotate(-6deg);
}

.letter-cord {
  position: absolute;
  top: 130px;
  right: -38px;
  z-index: 1;
  width: 125px;
  height: 98px;
  border: 3px solid var(--red);
  border-color: var(--red) transparent transparent var(--red);
  border-radius: 50%;
  transform: rotate(26deg);
}

.close-letter-button { position: relative; z-index: 6; display: flex; min-height: 42px; margin: 16px auto 0; font-size: 15px; }
.wishes-letter .page-fraction { position: relative; z-index: 6; margin-top: 9px; }
.final-line { position: relative; z-index: 6; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; text-align: center; }
.final-line strong { color: var(--red-dark); font-weight: 500; }
.bow-final { right: 12px; bottom: 80px; transform: scale(0.65) rotate(12deg); }

/* Controls */
.page-controls {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 50;
  display: grid;
  grid-template-columns: 38px 1fr auto 38px;
  gap: 9px;
  align-items: center;
  pointer-events: none;
}

.round-button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 9px;
  border: 1px solid rgba(201, 47, 47, 0.4);
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.9);
  box-shadow: 0 4px 12px rgba(75, 51, 43, 0.14);
  color: var(--red-dark);
  pointer-events: auto;
  cursor: pointer;
}

.round-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.round-button:disabled { opacity: 0.28; cursor: default; }
.progress-track { height: 3px; overflow: hidden; border-radius: 2px; background: rgba(143, 31, 36, 0.16); }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--red); transition: width 380ms ease; }
.page-counter { color: rgba(45, 41, 37, 0.65); font-family: var(--latin); font-size: 10px; letter-spacing: 0.08em; }

.toast {
  position: absolute;
  left: 50%;
  bottom: 72px;
  z-index: 70;
  max-width: 80%;
  padding: 9px 14px;
  border-radius: 18px;
  background: rgba(45, 41, 37, 0.88);
  color: white;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}

.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@keyframes calendarFlip {
  0% { transform: rotateX(0); }
  49% { transform: rotateX(-88deg); opacity: 0.65; }
  51% { transform: rotateX(88deg); opacity: 0.65; }
  100% { transform: rotateX(0); }
}

@keyframes calendarYearRun {
  0% { transform: perspective(700px) rotateX(0) translateY(0); }
  50% { transform: perspective(700px) rotateX(-10deg) translateY(-3px); }
  100% { transform: perspective(700px) rotateX(0) translateY(0); }
}

@keyframes yearInkPulse {
  0%, 100% { opacity: 1; filter: blur(0); }
  50% { opacity: 0.46; filter: blur(0.7px); }
}

@keyframes photoReveal {
  0% {
    opacity: 0;
    transform: translateY(22px) rotate(-1.5deg) scale(0.92);
    filter: saturate(0.35) sepia(0.18) blur(1.5px);
  }
  68% {
    opacity: 1;
    transform: translateY(-3px) rotate(0.4deg) scale(1.015);
    filter: saturate(0.92) sepia(0.05) blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
    filter: none;
  }
}

@keyframes hatPop {
  0% { opacity: 0; transform: translate(-50%, -77%) rotate(var(--hat-rotate)) scale(0.42); }
  72% { opacity: 1; transform: translate(-50%, -104%) rotate(var(--hat-rotate)) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, -100%) rotate(var(--hat-rotate)) scale(1); }
}

@keyframes candleFlicker {
  0% { transform: translateX(-50%) rotate(-5deg) scaleY(0.94); }
  100% { transform: translateX(-50%) rotate(6deg) scaleY(1.08); }
}

@keyframes blowOut {
  0% { opacity: 1; transform: translateX(-50%) rotate(0) scale(1); }
  55% { opacity: 0.7; transform: translate(-75%, 2px) rotate(-32deg) scale(0.55); }
  100% { opacity: 0; transform: translate(-110%, 6px) rotate(-58deg) scale(0.08); }
}

@keyframes smokeRise {
  0% { opacity: 0; transform: translate(-50%, 3px) scale(0.7); }
  30% { opacity: 0.55; }
  100% { opacity: 0; transform: translate(-35%, -34px) scale(1.15) rotate(12deg); }
}

@keyframes wishSparkle {
  0% { opacity: 0; transform: rotate(45deg) scale(0); }
  45% { opacity: 0.9; transform: rotate(135deg) scale(1); }
  100% { opacity: 0; transform: translateY(-18px) rotate(225deg) scale(0.3); }
}

@keyframes musicPulse {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-2px) rotate(4deg); }
}

@media (min-width: 431px) {
  body {
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08), transparent 24%),
      repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 7px),
      #a9212a;
  }

  .card-app {
    border: 8px solid rgba(255, 253, 248, 0.8);
    border-radius: 28px;
    box-shadow: 0 30px 70px rgba(50, 10, 18, 0.4);
  }
}

@media (max-height: 740px), (max-width: 430px) {
  .page { padding-top: 57px; padding-bottom: 70px; }
  .calendar-stack { width: 255px; height: 267px; margin-top: 22px; }
  .calendar-message { margin-top: 6px; }
  .childhood-collage { height: 340px; }
  .childhood-collage .polaroid { width: 50%; }
  .childhood-two { top: 84px; }
  .childhood-copy { font-size: 12px; }
  .phone-frame { width: 70%; height: 49%; }
  .vertical-film > .photo-slot { height: 145px; }
  .scattered-photos { height: 475px; }
  .photo-c { top: 276px; }
  .note-moments { margin-top: -26px; }
  .food-grid { grid-template-rows: 135px 135px; }
  .us-collage { height: 410px; }
  .postcard { margin-top: 18px; }
  .postcard-photo { height: 190px; }
  .postcard-message { min-height: 150px; padding: 14px 12px 9px; }
  .postcard-message::before { top: 12px; bottom: 8px; }
  .postcard-message p { font-size: 11px; line-height: 1.52; }
  .postmark { top: 14px; width: 98px; height: 98px; }
  .postmark span { font-size: 12px; }
  .postmark b { font-size: 17px; }
  .postmark small { font-size: 7px; }
  .us-quote { margin-top: 17px; padding: 12px 13px; font-size: 12px; }
  .contact-sheet { grid-template-rows: 115px 115px; }
  .wishes-heading { margin-top: 0; }
  .wishes-heading p { margin-top: 14px; font-size: 16px; line-height: 1.7; }
  .envelope-stage { height: 278px; margin-top: 8px; }
  .envelope { height: 202px; }
  .letter-peek { height: 185px; bottom: 40px; }
  .wax-seal { top: 56px; }
  .envelope-letter-label { bottom: 9px; }
  .open-letter-label { min-height: 40px; margin-top: 0; }
  .page-fraction { margin-top: 7px; }
  .letter-paper { margin-top: 14px; padding: 22px 18px; }
  .letter-paper p { font-size: 12px; line-height: 1.62; }
  .final-line { font-size: 12px; }
  .story-gift-inset { right: -10px; bottom: -21px; width: 30%; }
  .cake-title { margin-top: 0; }
  .cake-title h2 { font-size: 24px; }
  .cake-title p { margin-top: 7px; font-size: 13px; line-height: 1.55; }
  .cake-stage { width: min(84%, 325px); height: 345px; margin-top: -10px; }
  .birthday-cake { max-height: 330px; }
  .candles { top: 48px; width: 48%; transform: translateX(-50%) scale(0.84); transform-origin: 50% 100%; }
  .blow-candles-button { margin-top: -3px; }
  .cake-wish-result { margin-top: 8px; font-size: 13px; }
  .cake-final-line { margin-top: 5px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) *,
  html:not(.force-motion) *::before,
  html:not(.force-motion) *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Three-sheet final letter */
.wishes-letter .letter-title {
  margin-top: 4px;
}

.wishes-letter .letter-title h2 {
  padding: 6px 16px;
  font-size: 22px;
}

.wishes-letter .letter-paper {
  width: 96%;
  margin-top: 11px;
  padding: 17px 20px 15px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 20px, rgba(185,143,128,0.1) 20px 21px),
    var(--paper-light);
  text-align: left;
}

.wishes-letter .letter-paper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  border-left: 1px solid rgba(201,47,47,0.13);
  pointer-events: none;
}

.wishes-letter-two .letter-paper::before { transform: rotate(-2deg); background: rgba(205,70,77,0.52); }
.wishes-letter-three .letter-paper::before { transform: rotate(1deg); background: rgba(235,157,164,0.7); }

.wishes-letter .letter-paper h3 {
  margin-bottom: 11px;
  padding-bottom: 7px;
  font-size: 17px;
  line-height: 1.25;
  text-align: center;
}

.wishes-letter .letter-paper h3 em { font-size: 21px; }

.wishes-letter .letter-paper p {
  margin: 0 0 7px;
  font-size: 12px;
  line-height: 1.58;
  letter-spacing: 0.015em;
  text-align: left;
  text-indent: 2em;
}

.wishes-letter .letter-paper .letter-emphasis {
  margin-top: 4px;
  color: var(--red-dark);
  font-family: var(--script);
  font-weight: 600;
  text-align: center;
  text-indent: 0;
}

.wishes-letter .letter-paper .signature {
  margin-top: 8px;
  color: var(--red-dark);
  font-family: var(--script);
  line-height: 1.5;
  text-align: right;
  text-indent: 0;
}

.wishes-letter .letter-paper .signature strong {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.wishes-letter-three .letter-paper {
  padding: 14px 18px 12px;
}

.wishes-letter-three .letter-paper h3 {
  margin-bottom: 7px;
  font-size: 16px;
}

.wishes-letter-three .letter-paper h3 em { font-size: 20px; }

.wishes-letter-three .letter-paper p {
  margin-bottom: 4px;
  font-size: 11.5px;
  line-height: 1.5;
}

.wishes-letter .close-letter-button {
  min-height: 36px;
  margin-top: 8px;
  padding: 6px 17px;
  font-size: 13px;
}

.wishes-letter .page-fraction { margin-top: 5px; }
.wishes-letter .final-line { margin-top: 4px; font-size: 11px; }

.wishes-letter.is-active .letter-paper p:nth-of-type(1),
.wishes-letter.is-turning-in .letter-paper p:nth-of-type(1) { --ink-delay: 780ms; }
.wishes-letter.is-active .letter-paper p:nth-of-type(2),
.wishes-letter.is-turning-in .letter-paper p:nth-of-type(2) { --ink-delay: 1.02s; }
.wishes-letter.is-active .letter-paper p:nth-of-type(3),
.wishes-letter.is-turning-in .letter-paper p:nth-of-type(3) { --ink-delay: 1.26s; }
.wishes-letter.is-active .letter-paper p:nth-of-type(4),
.wishes-letter.is-turning-in .letter-paper p:nth-of-type(4) { --ink-delay: 1.5s; }
.wishes-letter.is-active .letter-paper p:nth-of-type(5),
.wishes-letter.is-turning-in .letter-paper p:nth-of-type(5) { --ink-delay: 1.74s; }
.wishes-letter.is-active .letter-paper p:nth-of-type(6),
.wishes-letter.is-turning-in .letter-paper p:nth-of-type(6) { --ink-delay: 1.98s; }
.wishes-letter.is-active .letter-paper p:nth-of-type(7),
.wishes-letter.is-turning-in .letter-paper p:nth-of-type(7) { --ink-delay: 2.22s; }
.wishes-letter.is-active .letter-paper p:nth-of-type(8),
.wishes-letter.is-turning-in .letter-paper p:nth-of-type(8) { --ink-delay: 2.46s; }
.wishes-letter.is-active .letter-paper p:nth-of-type(9),
.wishes-letter.is-turning-in .letter-paper p:nth-of-type(9) { --ink-delay: 2.7s; }

@media (max-height: 740px), (max-width: 430px) {
  .wishes-letter .letter-title { margin-top: 0; }
  .wishes-letter .letter-title h2 { padding: 5px 13px; font-size: 19px; }
  .wishes-letter .letter-paper { margin-top: 8px; padding: 13px 16px 11px; }
  .wishes-letter .letter-paper h3 { margin-bottom: 7px; font-size: 15px; }
  .wishes-letter .letter-paper h3 em { font-size: 18px; }
  .wishes-letter .letter-paper p { margin-bottom: 5px; font-size: 10.8px; line-height: 1.46; }
  .wishes-letter-three .letter-paper { padding: 11px 14px 9px; }
  .wishes-letter-three .letter-paper h3 { margin-bottom: 4px; font-size: 14px; }
  .wishes-letter-three .letter-paper h3 em { font-size: 17px; }
  .wishes-letter-three .letter-paper p { margin-bottom: 4px; font-size: 10.7px; line-height: 1.43; }
  .wishes-letter .close-letter-button { min-height: 32px; margin-top: 5px; padding: 4px 13px; font-size: 11px; }
  .wishes-letter .page-fraction { margin-top: 3px; font-size: 11px; }
  .wishes-letter .final-line { margin-top: 2px; font-size: 9.5px; }
}

/* 2026 cinematic scrapbook direction */
:root {
  --warm-glow: rgba(255, 205, 180, 0.28);
  --rose-glow: rgba(220, 77, 91, 0.16);
  --paper-edge: rgba(118, 79, 61, 0.17);
  --ease-film: cubic-bezier(0.22, 0.72, 0.2, 1);
}

.card-app {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.54),
    inset 0 0 48px rgba(154, 91, 75, 0.08),
    0 30px 70px rgba(50, 10, 18, 0.36);
  overflow: clip;
}

.card-app::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 45% 24%, rgba(255,255,255,0.86), transparent 30%),
    radial-gradient(circle at 72% 72%, var(--warm-glow), transparent 34%),
    radial-gradient(circle at 12% 68%, var(--rose-glow), transparent 30%);
  animation: warmLightBreath 9s ease-in-out infinite alternate;
}

.ambient-light {
  position: absolute;
  z-index: 1;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(35px);
  mix-blend-mode: soft-light;
  opacity: 0.5;
}

.ambient-light-one {
  top: -120px;
  right: -110px;
  background: rgba(255, 216, 193, 0.72);
  animation: ambientDriftOne 13s ease-in-out infinite alternate;
}

.ambient-light-two {
  bottom: -150px;
  left: -120px;
  background: rgba(222, 82, 94, 0.34);
  animation: ambientDriftTwo 15s ease-in-out infinite alternate;
}

.floating-dust {
  position: absolute;
  inset: 0;
  z-index: 19;
  overflow: hidden;
  pointer-events: none;
}

.floating-dust i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.84);
  box-shadow: 0 0 8px rgba(255,218,195,0.8);
  animation: dustFloat 10s linear infinite;
}

.floating-dust i:nth-child(1) { left: 12%; top: 82%; animation-delay: -1s; }
.floating-dust i:nth-child(2) { left: 28%; top: 64%; animation-delay: -6s; animation-duration: 13s; }
.floating-dust i:nth-child(3) { left: 52%; top: 91%; animation-delay: -3s; animation-duration: 11s; }
.floating-dust i:nth-child(4) { left: 71%; top: 74%; animation-delay: -8s; animation-duration: 14s; }
.floating-dust i:nth-child(5) { left: 88%; top: 88%; animation-delay: -5s; animation-duration: 12s; }
.floating-dust i:nth-child(6) { left: 40%; top: 72%; animation-delay: -9s; animation-duration: 16s; }

.paper-noise {
  opacity: 0.38;
  background-image:
    repeating-linear-gradient(8deg, rgba(90, 70, 55, 0.032) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(97deg, rgba(255,255,255,0.36) 0 1px, transparent 1px 7px),
    radial-gradient(circle, rgba(83,55,43,0.08) 0 0.55px, transparent 0.8px);
  background-size: auto, auto, 11px 13px;
}

.pages { z-index: 2; perspective: 1900px; }

.page {
  background:
    linear-gradient(103deg, rgba(255,255,255,0.28), transparent 34%, rgba(145,85,68,0.035) 82%),
    radial-gradient(circle at 50% 25%, rgba(255,255,255,0.76), transparent 56%);
  box-shadow: inset -10px 0 22px rgba(92, 66, 53, 0.035);
  overflow: clip;
}

.page > *:not(.torn-corner) { transform-style: preserve-3d; }

.page.is-active .page-heading,
.page.is-turning-in .page-heading,
.page.is-active .intro-copy,
.page.is-turning-in .intro-copy {
  animation: titleCinematicIn 1.15s 140ms var(--ease-film) both;
}

.page.is-active .chapter-number,
.page.is-turning-in .chapter-number {
  animation: chapterInkIn 1.1s 220ms ease-out both;
}

.page.is-active .body-copy,
.page.is-turning-in .body-copy,
.page.is-active .long-us-copy,
.page.is-turning-in .long-us-copy,
.page.is-active .big-quote,
.page.is-turning-in .big-quote {
  animation: copyReveal 1.25s 760ms var(--ease-film) both;
}

.page[data-entry="memory"].is-turning-in {
  animation: memoryFocus 900ms var(--ease-film) both;
}

.page[data-entry="film"].is-turning-in {
  animation: filmGateIn 920ms var(--ease-film) both;
}

.page[data-entry="postcard"].is-turning-in {
  animation: postcardTableIn 950ms var(--ease-film) both;
}

.page[data-entry="ceremony"].is-turning-in {
  animation: ceremonyIn 1.15s cubic-bezier(0.16, 0.8, 0.18, 1) both;
}

.card-app[data-transition="film"] .page.is-turning-out::before {
  background: linear-gradient(90deg, rgba(40,25,20,0.06), rgba(40,25,20,0.54) 50%, rgba(255,245,225,0.22));
}

.card-app[data-transition="ceremony"] .page.is-turning-out::before {
  background: radial-gradient(circle at 50% 48%, rgba(255,250,232,0.74), rgba(107,39,43,0.38));
}

.progress-track {
  position: relative;
  overflow: visible;
}

.progress-track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  opacity: 0;
  background: #fff8ed;
  box-shadow: 0 0 0 2px var(--red), 0 0 10px rgba(201,47,47,0.65);
}

.card-app.is-auto-running .progress-track::after {
  opacity: 1;
  animation: autoProgress var(--auto-duration) linear both;
}

.sound-button {
  border-color: rgba(153, 43, 49, 0.25);
  background: rgba(255, 250, 242, 0.76);
  box-shadow: 0 5px 18px rgba(78,45,37,0.1), inset 0 0 0 1px rgba(255,255,255,0.5);
}

.page-calendar .calendar-stack {
  filter: drop-shadow(0 18px 17px rgba(73,44,34,0.2));
}

.calendar-sheet-front::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,0.48) 48%, transparent 63%);
  transform: translateX(-110%);
}

.calendar-stack.is-year-running .calendar-sheet-front::after {
  animation: calendarLightSweep 1.05s ease-in-out infinite;
}

.calendar-stack.is-year-running {
  animation: calendarCameraPush 2.25s cubic-bezier(0.18,0.72,0.2,1) both;
}

.page-childhood.is-active .childhood-one,
.page-childhood.is-turning-in .childhood-one {
  animation: paperSettleLeft 1.15s 260ms var(--ease-film) both;
}

.page-childhood.is-active .childhood-two,
.page-childhood.is-turning-in .childhood-two {
  animation: paperSettleRight 1.15s 620ms var(--ease-film) both;
}

.page-story-chat.is-active .phone-frame,
.page-story-chat.is-turning-in .phone-frame {
  animation: phoneMemoryIn 1.25s 260ms var(--ease-film) both;
}

.page-story-chat.is-active .phone-frame .photo-image,
.page-story-chat.is-turning-in .phone-frame .photo-image {
  animation: chatCameraBrowse 7.2s 900ms ease-in-out both;
}

.page-story-chat.is-active .taped-note,
.page-story-chat.is-turning-in .taped-note {
  animation: noteDropIn 850ms 1.35s cubic-bezier(0.18,0.82,0.26,1.2) both;
}

.page-confession.is-active .confession-photo,
.page-confession.is-turning-in .confession-photo {
  animation: instantDevelop 1.7s 240ms ease-out both;
}

.page-confession.is-active .story-gift-inset,
.page-confession.is-turning-in .story-gift-inset {
  animation: giftStampIn 860ms 1.25s cubic-bezier(0.18,0.82,0.24,1.16) both;
}

.moments-one.is-active .vertical-film,
.moments-one.is-turning-in .vertical-film {
  animation: filmFeed 1.4s 220ms cubic-bezier(0.16,0.78,0.2,1) both;
}

.vertical-film .film-hole-row {
  animation: projectorJitter 1.8s steps(2, end) infinite;
}

.moments-two.is-active .scattered-photos .polaroid,
.moments-two.is-turning-in .scattered-photos .polaroid {
  animation: deskPhotoLand 1s var(--land-delay, 280ms) cubic-bezier(0.18,0.82,0.24,1.15) both;
}

.moments-two .photo-a { --land-delay: 220ms; }
.moments-two .photo-b { --land-delay: 560ms; }
.moments-two .photo-c { --land-delay: 900ms; }

.moments-two.is-active .doodle-star,
.moments-two.is-turning-in .doodle-star {
  animation: doodleDraw 1s 1.45s ease-out both;
}

.moments-three.is-active .moment-feature,
.moments-three.is-turning-in .moment-feature {
  animation: topDownMemory 1.2s 230ms var(--ease-film) both;
}

.moments-three.is-active .scalloped-frame,
.moments-three.is-turning-in .scalloped-frame {
  animation: keepsakeBreath 5.8s 1.1s ease-in-out infinite alternate;
}

.food-one.is-active .food-card,
.food-one.is-turning-in .food-card {
  animation: dishReveal 1.05s var(--food-delay, 250ms) var(--ease-film) both;
}

.food-one .food-card:nth-child(1) { --food-delay: 230ms; }
.food-one .food-card:nth-child(2) { --food-delay: 530ms; }
.food-one .food-card:nth-child(3) { --food-delay: 810ms; }

.food-one.is-active .strawberry-doodle,
.food-one.is-turning-in .strawberry-doodle {
  animation: warmSteam 2.4s 1.2s ease-in-out infinite;
}

.food-two.is-active .food-main-photo,
.food-two.is-turning-in .food-main-photo {
  animation: tablePhotoIn 1.2s 220ms var(--ease-film) both;
}

.food-two.is-active .menu-note,
.food-two.is-turning-in .menu-note {
  animation: receiptSlideIn 1s 720ms var(--ease-film) both;
}

.us-one.is-active .us-collage .polaroid,
.us-one.is-turning-in .us-collage .polaroid {
  animation: developedPrintIn 1.15s var(--print-delay, 250ms) var(--ease-film) both;
}

.us-one .us-photo-one { --print-delay: 260ms; }
.us-one .us-photo-two { --print-delay: 650ms; }

.us-two.is-active .postcard,
.us-two.is-turning-in .postcard {
  animation: postcardArrive 1.3s 230ms var(--ease-film) both;
}

.us-two.is-active .postmark,
.us-two.is-turning-in .postmark {
  animation: postmarkStamp 950ms 1.1s cubic-bezier(0.18,0.82,0.24,1.15) both;
}

.us-three::before {
  background:
    radial-gradient(circle at 50% 31%, rgba(201,47,47,0.12), transparent 23%),
    linear-gradient(90deg, rgba(74,39,32,0.02), rgba(74,39,32,0.22));
}

.us-three.is-active .days-counter strong,
.us-three.is-turning-in .days-counter strong {
  animation: daysHeartbeat 2.25s 2.5s ease-in-out infinite;
  text-shadow: 0 8px 24px rgba(201,47,47,0.14);
}

.us-three.is-active .contact-sheet .photo-slot,
.us-three.is-turning-in .contact-sheet .photo-slot {
  animation: contactFrameIn 1s var(--contact-delay, 400ms) var(--ease-film) both;
}

.us-three .contact-sheet .photo-slot:nth-child(1) { --contact-delay: 420ms; }
.us-three .contact-sheet .photo-slot:nth-child(2) { --contact-delay: 780ms; }
.us-three .contact-sheet .photo-slot:nth-child(3) { --contact-delay: 1.14s; }
.us-three .contact-sheet .photo-slot:nth-child(4) { --contact-delay: 1.5s; }

.wishes-envelope.is-active .wax-seal {
  animation: sealInvitation 2.2s ease-in-out infinite;
}

.wishes-envelope.is-active .envelope-stage {
  animation: envelopeHover 5s ease-in-out infinite alternate;
}

.envelope-stage::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -3px;
  height: 36px;
  border-radius: 50%;
  background: rgba(112,65,54,0.2);
  filter: blur(15px);
  transform: scaleX(0.82);
  transition: opacity 700ms ease, transform 700ms ease;
}

.envelope-stage.is-open::after { opacity: 0.45; transform: scaleX(1.02); }
.envelope-stage.is-open { animation: none; }

.wishes-letter.is-active .letter-paper,
.wishes-letter.is-turning-in .letter-paper {
  animation: letterRise 1.45s 180ms cubic-bezier(0.16,0.82,0.2,1) both;
}

.wishes-letter.is-active .letter-paper h3,
.wishes-letter.is-active .letter-paper p,
.wishes-letter.is-turning-in .letter-paper h3,
.wishes-letter.is-turning-in .letter-paper p {
  animation: inkLineReveal 1.15s var(--ink-delay, 650ms) ease-out both;
}

.letter-paper h3 { --ink-delay: 620ms; }
.letter-paper p:nth-of-type(1) { --ink-delay: 1s; }
.letter-paper p:nth-of-type(2) { --ink-delay: 1.5s; }
.letter-paper p:nth-of-type(3) { --ink-delay: 2s; }

.wishes-cake.is-active .birthday-cake,
.wishes-cake.is-turning-in .birthday-cake {
  animation: cakeSettle 1.35s 230ms var(--ease-film) both;
}

.wishes-cake.is-active .cake-stage::after {
  content: "";
  position: absolute;
  inset: 15% 5% 5%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,208,148,0.22), transparent 68%);
  animation: candleRoomGlow 2.2s ease-in-out infinite alternate;
}

.card-app.wish-made::before {
  animation: wishLightBloom 2.4s ease-out both;
}

@keyframes warmLightBreath { to { transform: translate3d(2%, -1.5%, 0) scale(1.05); filter: saturate(1.05); } }
@keyframes ambientDriftOne { to { transform: translate(-42px, 65px) scale(1.16); opacity: 0.7; } }
@keyframes ambientDriftTwo { to { transform: translate(55px, -58px) scale(1.1); opacity: 0.66; } }
@keyframes dustFloat { 0% { translate: 0 40px; opacity: 0; } 18% { opacity: .72; } 75% { opacity: .32; } 100% { translate: 18px -480px; opacity: 0; } }
@keyframes titleCinematicIn { 0% { opacity: 0; translate: 0 19px; filter: blur(2px); letter-spacing: .17em; } 100% { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes chapterInkIn { 0% { opacity: 0; translate: 18px -8px; filter: blur(2px); } 100% { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes copyReveal { 0% { opacity: 0; translate: 0 14px; clip-path: inset(0 0 100% 0); } 100% { opacity: 1; translate: 0 0; clip-path: inset(0); } }
@keyframes memoryFocus { 0% { opacity: 0; filter: blur(12px) sepia(.2); scale: 1.045; } 100% { opacity: 1; filter: none; scale: 1; } }
@keyframes filmGateIn { 0% { opacity: 0; clip-path: inset(0 48% 0 48%); filter: brightness(.6) sepia(.3); } 65% { filter: brightness(1.13) sepia(.08); } 100% { opacity: 1; clip-path: inset(0); filter: none; } }
@keyframes postcardTableIn { 0% { opacity: 0; translate: 13px 28px; rotate: 1.2deg; filter: sepia(.18); } 100% { opacity: 1; translate: 0 0; rotate: 0deg; filter: none; } }
@keyframes ceremonyIn { 0% { opacity: 0; filter: blur(9px) brightness(1.22); scale: 1.035; } 100% { opacity: 1; filter: none; scale: 1; } }
@keyframes autoProgress { from { left: 0; } to { left: calc(100% - 7px); } }
@keyframes calendarLightSweep { to { transform: translateX(110%); } }
@keyframes calendarCameraPush { 0% { scale: 1; translate: 0 0; } 70% { scale: 1.055; translate: 0 -4px; } 100% { scale: 1.035; translate: 0 -2px; } }
@keyframes paperSettleLeft { 0% { opacity: 0; translate: -38px 30px; rotate: -5deg; scale: .92; } 75% { translate: 3px -2px; } 100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } }
@keyframes paperSettleRight { 0% { opacity: 0; translate: 38px 34px; rotate: 6deg; scale: .92; } 75% { translate: -3px -2px; } 100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } }
@keyframes phoneMemoryIn { 0% { opacity: 0; translate: 0 42px; scale: .92; filter: blur(4px); } 100% { opacity: 1; translate: 0 0; scale: 1; filter: none; } }
@keyframes chatCameraBrowse { 0% { scale: 1.03; translate: 0 0; } 45% { scale: 1.12; translate: 0 10px; } 100% { scale: 1.08; translate: 0 -7px; } }
@keyframes noteDropIn { 0% { opacity: 0; translate: 0 -28px; rotate: -4deg; } 70% { translate: 0 4px; rotate: 1deg; } 100% { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes instantDevelop { 0% { opacity: .08; filter: grayscale(1) sepia(.5) brightness(1.7); scale: .94; } 45% { opacity: 1; filter: grayscale(.65) sepia(.28) brightness(1.25); } 100% { opacity: 1; filter: none; scale: 1; } }
@keyframes giftStampIn { 0% { opacity: 0; scale: 1.6; rotate: 8deg; } 72% { opacity: 1; scale: .94; rotate: -2deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes filmFeed { 0% { opacity: 0; translate: 0 -180px; filter: brightness(.72); } 72% { translate: 0 7px; } 100% { opacity: 1; translate: 0 0; filter: none; } }
@keyframes projectorJitter { 0%,100% { translate: 0 0; } 50% { translate: 0 1px; } }
@keyframes deskPhotoLand { 0% { opacity: 0; translate: 0 -85px; scale: 1.05; } 72% { translate: 0 6px; scale: .985; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes doodleDraw { 0% { opacity: 0; clip-path: circle(0 at 50% 50%); rotate: -20deg; } 100% { opacity: 1; clip-path: circle(80% at 50% 50%); rotate: 0deg; } }
@keyframes topDownMemory { 0% { opacity: 0; scale: 1.08; filter: blur(3px); } 100% { opacity: 1; scale: 1; filter: none; } }
@keyframes keepsakeBreath { to { translate: 0 -4px; filter: drop-shadow(0 12px 10px rgba(102,63,52,.14)); } }
@keyframes dishReveal { 0% { opacity: 0; scale: .82; clip-path: circle(0 at 50% 50%); } 100% { opacity: 1; scale: 1; clip-path: circle(75% at 50% 50%); } }
@keyframes warmSteam { 0%,100% { translate: 0 2px; opacity: .5; } 50% { translate: 3px -10px; opacity: 1; } }
@keyframes tablePhotoIn { 0% { opacity: 0; translate: -42px 25px; rotate: -3deg; } 100% { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes receiptSlideIn { 0% { opacity: 0; translate: 54px 14px; } 100% { opacity: 1; translate: 0 0; } }
@keyframes developedPrintIn { 0% { opacity: 0; translate: 0 52px; filter: grayscale(.8) brightness(1.35); } 100% { opacity: 1; translate: 0 0; filter: none; } }
@keyframes postcardArrive { 0% { opacity: 0; translate: 70px 20px; rotate: 4deg; scale: .94; } 100% { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } }
@keyframes postmarkStamp { 0% { opacity: 0; scale: 1.8; rotate: 20deg; filter: blur(2px); } 70% { opacity: 1; scale: .94; rotate: -3deg; filter: blur(0); } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes daysHeartbeat { 0%,100% { scale: 1; } 8% { scale: 1.045; } 15% { scale: 1; } 23% { scale: 1.025; } 31% { scale: 1; } }
@keyframes contactFrameIn { 0% { opacity: 0; clip-path: inset(50% 0 50% 0); filter: brightness(1.4); } 100% { opacity: 1; clip-path: inset(0); filter: none; } }
@keyframes sealInvitation { 0%,100% { box-shadow: 0 5px 8px rgba(102,34,34,.24), 0 0 0 0 rgba(201,47,47,.26); scale: 1; } 50% { box-shadow: 0 7px 12px rgba(102,34,34,.26), 0 0 0 12px rgba(201,47,47,0); scale: 1.045; } }
@keyframes envelopeHover { to { translate: 0 -7px; } }
@keyframes letterRise { 0% { opacity: 0; translate: 0 115px; scale: .94; filter: brightness(1.12); } 100% { opacity: 1; translate: 0 0; scale: 1; filter: none; } }
@keyframes inkLineReveal { 0% { opacity: 0; clip-path: inset(0 100% 0 0); filter: blur(1px); } 100% { opacity: 1; clip-path: inset(0); filter: none; } }
@keyframes cakeSettle { 0% { opacity: 0; translate: 0 58px; scale: .9; } 72% { translate: 0 -4px; scale: 1.015; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes candleRoomGlow { to { opacity: .72; scale: 1.06; } }
@keyframes wishLightBloom { 0% { filter: brightness(1); } 40% { filter: brightness(1.16) saturate(1.08); } 100% { filter: brightness(1.03); } }

@media (max-height: 740px), (max-width: 430px) {
  .ambient-light { width: 210px; height: 210px; }
  .floating-dust { opacity: .7; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) .ambient-light,
  html:not(.force-motion) .floating-dust,
  html:not(.force-motion) .card-app::before {
    animation: none !important;
  }
}