:root { --ink:#5b454d; --paper:#fff9fa; --cream:#f6e5ea; --line:#dfb9c5; --gold:#bc8295; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#efd9e1; font-family:'Cormorant Garamond', Georgia, serif; }
main { min-height:100vh; }
.opening { position:fixed; inset:0; z-index:5; display:grid; place-items:center; padding:24px; overflow:hidden; background:radial-gradient(circle at 50% 35%,#fffafb 0,#f2dce4 65%,#dcb9c7 100%); transition:opacity .65s ease, visibility .65s ease; }
.music-button { position:fixed; z-index:8; right:18px; bottom:18px; display:flex; align-items:center; gap:8px; padding:11px 14px; border:1px solid rgba(116,98,73,.5); border-radius:999px; color:#5d503f; background:rgba(250,249,244,.92); box-shadow:0 6px 16px rgba(72,60,44,.14); font:600 12px 'Cormorant Garamond',serif; letter-spacing:1px; text-transform:uppercase; cursor:pointer; backdrop-filter:blur(5px); }.music-icon { font-size:20px; line-height:1; }.music-button.is-playing .music-icon { animation:musicPulse 1.1s ease-in-out infinite; }.music-button:hover { background:#fff; transform:translateY(-2px); }
.opening::before,.opening::after { content:''; position:absolute; border:1px solid rgba(255,255,255,.34); border-radius:50%; width:82vmax; height:82vmax; }
.opening::before { transform:translate(-40%,-38%); }.opening::after { transform:translate(36%,42%); }
.envelope-button { border:0; background:transparent; font:inherit; color:inherit; cursor:pointer; padding:15px; position:relative; z-index:1; -webkit-tap-highlight-color:transparent; }
.envelope { display:block; position:relative; width:min(92vw,700px); aspect-ratio:16/9; filter:drop-shadow(0 22px 18px rgba(62,52,40,.22)); transition:transform .82s cubic-bezier(.22,.9,.27,1), opacity .38s ease; }
.envelope img { width:100%; height:100%; object-fit:contain; mix-blend-mode:screen; }
.tap-text { display:block; margin-top:24px; color:#695d4c; text-transform:uppercase; font-size:13px; letter-spacing:3px; animation:pulse 1.9s ease-in-out infinite; }
.opening.open .envelope { transform:translateY(-24%) scale(1.04); opacity:0; }.opening.open .tap-text { opacity:0; }
.opening.done { opacity:0; visibility:hidden; pointer-events:none; }
.invitation { position:relative; min-height:100vh; background:var(--paper); opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; pointer-events:none; overflow:hidden; }.invitation>header,.invitation>section,.invitation>figure,.invitation>footer { position:relative; z-index:1; }
.invitation.visible { opacity:1; transform:none; pointer-events:auto; }
.hero { min-height:82vh; display:grid; align-content:center; text-align:center; padding:80px 24px 70px; background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(239,235,222,.80)),url('assets/foto-xv-1.jpg') center/cover; }
.eyebrow,.section-label { margin:0 0 10px; text-transform:uppercase; letter-spacing:3px; font-size:12px; color:var(--gold); }
h1 { margin:0; font-family:'Parisienne',cursive; font-size:clamp(66px,13vw,126px); font-weight:400; line-height:.86; color:#554b40; } h1 span { font-family:'Cormorant Garamond',serif; font-size:.42em; font-style:italic; }
.intro { max-width:390px; margin:38px auto 22px; font-size:21px; line-height:1.25; }.date { font-family:'Italiana',serif; letter-spacing:1px; font-size:18px; }
.details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; max-width:800px; margin:auto; padding:70px 24px; text-align:center; }.details>div { padding:10px; }.details h2,.rsvp h2 { margin:0 0 8px; font-family:'Italiana',serif; font-size:32px; font-weight:400; }.details p:not(.section-label),.rsvp p { margin:0; font-size:18px; line-height:1.25; }.map-link { display:inline-block; margin-top:17px; padding:8px 13px; border:1px solid var(--line); color:var(--ink); font-size:14px; letter-spacing:.4px; text-decoration:none; }.map-link:hover { background:#eee9dc; }
.welcome,.our-story,.gifts { padding:78px 24px; text-align:center; max-width:650px; margin:auto; }.welcome h2,.our-story h2,.gifts h2 { margin:0 0 18px; font-family:'Italiana',serif; font-size:clamp(31px,7vw,42px); font-weight:400; }.welcome p:not(.section-label),.our-story p:not(.section-label),.gifts p:not(.section-label) { margin:0 auto; max-width:490px; font-size:20px; line-height:1.35; }.families { padding:68px 24px; text-align:center; background:#f2efe5; }.families>div { display:grid; grid-template-columns:1fr 42px 1fr; align-items:center; gap:10px; max-width:600px; margin:22px auto; }.families p { margin:0; font-size:18px; line-height:1.25; }.families span { font-family:'Parisienne',cursive; font-size:28px; color:var(--gold); }.families small,.note small { font-size:15px; color:#80725f; }.story-phrase { margin-top:26px !important; font-family:'Parisienne',cursive; font-size:34px !important; line-height:1.1 !important; color:#786b57; }.note { padding:65px 26px; text-align:center; background:#fbfaf6; }.note span { display:block; color:var(--gold); font-size:25px; }.note p { max-width:500px; margin:12px auto 10px; font-size:20px; line-height:1.3; }.gifts { background:#e9e3d5; max-width:none; }.gifts p { max-width:450px !important; }
.quote { padding:75px 24px; text-align:center; background:var(--cream); }.quote p { max-width:550px; margin:0 auto; font-family:'Parisienne',cursive; font-size:44px; line-height:1.05; }
.photo-break { width:min(68vw,300px); margin:0 auto; transform:rotate(-3deg); }.photo-break.right { margin:14px 10% 14px auto; transform:rotate(3deg); }.torn-photo { margin:0; overflow:hidden; clip-path:polygon(0 3%,4% 0,9% 3%,15% 1%,22% 3%,29% 0,38% 2%,45% 0,55% 3%,64% 1%,72% 3%,79% 0,88% 3%,95% 0,100% 3%,98% 12%,100% 20%,98% 30%,100% 42%,98% 52%,100% 64%,98% 76%,100% 88%,97% 100%,90% 98%,81% 100%,73% 97%,63% 100%,53% 98%,43% 100%,34% 97%,25% 100%,16% 98%,7% 100%,0 97%,2% 87%,0 76%,2% 66%,0 54%,2% 43%,0 32%,2% 22%,0 12%); background:#e7e1d4; aspect-ratio:1/1.08; box-shadow:0 8px 15px rgba(72,60,44,.13); }.torn-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.countdown-section { padding:78px 20px; text-align:center; background:#e9e3d5; }.countdown-section>p:last-child { margin:24px 0 0; font-size:17px; }.countdown { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; max-width:570px; margin:22px auto 0; }.countdown div { padding:13px 4px; border-left:1px solid var(--line); }.countdown div:first-child { border-left:0; }.countdown strong { display:block; font-family:'Italiana',serif; font-size:clamp(30px,7vw,55px); font-weight:400; }.countdown span { display:block; text-transform:uppercase; letter-spacing:1.2px; font-size:10px; }
.itinerary { padding:82px 24px; max-width:650px; margin:auto; }.itinerary>p,.itinerary>h2 { text-align:center; }.itinerary h2 { margin:0 0 45px; font-family:'Italiana',serif; font-size:34px; font-weight:400; }.timeline { display:grid; gap:0; }.timeline-item { display:grid; grid-template-columns:42px 1fr; column-gap:16px; padding:0 0 28px; position:relative; }.timeline-item::before { content:''; position:absolute; left:20px; top:37px; bottom:-1px; width:1px; background:var(--line); }.timeline-item:last-child::before { display:none; }.timeline-icon { z-index:1; width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--gold); border-radius:50%; background:#fbfaf5; color:#907d5c; font-size:20px; }.timeline time { color:var(--gold); font-size:15px; letter-spacing:1px; }.timeline h3 { margin:2px 0; font-family:'Italiana',serif; font-size:25px; font-weight:400; }.timeline p { margin:0; font-size:17px; line-height:1.2; }.gallery { padding:82px 20px; text-align:center; background:#f8f7f2; }.gallery h2 { margin:0 auto 40px; max-width:450px; font-family:'Italiana',serif; font-size:31px; font-weight:400; }.square-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; max-width:800px; margin:auto; }.square-gallery img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.rsvp { padding:82px 24px; text-align:center; }.rsvp>p:not(.section-label) { max-width:350px; margin:0 auto 30px; }.button { display:inline-block; padding:13px 28px; color:#fff; background:#80725f; text-decoration:none; text-transform:uppercase; letter-spacing:2px; font-size:12px; transition:background .2s ease; }.button:hover { background:#625646; }
footer { padding:25px; text-align:center; background:#e6e0d2; font-family:'Italiana',serif; letter-spacing:1px; }
.photo-break { margin:28px auto; transform:rotate(-2deg); }
.photo-break.right { margin:28px auto; transform:rotate(2deg); }
.start-countdown { background:#faf9f5; }
.timeline-icon { overflow:hidden; color:transparent; font-size:0; }
.timeline-icon img { width:100%; height:100%; object-fit:contain; }
.dress-code { padding:74px 24px; text-align:center; background:#e9e3d5; }.dress-code h2 { margin:4px 0 10px; font-family:'Italiana',serif; font-size:32px; font-weight:400; }.dress-code p:not(.section-label) { max-width:350px; margin:0 auto; font-size:18px; }.dress-icon { color:var(--gold); font-size:38px; }.color-swatches { display:flex; justify-content:center; gap:7px; margin-top:24px; }.color-swatches i { width:27px; height:27px; display:block; background:#d9d0bc; }.color-swatches i:nth-child(2){background:#c1a985}.color-swatches i:nth-child(3){background:#9b8270}.color-swatches i:nth-child(4){background:#8d9384}.color-swatches i:nth-child(5){background:#554b42}.closing-photo { position:relative; min-height:70vh; display:grid; place-items:center; overflow:hidden; color:#fff; text-align:center; }.closing-photo::after { content:''; position:absolute; inset:0; background:rgba(52,44,36,.34); }.closing-photo>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.closing-photo>div { position:relative; z-index:1; padding:24px; text-shadow:0 2px 9px rgba(0,0,0,.35); }.closing-photo p { margin:0; font-size:21px; }.closing-photo h2 { margin:7px 0; font-family:'Parisienne',cursive; font-weight:400; font-size:clamp(60px,13vw,110px); line-height:.9; }.closing-photo span { letter-spacing:3px; font-size:13px; }
.dress-code .dress-icon { display:block; width:72px; height:72px; object-fit:contain; margin:8px auto; }
.invitation.visible .hero>* { animation:rise .8s both; }.invitation.visible .hero .eyebrow { animation-delay:.12s; }.invitation.visible .hero h1 { animation-delay:.26s; }.invitation.visible .hero .intro { animation-delay:.4s; }.invitation.visible .hero .date { animation-delay:.54s; }.invitation.visible .start-countdown { animation:rise .8s .62s both; }.invitation.visible .photo-break { animation:softPop .9s .2s both, drift 5s 1.3s ease-in-out infinite; }.invitation.visible .details { animation:rise .85s .15s both; }.invitation.visible .quote { animation:rise .8s .1s both; }.invitation.visible .itinerary { animation:rise .85s .1s both; }.timeline-item { opacity:0; }.invitation.visible .timeline-item { animation:slideIn .65s both; }.invitation.visible .timeline-item:nth-child(1){animation-delay:.1s}.invitation.visible .timeline-item:nth-child(2){animation-delay:.18s}.invitation.visible .timeline-item:nth-child(3){animation-delay:.26s}.invitation.visible .timeline-item:nth-child(4){animation-delay:.34s}.invitation.visible .timeline-item:nth-child(5){animation-delay:.42s}.invitation.visible .timeline-item:nth-child(6){animation-delay:.5s}.invitation.visible .dress-code,.invitation.visible .gallery,.invitation.visible .rsvp { animation:rise .8s .1s both; }.square-gallery img { transition:transform .45s ease; }.square-gallery img:hover { transform:scale(1.05); }.closing-photo>img { animation:slowZoom 14s ease-in-out infinite alternate; }
@keyframes rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } } @keyframes slideIn { from { opacity:0; transform:translateX(-18px); } to { opacity:1; transform:translateX(0); } } @keyframes softPop { from { opacity:0; transform:translateY(18px) scale(.94); } to { opacity:1; transform:translateY(0) scale(1); } } @keyframes drift { 50% { transform:translateY(-7px) rotate(1deg); } } @keyframes slowZoom { to { transform:scale(1.08); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }
.motion-ready > .scroll-reveal { opacity:0; transform:translateY(36px) scale(.985); transition:opacity .85s ease var(--reveal-delay),transform .85s cubic-bezier(.22,.8,.25,1) var(--reveal-delay); }.motion-ready > .scroll-reveal.in-view { opacity:1; transform:translateY(0) scale(1); }.motion-ready > .photo-break.in-view { animation:gentleFloat 5.5s 1s ease-in-out infinite; }.motion-ready .gallery.in-view .square-gallery img { animation:galleryReveal .7s both; }.motion-ready .gallery.in-view .square-gallery img:nth-child(1){animation-delay:.08s}.motion-ready .gallery.in-view .square-gallery img:nth-child(2){animation-delay:.16s}.motion-ready .gallery.in-view .square-gallery img:nth-child(3){animation-delay:.24s}.motion-ready .gallery.in-view .square-gallery img:nth-child(4){animation-delay:.32s}.motion-ready .gallery.in-view .square-gallery img:nth-child(5){animation-delay:.4s}.motion-ready .gallery.in-view .square-gallery img:nth-child(6){animation-delay:.48s}.motion-ready .dress-code.in-view .dress-icon { animation:iconSway 3.2s .8s ease-in-out infinite; }.motion-ready .families.in-view span { animation:heartBeat 2.4s .8s ease-in-out infinite; }.motion-ready .countdown-section.in-view strong { animation:numberGlow 2.8s .8s ease-in-out infinite; } @keyframes gentleFloat { 50% { transform:translateY(-10px) rotate(1.5deg); } } @keyframes galleryReveal { from { opacity:0; transform:scale(.8) rotate(-2deg); } to { opacity:1; transform:scale(1) rotate(0); } } @keyframes iconSway { 50% { transform:rotate(5deg) translateY(-4px); } } @keyframes heartBeat { 50% { transform:scale(1.2); } } @keyframes numberGlow { 50% { color:#9c855f; transform:translateY(-3px); } }
.quote,.families,.dress-code,.gifts,.countdown-section { background:#f7e6ec; }.note { background:#fffafd; }.color-swatches i { background:#f1d2dd; }.color-swatches i:nth-child(2){background:#e6aebf}.color-swatches i:nth-child(3){background:#ca829d}.color-swatches i:nth-child(4){background:#b46b86}.color-swatches i:nth-child(5){background:#6e4252}.button { background:#b56d86; }.button:hover { background:#8e4d66; }.music-button { color:#754257; border-color:#d69aac; background:rgba(255,248,250,.94); }
.floral-layer { position:absolute; z-index:0; inset:0; pointer-events:none; }.flower { position:absolute; width:clamp(75px,15vw,155px); height:auto; opacity:.62; filter:drop-shadow(0 5px 7px rgba(158,91,119,.10)); animation:flowerSway 6s ease-in-out infinite; }.f1{top:3%;left:-4%;transform:rotate(-18deg)}.f2{top:10%;right:-5%;transform:rotate(20deg);animation-delay:-1s}.f3{top:20%;left:-7%;animation-delay:-2s}.f4{top:29%;right:-5%;animation-delay:-3s}.f5{top:38%;left:-6%;transform:rotate(15deg);animation-delay:-1.5s}.f6{top:47%;right:-6%;animation-delay:-.5s}.f7{top:57%;left:-5%;animation-delay:-2.5s}.f8{top:65%;right:-6%;animation-delay:-3.5s}.f9{top:74%;left:-6%;animation-delay:-1.2s}.f10{top:82%;right:-6%;animation-delay:-2.2s}.f11{top:90%;left:-5%;animation-delay:-.8s}.f12{top:96%;right:-5%;animation-delay:-2.8s}@keyframes flowerSway{50%{margin-top:-9px;transform:rotate(5deg)}}
@keyframes pulse { 50% { opacity:.45; transform:translateY(3px); } }
@keyframes musicPulse { 50% { transform:scale(1.22) rotate(-4deg); } }
@media (max-width:500px) { .opening { padding:0; }.envelope-button { position:absolute; left:50%; top:50%; width:100vw; padding:0; margin:0; transform:translate(-50%,-50%); }.envelope { width:100vw; left:0; }.details { padding:55px 15px; gap:4px; }.details h2 { font-size:27px; }.quote p { font-size:37px; }.hero { min-height:78vh; }.gallery { padding:65px 14px; }.photo-break { width:76vw; }.photo-break.right { margin-right:7%; }.itinerary { padding:65px 20px; }.square-gallery { gap:4px; } }