:root{color-scheme:dark;--bg:#151b3c;--text:#fff5e9;--accent:#f9d86b;--pink:#f4a5b9}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid var(--accent);outline-offset:7px}[hidden]{display:none!important}.experience{min-height:100svh;max-width:1800px;margin:auto;padding:0 5vw;background:radial-gradient(ellipse at 16% 58%,#303c63 0,transparent 55%)}header{height:96px;display:flex;align-items:center;justify-content:space-between;gap:24px}.monogram{font-family:Georgia,serif;font-size:32px}.monogram span{font-size:20px;margin-left:5px;color:var(--pink)}nav{display:flex;gap:9px}.step{width:40px;height:32px;background:transparent;border:0;position:relative}.step:after{content:'';position:absolute;height:3px;background:#ffffff35;left:0;right:0;top:14px;border-radius:4px;transition:background .3s}.step.active:after{background:var(--accent)}.counter{font-size:13px;letter-spacing:.1em;color:#c6c9d8}.stage{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:8vw;max-width:1200px;margin:24px auto 45px;min-height:calc(100svh - 210px)}.visual{position:relative;padding:20px 0 44px;max-width:480px;width:100%;justify-self:center}.photo{background:#fff4e6;padding:11px 11px 0;border:0;display:block;width:100%;transform:rotate(-5deg);box-shadow:0 22px 65px #05081c66;transition:transform .4s}.photo:hover{transform:rotate(-2deg) translateY(-4px)}.photo img{width:100%;height:auto;aspect-ratio:3/4;display:block;object-fit:cover}.photo-caption{height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;color:#343650;font-family:Georgia,serif;font-style:italic;font-size:23px}.photo-caption span{font-size:28px}.handwritten{position:absolute;right:-40px;bottom:36px;transform:rotate(-9deg);background:var(--pink);color:#20203d;padding:12px 20px;font-size:21px;font-family:Georgia,serif;font-style:italic;box-shadow:0 4px 8px #0002;pointer-events:none}.photo-hint{display:block;text-align:center;font-size:13px;color:#c5c8d6;margin:27px 0 -24px}.story{padding:10px 0;max-width:540px}.kicker{color:var(--pink);text-transform:uppercase;font-size:12px;letter-spacing:.17em;margin:0 0 25px}h1,h2{font-family:'Italiana',Georgia,serif;font-weight:400;letter-spacing:-.045em;line-height:1.02;margin:0 0 26px;font-size:clamp(58px,6.5vw,102px)}h2{font-size:clamp(46px,5.1vw,76px)}h1 em,h2 em{color:var(--accent);font-weight:400}h1:focus,h2:focus{outline:none}.copy{font-size:17px;line-height:1.75;color:#dce0ed;max-width:430px;margin:0 0 16px}.intro{font-size:18px}.emphasis,.signature{font-family:Georgia,serif;font-size:25px;font-style:italic;color:var(--pink);line-height:1.4}.controls{display:flex;align-items:center;gap:16px;margin-top:30px}.next{border:0;border-radius:999px;padding:17px 24px;display:flex;gap:25px;align-items:center;justify-content:space-between;background:var(--accent);color:#20203d;font-size:14px;font-weight:600;min-height:54px;transition:transform .2s,background .2s}.next:hover{transform:translateY(-3px);background:#ffe89b}.next>span:last-child{font-size:23px}.previous{height:48px;width:48px;flex-shrink:0;border-radius:50%;border:1px solid #ffffff55;background:transparent;color:var(--text);font-size:23px}footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ffffff20;padding:20px 0 26px;font-size:12px;letter-spacing:.12em;color:#bec3d7}footer span:last-child{text-transform:none;letter-spacing:0;font-family:Georgia,serif;font-style:italic;font-size:17px}.scene.enter{animation:reveal .55s both}.photo.switched{animation:photoIn .5s both}@keyframes reveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes photoIn{from{opacity:.45;transform:rotate(-1deg) scale(.98)}to{opacity:1;transform:rotate(-5deg) scale(1)}}@media(min-width:1300px){.visual{max-width:440px}}@media(max-width:760px){.experience{padding:0 25px}header{height:70px}.stage{grid-template-columns:1fr;gap:15px;margin:14px auto 28px;min-height:0}.visual{max-width:255px;padding:3px 0 24px}.photo{padding:7px 7px 0;transform:rotate(-4deg)}.photo-caption{height:34px;font-size:19px}.handwritten{font-size:16px;right:-32px;bottom:30px;padding:8px 12px}.photo-hint{margin:15px 0 -12px;font-size:12px}.story{width:100%;max-width:430px;justify-self:center;padding:10px 0}.kicker{margin-bottom:15px;font-size:12px}h1{font-size:64px;line-height:.98}h1 br:first-child{display:none}h1 em{white-space:nowrap}h2{font-size:48px}.copy{font-size:16px;line-height:1.7}.intro{line-height:1.6}.controls{margin-top:22px}.next{font-size:14px;padding:14px 20px;gap:15px}footer{padding:18px 0;font-size:12px}.step{width:28px}.emphasis,.signature{font-size:23px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

footer{justify-content:flex-end}

/* Keep photos unobstructed and mobile navigation comfortably tappable. */
.photo{padding-bottom:11px}.stage{scroll-margin-top:16px}.story{min-width:0}h1,h2{overflow-wrap:break-word}.step{min-height:44px}.step:after{top:21px}
@media(max-width:760px){.photo{padding-bottom:7px}.visual{padding-bottom:15px}.step{width:36px}.stage{scroll-margin-top:12px}h2{font-size:clamp(38px,10vw,48px)}.controls{gap:10px}.next{min-width:0}.next>span:first-child{text-align:left}}
@media(max-width:760px){h1 em{font-size:.9em}}

/* Opening sequence: the photograph first, then the birthday greeting. */
@media(prefers-reduced-motion:no-preference){
.opening .visual{animation:birthday-arrive 1s .1s both}
.opening [data-scene="0"] h1{animation:birthday-arrive 1s .55s both}
.opening .controls{animation:birthday-arrive .7s 1s both}
}
@keyframes birthday-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.birthday-confetti{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:5}
.birthday-confetti i{position:absolute;top:-20px;opacity:0;border-radius:1px;animation:birthday-fall var(--duration) var(--delay) ease-in both}
@keyframes birthday-fall{0%{opacity:0;transform:translate3d(0,-10px,0) rotate(0)}12%{opacity:.8}78%{opacity:.65}100%{opacity:0;transform:translate3d(var(--drift),100vh,0) rotate(var(--turn))}}
@media(prefers-reduced-motion:reduce){.birthday-confetti{display:none}}

footer{justify-content:space-between;gap:16px;flex-wrap:wrap}.music-toggle{color:#dce0ed;background:transparent;border:1px solid #ffffff40;border-radius:24px;padding:10px 16px;min-height:44px;font-size:14px;letter-spacing:0}
.monogram{border:0;background:transparent;color:var(--text);padding:8px}.secret-message{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--accent);color:#20203d;padding:13px 22px;border-radius:24px;font-family:Georgia,serif;font-style:italic;z-index:10;box-shadow:0 8px 24px #05081c66}.secret-message[hidden]{display:none}
.photo-caption{display:block;background:#fff4e6;color:#343650;padding:9px 12px 11px;font-family:Georgia,serif;font-style:italic;font-size:18px;text-align:center}.float-hearts{position:fixed;inset:0;pointer-events:none;z-index:6}.float-hearts span{position:absolute;bottom:28%;color:var(--pink);font-size:28px;animation:heart-rise 1.4s ease-out both}@keyframes heart-rise{from{opacity:0;transform:translateY(0) scale(.7)}20%{opacity:.9}to{opacity:0;transform:translateY(-150px) scale(1.2)}}
.one-more{border:1px solid #ffffff55;background:transparent;color:var(--accent);border-radius:22px;padding:10px 16px;margin:4px 0 16px;font-size:14px}.one-more-message{font-family:Georgia,serif;font-style:italic;color:var(--pink);font-size:24px;margin:4px 0 20px}.one-more-message[hidden]{display:none}

.photo img{filter:saturate(.94) contrast(1.02);border:1px solid #eadfce}.photo-caption{border-top:1px solid #e7d7c2}.photo{box-shadow:0 24px 70px #05081c77}