:root{--wine:#731c31;--gold:#b89758;--paper:#fffaf3;--muted:#847975}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 20% 25%,#fffdf8,transparent 65%),#f9f1ec;color:var(--wine);font-family:Georgia,'Times New Roman',serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}[hidden]{display:none!important}main{position:relative;z-index:1}.cover{min-height:100svh;display:flex;align-items:flex-start;justify-content:center;padding:110px 24px 70px;animation:arrive 1s ease both}.cover button{padding:0;border:0;background:transparent;border-radius:25px;max-width:460px;width:100%;box-shadow:0 22px 65px #6c28351a;overflow:hidden;transition:transform .55s,box-shadow .55s}.cover button:hover{transform:translateY(-5px);box-shadow:0 28px 70px #6c283528}.cover img{display:block;width:100%;height:auto}.cover.leaving{animation:leave .5s ease forwards}#invitation{max-width:820px;margin:auto;padding:64px 28px 35px;outline:none;animation:arrive 1s ease both}.invitation-card{position:relative;isolation:isolate;border:1px solid #c7ae776b;background:var(--paper);padding:15px;overflow:hidden;box-shadow:0 18px 70px #663a2810}.invitation-card:before{content:'';position:absolute;z-index:-2;inset:0;background:url('assets/couple.jpg') center 45%/cover no-repeat;animation:photoIn 2s ease both}.invitation-card:after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,#fffaf3db 0%,#fffaf3a8 43%,#fffaf3d9 75%,#fffaf3f0 100%)}.card-content{border:1px solid #b8975845;padding:42px 26px 35px;text-align:center}.monogram{font-size:22px;color:var(--gold);letter-spacing:8px;margin:0 0 30px}h1{font-weight:400;font-size:clamp(62px,8vw,96px);line-height:1.02;margin:0;text-shadow:0 1px 12px #fffaf3b0}h1 span{display:block;color:var(--gold);font-size:.57em;font-style:italic;line-height:1.4}.rule{height:1px;width:65px;background:var(--gold);margin:30px auto}.invitation-copy{font-size:22px;line-height:1.7;max-width:510px;margin:0 auto 39px}.details{display:grid;grid-template-columns:1.25fr 1fr 1fr;border-top:1px solid #b8975855;padding-top:28px;gap:12px}.details>div+div{border-left:1px solid #b8975840}.details p{font-size:27px;line-height:1.35;margin:12px 0 0}.eyebrow,.details p.eyebrow{font:10px/1.6 Arial,sans-serif;letter-spacing:3px;color:var(--gold);margin:0}.venue{text-align:center;max-width:600px;margin:62px auto 0}h2{font-size:38px;font-weight:400;margin:15px 0 25px}h3{font-size:26px;font-weight:400;margin:0 0 16px}.venue>p:not(.eyebrow),footer>p:not(.eyebrow):not(.signature){font:15px/1.9 Arial,sans-serif;color:var(--muted);max-width:520px;margin:0 auto}.actions{display:flex;justify-content:center;gap:14px;margin-top:30px;flex-wrap:wrap}.actions a,.actions button{border:1px solid #731c3110;border-radius:40px;padding:17px 25px;font:10px/1.4 Arial,sans-serif;letter-spacing:1.6px;text-decoration:none;transition:transform .25s}.actions a:hover,.actions button:hover{transform:translateY(-3px)}.actions .primary{color:#fff8ed;background:var(--wine)}.actions button{background:#f0e5df;color:var(--wine)}footer{text-align:center;padding:65px 10px 18px}footer>.eyebrow{margin-bottom:18px}.heart{display:block;font-size:43px;color:var(--gold);margin:24px auto 18px;animation:breathe 4s ease-in-out infinite}.signature{font:9px/1.8 Arial,sans-serif;letter-spacing:2px;color:var(--gold)}.music{position:fixed;z-index:10;bottom:20px;right:20px;display:flex;align-items:center;gap:9px;border:1px solid #b8975855;border-radius:30px;background:#fffaf3ed;color:var(--wine);padding:10px 15px;box-shadow:0 4px 22px #6c283515;font:11px Arial,sans-serif}.music>span:first-child{font-size:22px}.music[aria-pressed=true]>span:first-child{animation:breathe 2s infinite}.ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden}.ambient i{position:absolute;font-style:normal;color:#b8975866;font-size:20px;animation:float 12s ease-in-out infinite}.ambient i:nth-child(1){left:5%;top:20%}.ambient i:nth-child(2){right:6%;top:35%;animation-delay:-4s}.ambient i:nth-child(3){left:10%;top:65%;animation-delay:-8s}.ambient i:nth-child(4){right:12%;top:80%;animation-delay:-2s}.ambient i:nth-child(5){left:18%;top:7%;animation-delay:-6s}.ambient i:nth-child(6){right:20%;top:54%;animation-delay:-10s}@keyframes arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes leave{to{opacity:0;transform:scale(1.045)}}@keyframes photoIn{from{transform:scale(1.07)}to{transform:scale(1)}}@keyframes breathe{50%{transform:scale(1.08);opacity:.65}}@keyframes float{50%{transform:translateY(-22px) rotate(35deg);opacity:.3}}@media(max-width:600px){.cover{padding:35px 20px 80px;align-items:center}.cover button{max-width:380px;border-radius:18px}#invitation{padding:28px 16px}.invitation-card{padding:9px}.card-content{padding:35px 16px 28px}.invitation-copy{font-size:19px;line-height:1.75}.details{gap:6px;grid-template-columns:1.2fr .8fr 1fr}.details p{font-size:18px}.details p.eyebrow{font-size:8px;letter-spacing:2px}.venue{margin-top:45px}.venue>p:not(.eyebrow),footer>p:not(.eyebrow):not(.signature){font-size:14px}.music{bottom:12px;right:12px;padding:8px 12px}.actions a,.actions button{padding:15px 19px;font-size:9px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* A gentle continuous movement of the couple's photograph. */
.invitation-card:before{inset:-12px;animation:coupleMotion 14s ease-in-out infinite alternate;transform-origin:50% 55%;will-change:transform}
@keyframes coupleMotion{0%{transform:scale(1.025) translateY(4px) rotate(-.45deg)}50%{transform:scale(1.065) translateY(-4px) rotate(.2deg)}100%{transform:scale(1.04) translateY(2px) rotate(.45deg)}}
/* Stagger the invitation text when the envelope opens. */
#invitation:not([hidden]) .monogram,
#invitation:not([hidden]) h1,
#invitation:not([hidden]) .rule,
#invitation:not([hidden]) .invitation-copy,
#invitation:not([hidden]) .details>div{animation:textEntrance 1.1s cubic-bezier(.2,.65,.3,1) both}
#invitation .monogram{animation-delay:.12s!important}
#invitation h1{animation-delay:.32s!important}
#invitation .rule{animation-delay:.6s!important}
#invitation .invitation-copy{animation-delay:.8s!important}
#invitation .details>div:nth-child(1){animation-delay:1.05s!important}
#invitation .details>div:nth-child(2){animation-delay:1.22s!important}
#invitation .details>div:nth-child(3){animation-delay:1.39s!important}
.scroll-reveal{opacity:0;transform:translateY(20px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.65,.3,1);transition-delay:var(--text-delay,0ms)}
.scroll-reveal.is-visible{opacity:1;transform:none}
@keyframes textEntrance{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.scroll-reveal{opacity:1;transform:none;transition:none!important}}
/* Light rose petals drift over the invitation without blocking controls. */
.rose-rain{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:4;contain:strict}
.rose-fall{position:absolute;top:-45px;left:var(--petal-left);animation:roseFall var(--petal-duration) linear var(--petal-delay) infinite;will-change:transform}
.rose-sway{display:block;animation:roseSway var(--sway-duration) ease-in-out var(--petal-delay) infinite alternate}
.rose-petal{display:block;width:var(--petal-size);height:calc(var(--petal-size)*1.35);border-radius:80% 15% 70% 35%;background:radial-gradient(ellipse at 25% 20%,#d85866 0%,#ac223b 40%,#7b1229 78%,#590d20 100%);box-shadow:inset 1px 1px 2px #f0928c55,1px 2px 3px #64112718;opacity:.72;animation:roseTurn var(--turn-duration) ease-in-out var(--petal-delay) infinite;transform-origin:45% 55%}
@keyframes roseFall{from{transform:translate3d(0,-25px,0)}to{transform:translate3d(var(--petal-drift),calc(100vh + 100px),0)}}
@keyframes roseSway{from{transform:translateX(-15px)}to{transform:translateX(18px)}}
@keyframes roseTurn{0%{transform:rotate(0deg) rotateY(15deg)}35%{transform:rotate(115deg) rotateY(65deg)}70%{transform:rotate(240deg) rotateY(-30deg)}100%{transform:rotate(360deg) rotateY(15deg)}}
@media(max-width:600px){.rose-fall:nth-child(n+13){display:none}.rose-petal{opacity:.63}}
@media(prefers-reduced-motion:reduce){.rose-rain{display:none}}