:root {
    --cream-50: #fdfbf6; --cream-100: #faf5ec; --cream-200: #f4ebdb; --cream-300: #ead9bf;
    --blush-100: #f7e8e2; --blush-200: #efd5cc; --blush-300: #e6bcb0; --blush-400: #d89d8f; --blush-500: #c87e6e;
    --gold-100: #f5ecd6; --gold-200: #ead7ad; --gold-300: #d9bd84; --gold-400: #c3a05f; --gold-500: #a8844a;
    --plum-100: #efeaf3; --plum-200: #ded2e6; --plum-300: #c4b0d5; --plum-400: #a68fc0;
    --ink-900: #2c2723; --ink-700: #46403a; --ink-500: #7a7063; --ink-400: #978a7c;
    --serif: "Noto Serif SC", "Songti SC", STSong, SimSun, "Source Han Serif SC", Georgia, serif;
    --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --script: "Brush Script MT", "Segoe Script", "Snell Roundhand", "Apple Chancery", Georgia, serif;
    --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { margin: 0; overflow-x: hidden; background: var(--cream-100); color: var(--ink-900); font-family: var(--sans); touch-action: manipulation; }
button { color: inherit; font: inherit; }
::selection { background: rgba(217, 189, 132, .35); color: var(--ink-900); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--cream-100); }
::-webkit-scrollbar-thumb { border: 2px solid var(--cream-100); border-radius: 999px; background: linear-gradient(var(--blush-300), var(--gold-400)); }

.scene { position: fixed; inset: 0; z-index: -10; overflow: hidden; pointer-events: none; }
.scene-base { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--cream-50), var(--cream-100), var(--cream-200)); }
.scene-glow { position: absolute; width: 38rem; height: 38rem; border-radius: 50%; filter: blur(64px); animation: drift 7s ease-in-out infinite; }
.scene-glow-blush { top: -8rem; left: -8rem; background: rgba(239, 213, 204, .6); }
.scene-glow-gold { top: 25%; right: -10rem; width: 34rem; height: 34rem; background: rgba(234, 215, 173, .5); animation-delay: -3s; }
.scene-glow-plum { bottom: -10rem; left: 25%; width: 36rem; height: 36rem; background: rgba(222, 210, 230, .5); animation-delay: -5s; }
.star, .sparkle { position: absolute; border-radius: 50%; }
.star { animation: twinkle var(--duration) ease-in-out var(--delay) infinite; }
.sparkle { bottom: -10px; animation: float-up var(--duration) linear var(--delay) infinite; }
.grain-overlay { position: fixed; inset: 0; z-index: 60; opacity: .045; mix-blend-mode: multiply; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.vignette { position: fixed; inset: 0; z-index: 59; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(44, 39, 35, .12)); }
.scroll-progress { position: fixed; top: 0; left: 0; z-index: 70; width: 0; height: 3px; background: linear-gradient(90deg, var(--blush-400), var(--gold-400), var(--plum-300)); transform-origin: left; }

.music-player { position: fixed; top: 16px; right: 16px; z-index: 75; display: grid; width: 52px; height: 52px; place-items: center; padding: 0; border: 1px solid rgba(195, 160, 95, .42); border-radius: 50%; background: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(250, 245, 236, .62)); color: var(--gold-500); box-shadow: 0 10px 30px rgba(168, 132, 74, .16), inset 0 1px 0 rgba(255, 255, 255, .92); backdrop-filter: blur(14px); cursor: pointer; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.music-player::before { content: ""; position: absolute; inset: -4px; border: 1px solid rgba(217, 189, 132, 0); border-radius: inherit; pointer-events: none; }
.music-player:hover { border-color: rgba(168, 132, 74, .68); background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(247, 232, 226, .72)); box-shadow: 0 12px 34px rgba(168, 132, 74, .22), inset 0 1px 0 #fff; }
.music-player:focus-visible, .back-to-top:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; }
.music-icon { display: grid; width: 25px; height: 25px; place-items: center; transform: translateY(-2px); transform-origin: center; }
.music-icon svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
.music-bars { position: absolute; bottom: 8px; left: 50%; display: flex; align-items: flex-end; gap: 2px; height: 6px; transform: translateX(-50%); }
.music-bars i { width: 2px; height: 100%; border-radius: 99px; background: var(--gold-400); opacity: .38; transform: scaleY(.35); transform-origin: bottom; }
.music-player[aria-pressed="true"] { border-color: rgba(195, 160, 95, .72); box-shadow: 0 12px 34px rgba(168, 132, 74, .24), 0 0 0 5px rgba(217, 189, 132, .08), inset 0 1px 0 #fff; }
.music-player[aria-pressed="true"]::before { animation: music-ring 2.4s ease-out infinite; }
.music-player[aria-pressed="true"] .music-icon { animation: music-sway 2.2s ease-in-out infinite; }
.music-player[aria-pressed="true"] .music-bars i { opacity: .9; animation: music-bar .75s ease-in-out infinite alternate; }
.music-player[aria-pressed="true"] .music-bars i:nth-child(2) { animation-duration: .95s; animation-delay: -.35s; }
.music-player[aria-pressed="true"] .music-bars i:nth-child(3) { animation-duration: .65s; animation-delay: -.15s; }

.hero { position: relative; display: flex; min-height: 100svh; align-items: center; justify-content: center; padding: 80px 24px; text-align: center; }
.hero-content { display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; }
.hero-eyebrow { margin: 0 0 32px; color: var(--ink-400); font-size: 11px; letter-spacing: .35em; animation: eyebrow-in 1.4s var(--ease) both; }
.hero h1 { margin: 0; font: 500 clamp(3rem, 7vw, 6rem)/1.25 var(--serif); }
.hero h1 span { display: inline-block; opacity: 0; filter: blur(8px); animation: title-in .9s var(--ease) forwards; }
.hero h1 span:nth-child(1) { animation-delay: .3s; }.hero h1 span:nth-child(2) { animation-delay: .38s; }.hero h1 span:nth-child(3) { animation-delay: .46s; }.hero h1 span:nth-child(4) { animation-delay: .54s; }.hero h1 span:nth-child(5) { animation-delay: .62s; }.hero h1 span:nth-child(6) { animation-delay: .7s; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ornament i { display: block; width: 48px; height: 1px; background: linear-gradient(90deg, transparent, rgba(195, 160, 95, .7)); }
.ornament i:last-child { background: linear-gradient(90deg, rgba(195, 160, 95, .7), transparent); }
.ornament b { color: var(--gold-400); font-size: 13px; font-weight: 400; }
.hero .ornament { margin: 28px 0; opacity: 0; animation: fade-in 1.1s 1.1s var(--ease) forwards; }
.hero-subtitle { max-width: 448px; margin: 0; color: var(--ink-500); font-size: clamp(1rem, 2vw, 1.125rem); line-height: 1.8; opacity: 0; animation: rise-in 1s 1.3s var(--ease) forwards; }
.hero-date { margin: 24px 0 0; color: var(--gold-500); font: 400 clamp(.875rem, 1.5vw, 1rem) var(--serif); letter-spacing: .25em; opacity: 0; animation: fade-in 1s 1.7s forwards; }
.scroll-hint { position: absolute; bottom: 40px; left: 50%; display: flex; align-items: center; flex-direction: column; gap: 12px; width: max-content; transform: translateX(-50%); color: var(--ink-400); }
.scroll-hint span { font-size: 12px; letter-spacing: .3em; }
.scroll-hint svg { width: 18px; height: 18px; color: var(--gold-400); animation: hint-bounce 2s ease-in-out infinite; }
.scroll-hint path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }

.quote-divider { max-width: 672px; margin: 0 auto; padding: 80px 24px; text-align: center; }
.quote-mark { display: block; margin-bottom: 24px; color: var(--gold-300); font: 400 3rem var(--serif); }
.quote-divider p { margin: 0; color: var(--ink-700); font: 400 clamp(1.5rem, 3.5vw, 1.875rem)/1.7 var(--serif); }
.quote-divider small { display: block; margin-top: 24px; color: var(--ink-400); font-size: 11px; letter-spacing: .35em; }
.content-section { position: relative; max-width: 1152px; margin: 0 auto; padding: 96px 24px; }
.section-header { display: flex; align-items: center; flex-direction: column; text-align: center; }
.section-header > p { margin: 0; color: var(--gold-500); font-size: 11px; letter-spacing: .35em; }
.section-header h2 { margin: 16px 0 0; font: 500 clamp(1.875rem, 5vw, 3rem) var(--serif); }
.section-header > span { max-width: 448px; margin-top: 20px; color: var(--ink-500); font-size: clamp(.875rem, 2vw, 1rem); line-height: 1.8; }
.section-header .ornament { margin-top: 28px; }
.section-header.reveal > p, .section-header.reveal > h2, .section-header.reveal > span, .section-header.reveal > .ornament { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.section-header.reveal > h2 { transition-delay: .1s; }
.section-header.reveal > span { transition-delay: .2s; }
.section-header.reveal > .ornament { transition-delay: .25s; transform: scaleX(.35); }
.section-header.reveal.is-visible > p, .section-header.reveal.is-visible > h2, .section-header.reveal.is-visible > span { opacity: 1; transform: translateY(0); }
.section-header.reveal.is-visible > .ornament { opacity: 1; transform: scaleX(1); }

.memory-list { display: flex; flex-direction: column; gap: 96px; margin-top: 64px; }
.memory-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 64px; }
.memory-row.reverse .polaroid { order: 2; }.memory-row.reverse .memory-copy { order: 1; }
.polaroid { width: min(18rem, 100%); margin: 0 auto; padding: 12px 12px 32px; border-radius: 4px; background: #fffdf9; box-shadow: 0 20px 50px -12px rgba(44, 39, 35, .28), 0 4px 14px -6px rgba(44, 39, 35, .12); --rotation: -3deg; --initial-rotation: -4deg; }
.memory-row:nth-child(even) .polaroid { --rotation: 3deg; --initial-rotation: 4deg; }
.photo-frame { overflow: hidden; border-radius: 2px; }
.polaroid img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; transform: scale(1); transition: transform 1.6s var(--ease); }
.polaroid.is-visible img { transform: scale(1.08); }
.polaroid figcaption { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 0; color: var(--ink-500); font: 400 12px var(--serif); }
.season { padding: 2px 8px; border-radius: 999px; font: 400 11px var(--sans); }
.spring { color: var(--blush-500); background: var(--blush-100); }.summer { color: var(--gold-500); background: var(--gold-100); }.autumn { color: var(--ink-700); background: var(--cream-200); }.winter { color: var(--plum-400); background: var(--plum-100); }
.memory-copy { max-width: 448px; text-align: left; }
.memory-copy small { color: var(--gold-500); font: 400 14px var(--serif); letter-spacing: .25em; }
.memory-copy h3 { margin: 12px 0 0; font: 500 clamp(1.5rem, 3vw, 1.875rem) var(--serif); }
.memory-copy p { margin: 16px 0 0; color: var(--ink-500); font-size: clamp(.875rem, 2vw, 1rem); line-height: 2; }
.memory-highlights { margin: 22px 0 0; padding: 0; border-top: 1px solid rgba(234,217,191,.85); list-style: none; }
.memory-highlights li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(234,217,191,.65); color: var(--ink-500); font-size: 12px; line-height: 1.65; opacity: 0; transform: translateY(8px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.memory-highlights time { color: var(--gold-500); font: 500 11px var(--serif); letter-spacing: .08em; }
.memory-copy.is-visible .memory-highlights li { opacity: 1; transform: translateY(0); }
.memory-highlights li:nth-child(1) { transition-delay: .35s; }.memory-highlights li:nth-child(2) { transition-delay: .43s; }.memory-highlights li:nth-child(3) { transition-delay: .51s; }.memory-highlights li:nth-child(4) { transition-delay: .59s; }

.letter-section { position: relative; max-width: 768px; margin: 0 auto; padding: 96px 24px; }
.letter-card { position: relative; overflow: hidden; padding: 48px 28px; border: 1px solid rgba(255,255,255,.7); border-radius: 24px; background: rgba(255, 253, 249, .6); box-shadow: 0 24px 60px rgba(234, 217, 191, .5); backdrop-filter: blur(14px); }
.letter-decoration { position: absolute; top: 0; left: 50%; width: 66%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-300), transparent); transform: translateX(-50%); }
.letter-heading { display: flex; align-items: center; flex-direction: column; margin-bottom: 40px; }
.letter-heading span { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(217, 189, 132, .6); border-radius: 50%; background: var(--cream-100); color: var(--gold-500); font: 400 18px var(--serif); }
.letter-heading small { margin-top: 16px; color: var(--ink-400); font-size: 11px; letter-spacing: .35em; }
.letter-greeting { margin: 0; font: 500 1.5rem var(--serif); }
.letter-body { margin-top: 24px; }
.letter-body p { margin: 0 0 20px; color: var(--ink-700); font-size: 15px; line-height: 2; }
.letter-signoff { display: flex; align-items: flex-end; flex-direction: column; margin-top: 40px; }
.letter-signoff p { margin: 0; font: 400 1.125rem var(--serif); }
.letter-signoff > span { margin-top: 12px; color: var(--gold-500); font: italic 1.5rem var(--script); }

.milestones { max-width: 1024px; }
.milestone-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
.milestone { text-align: center; }
.milestone:nth-child(2) { transition-delay: .1s; }.milestone:nth-child(3) { transition-delay: .2s; }.milestone:nth-child(4) { transition-delay: .3s; }
.milestone p { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin: 0; }
.milestone strong { color: var(--gold-500); font: 500 clamp(2.25rem, 5vw, 3rem) var(--serif); background: linear-gradient(100deg, #8a6a35, var(--gold-400) 30%, var(--gold-200) 50%, var(--gold-400) 70%, #8a6a35); background-size: 200% auto; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 6s linear infinite; }
.milestone b { color: var(--gold-500); font: 400 clamp(1rem, 2vw, 1.25rem) var(--serif); }
.milestone span { display: block; margin-top: 12px; color: var(--ink-500); font-size: clamp(.75rem, 2vw, .875rem); line-height: 1.7; }

.future-banner { position: relative; overflow: hidden; margin: 64px 0 0; border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(234, 217, 191, .6); }
.future-banner.reveal { transform: scale(.96); }
.future-banner.reveal.is-visible { transform: scale(1); }
.future-banner img { display: block; width: 100%; height: 64vh; min-height: 420px; object-fit: cover; transform: scale(1); transition: transform 2s var(--ease); }
.future-banner.is-visible img { transform: scale(1.06); }
.future-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(44, 39, 35, .5)); }
.future-banner figcaption { position: absolute; right: 0; bottom: 0; left: 0; z-index: 1; padding: 0 24px 40px; color: var(--cream-50); text-align: center; }
.future-banner figcaption p { margin: 0; font: 400 clamp(1.25rem, 3vw, 1.875rem) var(--serif); text-shadow: 0 2px 6px rgba(44,39,35,.25); }
.future-banner figcaption > span { display: block; margin-top: 8px; color: rgba(244,235,219,.9); font: italic 1.125rem var(--script); }
.wish-list { max-width: 768px; margin: 64px auto 0; }
.wish-list > p { margin: 0; color: var(--ink-400); font-size: 14px; letter-spacing: .3em; text-align: center; }
.wish-list ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px; margin: 32px 0 0; padding: 0; list-style: none; }
.wish-list li { display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(234,217,191,.7); color: var(--ink-700); font-size: clamp(.875rem, 2vw, 1rem); transition: color .2s ease; }
.wish-list li:hover { color: var(--ink-900); }
.wish-list li span { color: rgba(195,160,95,.7); font: 400 12px var(--serif); }
.wish-list.reveal li { opacity: 0; transform: translateX(-16px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.wish-list.reveal.is-visible li { opacity: 1; transform: translateX(0); }
.wish-list li:nth-child(2) { transition-delay: .06s; }.wish-list li:nth-child(3) { transition-delay: .12s; }.wish-list li:nth-child(4) { transition-delay: .18s; }.wish-list li:nth-child(5) { transition-delay: .24s; }.wish-list li:nth-child(6) { transition-delay: .3s; }.wish-list li:nth-child(7) { transition-delay: .36s; }.wish-list li:nth-child(8) { transition-delay: .42s; }.wish-list li:nth-child(9) { transition-delay: .48s; }.wish-list li:nth-child(10) { transition-delay: .54s; }

.credits { position: relative; overflow: hidden; padding: 112px 24px; color: rgba(250,245,236,.92); text-align: center; background: linear-gradient(175deg, #1a1528, #1e1a2e 20%, #201932 40%, #1c1830 60%, #1a1528 80%, #15121f); }
.credits::before { content: ""; position: absolute; inset: 0; opacity: .3; background: radial-gradient(ellipse 80% 50% at 50% 40%, rgba(217,189,132,.12), transparent); }
.credits-glow { position: absolute; width: 40rem; height: 40rem; border-radius: 50%; filter: blur(64px); opacity: .2; animation: drift 7s ease-in-out infinite; }
.credits-glow-blush { top: -8rem; left: -8rem; background: radial-gradient(circle, var(--blush-400), transparent 70%); }
.credits-glow-gold { top: 25%; right: -6rem; width: 36rem; height: 36rem; background: radial-gradient(circle, var(--gold-400), transparent 70%); animation-delay: -3s; opacity: .15; }
.credits-glow-plum { bottom: -10rem; left: 33%; width: 38rem; height: 38rem; background: radial-gradient(circle, var(--plum-400), transparent 70%); animation-delay: -5.5s; opacity: .15; }
.credits-stars { position: absolute; inset: 0; pointer-events: none; }
.credit-star { position: absolute; border-radius: 50%; animation: twinkle var(--duration) ease-in-out var(--delay) infinite; }
.shooting-star { position: absolute; width: var(--length); height: 1px; border-radius: 99px; opacity: 0; background: linear-gradient(90deg, transparent, rgba(234,215,173,.9) 40%, rgba(255,255,255,.95)); transform: rotate(var(--angle)); transform-origin: right center; animation: shooting-star var(--duration) ease-in-out var(--delay) infinite; }
.credits-content { position: relative; z-index: 2; }
.happy { margin-bottom: 64px; }.happy p { margin: 0; color: var(--gold-200); font: italic clamp(1.875rem, 4vw, 2.25rem) var(--script); }.happy .ornament { margin-top: 16px; }.happy .ornament i { width: 32px; opacity: .7; }
.credit-card { max-width: 384px; margin: 0 auto; padding: 40px 32px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: 0 8px 32px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(16px); }
.credit-card dl { margin: 0; }.credit-card dl div + div { margin-top: 28px; }.credit-card dt { color: rgba(234,215,173,.45); font-size: 10px; letter-spacing: .45em; }.credit-card dd { margin: 6px 0 0; font: 400 clamp(1.125rem, 3vw, 1.25rem) var(--serif); }
.credit-card.reveal dl > div { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.credit-card.reveal.is-visible dl > div { opacity: 1; transform: translateY(0); }
.credit-card dl > div:nth-child(1) { transition-delay: .3s; }.credit-card dl > div:nth-child(2) { transition-delay: .5s; }.credit-card dl > div:nth-child(3) { transition-delay: .7s; }.credit-card dl > div:nth-child(4) { transition-delay: .9s; }.credit-card dl > div:nth-child(5) { transition-delay: 1.1s; }
.ending { margin-top: 80px; }.ending .ornament i { width: 64px; }.ending h2 { margin: 32px 0 0; font: 500 clamp(1.875rem, 5vw, 3rem) var(--serif); }.ending > p { margin: 24px 0 0; color: var(--gold-200); font: italic 1.5rem var(--script); }.ending small { display: block; margin-top: 40px; color: rgba(234,215,173,.35); font-size: 12px; letter-spacing: .3em; }
.back-to-top { min-height: 44px; margin-top: 64px; padding: 12px 24px; border: 1px solid rgba(195,160,95,.3); border-radius: 999px; background: rgba(255,255,255,.04); color: rgba(250,245,236,.85); backdrop-filter: blur(8px); cursor: pointer; transition: background .2s ease, border-color .2s ease; }.back-to-top:hover { border-color: rgba(195,160,95,.6); background: rgba(255,255,255,.08); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-left { transform: translateX(-40px); }.reveal-right { transform: translateX(40px); }
.reveal.is-visible { opacity: 1; transform: translate(0); }
.polaroid.reveal { transform: translateY(40px) rotate(var(--initial-rotation)); transition-duration: .9s; }
.polaroid.reveal.is-visible { transform: translateY(0) rotate(var(--rotation)); }
.quote-reveal .quote-mark, .quote-reveal small { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.quote-reveal small { transition-delay: .65s; }
.quote-reveal.is-visible .quote-mark, .quote-reveal.is-visible small { opacity: 1; transform: translateY(0); }
.reveal-text { opacity: 1; filter: none; }
.reveal-char { display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(4px); transition: opacity .5s ease-out, filter .5s ease-out, transform .5s ease-out; transition-delay: calc(var(--text-delay, 0s) + var(--char-index) * var(--char-stagger, .02s)); }
.reveal-text.is-visible .reveal-char { opacity: 1; filter: blur(0); transform: translateY(0); }
.reveal-signature { opacity: 0; transform: translateY(8px); transition: opacity 1s 2.6s ease, transform 1s 2.6s var(--ease); }
.letter-card.is-visible .reveal-signature { opacity: 1; transform: translateY(0); }

@keyframes eyebrow-in { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; letter-spacing: .35em; } }
@keyframes title-in { from { opacity: 0; transform: translateY(40px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hint-bounce { 50% { transform: translateY(8px); } }
@keyframes music-ring { 0% { border-color: rgba(217, 189, 132, .5); transform: scale(.94); opacity: .8; } 70%,100% { border-color: rgba(217, 189, 132, 0); transform: scale(1.16); opacity: 0; } }
@keyframes music-sway { 0%,100% { transform: translateY(-2px) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
@keyframes music-bar { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
@keyframes shimmer { to { background-position: -200% center; } }
@keyframes drift { 50% { transform: translateY(-18px); } }
@keyframes twinkle { 0%,100% { opacity: .15; transform: scale(.8); } 50% { opacity: .9; transform: scale(1.2); } }
@keyframes float-up { 0% { opacity: 0; transform: translate(0,0) scale(1); } 10%,90% { opacity: var(--opacity); } 100% { opacity: 0; transform: translate(var(--drift), -110vh) scale(.4); } }
@keyframes shooting-star { 0%,78% { opacity: 0; transform: rotate(var(--angle)) translateX(0) scaleX(0); } 82%,88% { opacity: .9; transform: rotate(var(--angle)) translateX(-50px) scaleX(1); } 96%,100% { opacity: 0; transform: rotate(var(--angle)) translateX(-180px) scaleX(0); } }

@media (min-width: 640px) { .music-player { top: 24px; right: 24px; }.polaroid { width: 20rem; }.letter-card { padding: 64px 56px; }.content-section, .letter-section { padding-top: 128px; padding-bottom: 128px; }.quote-divider { padding-top: 96px; padding-bottom: 96px; }.credits { padding-top: 144px; padding-bottom: 144px; } }
@media (max-width: 768px) {
    .scene-glow { width: 26rem; height: 26rem; }
    .hero { padding-right: 20px; padding-left: 20px; }
    .hero-eyebrow { letter-spacing: .25em; }
    .scroll-hint { bottom: 28px; width: 100%; padding: 0 20px; }
    .scroll-hint span { font-size: 10px; letter-spacing: .18em; }
    .memory-row, .memory-row.reverse { grid-template-columns: 1fr; gap: 32px; }
    .memory-row.reverse .polaroid, .memory-row.reverse .memory-copy { order: initial; }
    .memory-list { gap: 80px; }
    .memory-copy { margin: 0 auto; text-align: center; }
    .memory-highlights { text-align: left; }
    .milestone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 20px; }
    .future-banner img { height: 52vh; min-height: 360px; }
    .wish-list ol { grid-template-columns: 1fr; gap: 16px; }
    .wish-list > p { font-size: 12px; letter-spacing: .2em; }
}
@media (max-width: 380px) { .music-player { right: 10px; }.hero h1 { font-size: 2.65rem; }.hero-date { letter-spacing: .14em; }.letter-card { padding-right: 20px; padding-left: 20px; }.credits { padding-right: 18px; padding-left: 18px; } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .reveal, .reveal-text, .reveal-char, .section-header.reveal > p, .section-header.reveal > h2, .section-header.reveal > span, .section-header.reveal > .ornament, .quote-reveal .quote-mark, .quote-reveal small, .wish-list.reveal li, .credit-card.reveal dl > div, .memory-highlights li, .reveal-signature { opacity: 1; filter: none; transform: none; }
    .polaroid img, .future-banner img { transform: none !important; }
    .star, .sparkle, .credit-star, .shooting-star { display: none; }
}