/* Visual refinement layer: preserves the original screens and personal media. */
:root {
  --bg-deep: #160a18;
  --bg-plum: #241027;
  --rose: #d989a7;
  --blush: #f0b6c8;
  --ivory: #f7f0e9;
  --muted-mauve: #866274;
  --bg: var(--bg-deep);
  --text: var(--ivory);
  --pink: var(--blush);
  --muted: #bda6b2;
  --line: #f0b6c826;
  --ease-letter: cubic-bezier(.22,.61,.36,1);
}
body { --light-x: 45%; --light-y: 32%; }
body[data-chapter="1"] { --light-x: 28%; --light-y: 42%; }
body[data-chapter="2"] { --light-x: 70%; --light-y: 36%; }
body[data-chapter="3"] { --light-x: 35%; --light-y: 18%; }
body[data-chapter="4"] { --light-x: 50%; --light-y: 48%; }
body[data-chapter="5"] { --light-x: 55%; --light-y: 24%; }
.ambient { background: radial-gradient(ellipse at var(--light-x) var(--light-y),#6b35452b,transparent 70%),linear-gradient(165deg,#24102766,transparent 75%); }
.ambient:after { opacity: .1; }
.app { padding-bottom: max(20px,env(safe-area-inset-bottom)); }
.topbar { opacity: .88; }
.wordmark span { color: var(--muted); }
.screen-inner { animation: page-arrive .55s var(--ease-letter) backwards; }
/* Backwards fill leaves no transformed ancestor around the fixed overlays. */
@keyframes page-arrive { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.reason-modal-open .screen-inner { animation:none; }
h2 { color: var(--ivory); letter-spacing: -.045em; text-wrap: balance; }
.eyebrow { font-size: 10px; letter-spacing: 2.5px; line-height: 1.7; }
.subtitle { line-height: 1.75; }
.micro,.signature { color: #b298a8; }
.micro,.heart-tap { font-size: 11px; }
.signature { font-size: 9px; letter-spacing: 1.6px; }
.progress-dot { background: #785366; }
.progress-dot.active { background: var(--blush); }
.back-button,.screen-count { color: var(--muted); }
.primary {
  background: #f0b6c8e6;
  border: 1px solid #f7f0e959;
  border-radius: 12px;
  color: #321c2b;
  min-height: 54px;
  box-shadow: inset 0 1px 0 #fff4,0 8px 22px #0002;
  transition: transform .22s var(--ease-letter),background .22s;
}
.primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff4,0 8px 22px #0002; }
.primary:active { transform: scale(.975); }
.primary .arrow { transition: transform .22s var(--ease-letter); }
.primary:hover .arrow,.primary:active .arrow { transform: translateX(4px); }
.primary:disabled { opacity:.5; }
.sculpture,.spark,.heart-tap span { animation: none; }
.heart-start .heart-halo { opacity:.35; }
.heart-start .sculpture { filter:drop-shadow(0 14px 22px #07020640); }
.heart-transition { background: #412337; }
@keyframes heart-zoom-fast { from { transform:scale(1);opacity:1; } to { transform:scale(1.12);opacity:0; } }
.love-heart { rotate: -3deg; filter: drop-shadow(0 7px 10px #09050b55); transition:transform .25s var(--ease-letter); }
.love-heart:nth-child(2) { rotate: 3deg; translate: 0 5px; }
.love-heart:nth-child(3) { rotate: 2deg; }
.love-heart:nth-child(4) { rotate: -2deg; translate: 0 4px; }
.love-heart:before { color: #b87590; }
.love-heart:nth-child(2):before { color: #aa6987; }
.love-heart:nth-child(3):before { color: #c3869f; }
.love-heart:nth-child(4):before { color: #a96783; }
.love-heart { animation: heart-pulse 3.2s ease-in-out infinite; }
.love-heart:nth-child(2) { animation-delay: .2s; }
.love-heart:nth-child(3) { animation-delay: .4s; }
.love-heart:nth-child(4) { animation-delay: .6s; }
.love-heart:active { animation-play-state: paused; }
.love-heart:active { transform: scale(.97); }
.reason-dialog { height:100vh; height:100dvh; animation: soft-reveal .4s var(--ease-letter) backwards; overflow:hidden; padding-top:max(25px,env(safe-area-inset-top)); backdrop-filter:none; }
@keyframes soft-reveal { from { opacity:0; } to { opacity:1; } }
.reason-dialog-copy button,.first-video-close { min-height:44px; min-width:44px; }
.reason-dialog-copy button { padding:8px 16px; }
.reason-dialog-card,.reason-dialog-card:before,.reason-dialog-card:after { background:#bd7895; }
.reason-dialog-copy p { color:var(--ivory); }
.memories-screen .polaroids { gap:18px 14px; margin:26px 6px 32px; }
.polaroid { --tilt:-3deg; padding:7px 7px 15px; background:#f0e8de; border:1px solid #fff8; box-shadow:0 2px 3px #0002,0 12px 22px #05030740; transform:rotate(var(--tilt)); animation:photo-arrive .75s var(--ease-letter) backwards; }
.polaroid:nth-child(2) { --tilt:3deg; transform:rotate(var(--tilt)); margin-top:17px; animation-delay:.14s; }
.polaroid:nth-child(3) { --tilt:2deg; transform:rotate(var(--tilt)); animation-delay:.28s; }
.polaroid:nth-child(4) { --tilt:-3deg; transform:rotate(var(--tilt)); margin-top:14px; animation-delay:.42s; }
.polaroid figcaption { color:#59434c; font-size:13px; line-height:1.3; }
@keyframes photo-arrive { from { opacity:0; transform:translateY(16px) rotate(0deg); } to { opacity:1; transform:translateY(0) rotate(var(--tilt)); } }
.envelope { background:#49313f; border-color:#aa7b8e66; border-radius:5px; box-shadow:inset 0 1px 0 #f0b6c81a,0 16px 30px #09040a40; }
.envelope-flap { background:#765060; transition:transform .65s var(--ease-letter); }
.seal { background:#d39aaf; box-shadow:inset 0 0 0 3px #d39aaf,inset 0 0 0 4px #9b5f793d,0 3px 8px #0002; transition:transform .2s var(--ease-letter),opacity .3s; }
.envelope:active .seal { transform:scale(.9); }
.envelope.open .seal { transform:scale(.88); }
.letter-paper { background:#f1e8de; color:#493a41; padding:30px 26px; border:1px solid #fff6; box-shadow:0 2px 3px #0002,0 16px 35px #08030b40; animation:paper-arrive .7s var(--ease-letter) backwards; }
.letter-paper p { font-size:14px; line-height:1.85; }
.letter-swipe-area { touch-action:pan-y; }
.letter-page-slot { position:relative; perspective:1200px; }
.letter-page { margin-bottom:12px; backface-visibility:hidden; }
.letter-page-settled { animation:none; }
.letter-page-clickable { cursor:pointer; }
.letter-page-clickable:focus-visible { outline:2px solid #935770; outline-offset:4px; }
.letter-click-hint { display:block; margin-top:18px; text-align:center; color:#935770; font-size:10px; letter-spacing:.4px; }
.letter-page-slot.is-turning > .letter-page:not(.letter-page-outgoing) { animation:letter-page-reveal .7s both; }
.letter-page-outgoing { position:absolute; inset:0 0 auto; z-index:2; width:100%; margin:0; pointer-events:none; transform-style:preserve-3d; }
.letter-page-outgoing.turn-forward { transform-origin:left center; animation:letter-turn-forward .7s ease-in both; }
.letter-page-outgoing.turn-back { transform-origin:right center; animation:letter-turn-back .7s ease-in both; }
@keyframes letter-turn-forward { 0% { transform:rotateY(0); opacity:1; } 65% { opacity:1; } 100% { transform:rotateY(-175deg); opacity:0; } }
@keyframes letter-turn-back { 0% { transform:rotateY(0); opacity:1; } 65% { opacity:1; } 100% { transform:rotateY(175deg); opacity:0; } }
@keyframes letter-page-reveal { 0%,42% { opacity:0; } 75%,100% { opacity:1; } }
.letter-pagination { display:flex; align-items:center; justify-content:center; gap:24px; margin:16px 0 0; }
.letter-turn { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:#f0b6c81c; color:var(--blush); font-size:21px; }
.letter-turn:disabled { opacity:.35; }
.letter-page-count { color:var(--muted); font-size:12px; letter-spacing:1.5px; }
.letter-swipe-hint { margin:6px 0 22px; text-align:center; }
.letter-signature { color:#935770; }
@keyframes paper-arrive { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
.letter-opening h2,.letter-opening .subtitle,.letter-opening .eyebrow { opacity:.5; transition:opacity .35s; }
.letter-focused h2 { font-size:clamp(34px,8vw,48px); }
.letter-focused .eyebrow { opacity:.75; }
.finale-view .screen-inner { position:relative; isolation:isolate; }
.finale-view .screen-inner > :not(.finale-balloons) { position:relative; z-index:1; }
.finale-view h2 .finale-greeting { display:block; animation:page-arrive .55s .12s var(--ease-letter) backwards; }
.finale-view h2 em { display:block; animation:page-arrive .62s .48s var(--ease-letter) backwards; }
.finale-view .subtitle { animation:page-arrive .6s .82s var(--ease-letter) backwards; }
.finale-view .final-photo { animation:photo-arrive .75s 1.18s var(--ease-letter) backwards; --tilt:-2deg; transform:rotate(-2deg); border-color:#efe4d9; box-shadow:0 3px 5px #0003,0 14px 30px #08030b55; }
.finale-view .micro,.finale-view .text-button { animation:soft-reveal .55s 1.85s backwards; }
.finale-balloons { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; animation:balloons-arrive .7s 2.45s ease-out forwards; }
.finale-balloon { position:absolute; display:block; width:38px; height:49px; border-radius:50% 50% 46% 46%; box-shadow:inset -7px -8px 12px #2c142237,inset 3px 4px 8px #fff7,0 8px 18px #1307134d; transform-origin:50% 120%; animation:balloon-float 5.8s ease-in-out infinite; }
.finale-balloon:before { content:''; position:absolute; top:8px; left:8px; width:9px; height:18px; border-radius:50%; background:#fff6; transform:rotate(25deg); }
.balloon-ivory { top:43%; left:-17px; background:linear-gradient(135deg,#fff8ee,#e8d3d5); }
.balloon-rose { top:53%; right:-15px; width:34px; height:45px; background:linear-gradient(135deg,#efb6c8,#b87590); animation-delay:.8s; }
.balloon-mauve { top:77%; left:1px; width:27px; height:36px; background:linear-gradient(135deg,#bd9aac,#765064); animation-delay:1.5s; }
@keyframes balloons-arrive { from { opacity:0; } to { opacity:.85; } }
@keyframes balloon-float { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-7px) rotate(3deg); } }
.confetti i { width:4px; height:7px; opacity:.7; }
.confetti .confetti-burst { top:19%; animation:confetti-burst var(--duration) cubic-bezier(.18,.55,.35,1) both; }
.confetti .confetti-fall { top:-12px; animation:confetti-drift var(--duration) linear both; }
@keyframes confetti-burst { 0% { opacity:0; transform:translate3d(0,0,0) rotate(0); } 12% { opacity:.75; } 25% { transform:translate3d(var(--burst-x),var(--burst-y),0) rotate(100deg); } 75% { opacity:.62; } 100% { opacity:0; transform:translate3d(calc(var(--burst-x) + var(--drift)),85vh,0) rotate(390deg); } }
@keyframes confetti-drift { 0% { opacity:0; transform:translate3d(0,0,0) rotate(0); } 12% { opacity:.65; } 85% { opacity:.65; } 100% { opacity:0; transform:translate3d(var(--drift),105vh,0) rotate(290deg); } }
.confetti .falling-balloon { position:absolute; top:-85px; animation:balloon-fall var(--balloon-duration) linear both; filter:drop-shadow(0 7px 8px #12071066); }
.falling-balloon-round { width:38px; height:48px; border-radius:50% 50% 46% 46%; background:radial-gradient(circle at 30% 25%,#fff9,var(--balloon-color) 38%,#7a4967); box-shadow:inset -5px -7px 10px #2c142237; }
.falling-balloon-round:before { content:''; position:absolute; top:8px; left:9px; width:9px; height:15px; border-radius:50%; background:#fff8; transform:rotate(25deg); }
.falling-balloon-number { display:flex; gap:2px; white-space:nowrap; }
.falling-balloon-number span { position:relative; color:var(--balloon-color); font:900 65px/1 var(--sans); -webkit-text-stroke:1px #fff8; text-shadow:2px 2px 0 #8b5872,4px 5px 7px #180a1a88; }
@keyframes balloon-fall { 0% { opacity:0; transform:translate3d(0,-12vh,0) rotate(-9deg); } 8% { opacity:.92; } 90% { opacity:.92; } 100% { opacity:0; transform:translate3d(var(--balloon-drift),125vh,0) rotate(12deg); } }
.first-video-modal { transform:scale(.94); transition:transform .65s var(--ease-letter),opacity .4s,border-radius .65s; }
.first-video-modal.visible { transform:scale(1); }
.first-video-modal.closing { transform:scale(.94); transition:transform .65s var(--ease-letter),opacity .65s; }
@media(max-width:360px) {
  .app { padding-left:max(20px,env(safe-area-inset-left)); padding-right:max(20px,env(safe-area-inset-right)); }
  h2 { font-size:36px; }
  .eyebrow { letter-spacing:1.8px; }
  .letter-paper { padding:25px 20px; }
  .reason-dialog .reason-dialog-card { translate:-20px -70px; }
  .reason-dialog .reason-dialog-copy { translate:-20px -70px; padding:16px; }
  .reason-dialog.reason-3 .reason-dialog-copy { translate:-20px -98px; }
  .reason-dialog.reason-4 .reason-dialog-copy { translate:-20px -102px; }
  .reason-dialog-copy p,.reason-dialog.reason-2 .reason-dialog-copy p,.reason-dialog.reason-4 .reason-dialog-copy p { font-size:12px; line-height:1.22; }
}
/* Keep all four messages centered in the smaller heart, above the face and bouquet. */
.reason-dialog {
  --reason-x: clamp(-44px,calc(36px - 17vw),-18px);
  --reason-y: clamp(-263px,calc(6px - 20dvh),-163px);
  --reason-size: clamp(175px,45vw,195px);
}
.reason-dialog .reason-dialog-card {
  width:var(--reason-size);
  height:var(--reason-size);
  translate:var(--reason-x) var(--reason-y);
  transform:rotate(-50deg);
}
.reason-dialog .reason-dialog-copy,
.reason-dialog.reason-3 .reason-dialog-copy,
.reason-dialog.reason-4 .reason-dialog-copy {
  width:clamp(224px,61vw,265px);
  min-height:var(--reason-size);
  padding:14px 17px;
  translate:var(--reason-x) calc(var(--reason-y) - 30px);
}
.reason-dialog .reason-dialog-copy span { font-size:18px; }
.reason-dialog .reason-dialog-copy p {
  max-width:100%;
  font-size:clamp(13px,3vw,14px);
  line-height:1.2;
  margin:7px 0 10px;
}
.reason-dialog.reason-2 .reason-dialog-copy p,
.reason-dialog.reason-4 .reason-dialog-copy p {
  max-width:100%;
  font-size:clamp(11.5px,2.6vw,12.5px);
  line-height:1.17;
  margin:6px 0 8px;
}
.reason-dialog-card,.reason-dialog-copy { animation: heart-pulse 3.2s ease-in-out infinite; }
@keyframes heart-pulse {
  0%,40%,100% { scale:1; }
  20% { scale:1.055; }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .confetti { display:none; }
  .finale-view .finale-balloons { opacity:.75; }
}
.music-start { margin: 12px auto 0; padding: 9px 16px; border: 1px solid #e8aac466; border-radius: 999px; background: #e8aac41c; color: #f4c5d3; font-size: 12px; }