:root { --ink:#351b2b; --rose:#d94f78; --blush:#fff4f1; --gold:#d4a253; --paper:#fffaf7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font-family:'Manrope',sans-serif; overflow-x:hidden; }
.birthday-page { min-height:100vh; background:radial-gradient(circle at 15% 15%,#ffd8d0 0,transparent 30%),radial-gradient(circle at 85% 80%,#f6d8e4 0,transparent 32%),var(--blush); }
.countdown-shell,.unlock-shell { min-height:100vh; display:grid; place-items:center; padding:32px 20px; text-align:center; position:relative; overflow:hidden; }
.countdown-shell:before,.love-hero:before { content:''; position:absolute; inset:8%; border:1px solid rgba(217,79,120,.22); border-radius:50%; transform:rotate(-12deg); pointer-events:none; }
.eyebrow { margin:0 0 18px; color:var(--rose); text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; font-weight:700; }
h1,h2 { font-family:'Cormorant Garamond',serif; font-weight:600; line-height:.9; margin:0; }
.countdown-shell h1,.unlock-card h1 { font-size:clamp(3.8rem,10vw,8rem); }
h1 em { color:var(--rose); font-weight:400; }
.countdown-intro { margin:28px auto 34px; font-size:1rem; color:#80586c; }
.countdown { display:flex; justify-content:center; gap:clamp(10px,4vw,42px); }
.countdown div { min-width:75px; }
.countdown strong { display:block; font-family:'Cormorant Garamond',serif; font-size:clamp(3rem,8vw,5.5rem); line-height:1; color:var(--ink); }
.countdown span { color:var(--rose); font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; }
.paris-note { margin-top:42px; color:#987b86; font-size:.75rem; letter-spacing:.1em; }
.unlock-card { width:min(100%,520px); padding:clamp(34px,7vw,70px); background:rgba(255,250,247,.86); border:1px solid rgba(217,79,120,.2); box-shadow:0 20px 70px rgba(113,50,75,.13); text-align:center; animation:rise .9s both; }
.unlock-icon { font-size:2rem; color:var(--gold); display:block; margin-bottom:18px; }
.unlock-card h1 { font-size:clamp(3rem,8vw,5.3rem); }
.unlock-card > p:not(.eyebrow) { color:#80586c; margin:24px 0; }
.unlock-form { display:grid; gap:10px; text-align:left; }
.unlock-form label { font-size:.75rem; font-weight:700; color:#80586c; }
.unlock-form input { width:100%; border:1px solid #e8b7c2; background:#fff; padding:14px 16px; font:inherit; color:var(--ink); outline:none; }
.unlock-form input:focus { border-color:var(--rose); box-shadow:0 0 0 3px rgba(217,79,120,.12); }
.unlock-form button { border:0; padding:15px; background:var(--ink); color:#fff; font:inherit; font-weight:700; cursor:pointer; margin-top:8px; }
.unlock-form button:hover { background:var(--rose); }
.form-error { color:#b22f53; font-size:.75rem; }
.love-shell { background:linear-gradient(150deg,#fff4f1,#fce8ee 48%,#fffaf7); min-height:100vh; }
.love-hero { min-height:100vh; display:grid; place-content:center; text-align:center; padding:70px 20px; position:relative; overflow:hidden; }
.love-hero h1 { font-size:clamp(4.5rem,12vw,10rem); }
.hero-subtitle { max-width:500px; margin:28px auto 0; color:#80586c; }
.scroll-cue { position:absolute; bottom:26px; left:50%; color:var(--rose); font-size:2rem; animation:bob 1.8s infinite; }
.poem-section { min-height:100vh; padding:100px 20px; position:relative; display:grid; place-items:center; }
.poem-card { width:min(100%,680px); padding:clamp(35px,7vw,80px) clamp(25px,8vw,90px); background:rgba(255,250,247,.88); box-shadow:0 25px 80px rgba(113,50,75,.14); text-align:center; position:relative; z-index:2; }
.poem-card h2 { color:var(--rose); font-size:clamp(3rem,7vw,5.5rem); }
.poem-text { margin-top:38px; font-family:'Cormorant Garamond',serif; font-size:clamp(1.35rem,2.4vw,1.7rem); line-height:1.45; }
.poem-text p { margin:0 0 24px; }
.signature { margin:38px 0 0; color:#80586c; font-family:'Cormorant Garamond',serif; font-size:1.3rem; }
.signature span { color:var(--rose); }
.photo-invite { padding:90px 20px 120px; text-align:center; position:relative; z-index:2; }
.photo-invite h2 { color:var(--rose); font-size:clamp(3rem,7vw,5.5rem); }
.photo-button,.photo-next { border:0; background:var(--ink); color:#fff; padding:15px 22px; margin-top:26px; font:inherit; font-weight:700; cursor:pointer; }
.photo-button:hover,.photo-next:hover { background:var(--rose); }
.photo-viewer { position:fixed; inset:0; z-index:20; display:grid; place-items:center; gap:15px; padding:55px 25px 30px; background:rgba(53,27,43,.95); text-align:center; }
.photo-viewer[hidden] { display:none; }
.photo-viewer .eyebrow { margin:0; color:#f8d58a; }
.photo-viewer img { width:auto; height:auto; max-width:min(88vw,900px); max-height:72vh; object-fit:contain; border:10px solid #fff; box-shadow:0 20px 70px rgba(0,0,0,.35); animation:rise .45s both; }
.photo-viewer-close { position:absolute; top:20px; right:25px; border:0; background:transparent; color:#fff; font-size:1.6rem; cursor:pointer; }
.photo-next { margin-top:0; background:#fff; color:var(--ink); }
.photo-layer { position:absolute; inset:-16%; z-index:1; pointer-events:none; overflow:hidden; }
.floating-photo { position:absolute; top:var(--start-y); left:0; width:auto; height:auto; max-width:clamp(120px,18vw,250px); max-height:240px; object-fit:contain; border:clamp(4px,.6vw,8px) solid white; box-shadow:0 12px 35px rgba(70,30,50,.2); opacity:var(--photo-opacity); will-change:transform; }
#confetti { position:fixed; inset:0; pointer-events:none; z-index:10; overflow:hidden; }
.confetto { position:absolute; top:-20px; width:9px; height:16px; animation:fall linear forwards; }
@keyframes fall { to { transform:translate3d(var(--drift),110vh,0) rotate(720deg); } }
@keyframes rise { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
@keyframes bob { 50% { transform:translateY(8px); } }
@media (max-width:650px) { .countdown { gap:8px; }.countdown div { min-width:66px; }.countdown span { font-size:.56rem; }.floating-photo { max-width:145px; max-height:170px; opacity:calc(var(--photo-opacity) * .72); } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; scroll-behavior:auto!important; } }