:root{--green:#244b3c;--gold:#b39a61;--ink:#28382d;--cream:#fbfaf5;--muted:#68746b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}.page{min-height:100svh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:60px 20px}.hero{background:radial-gradient(ellipse at center,#fff 5%,#f8f7ef 100%)}.hero:before,.hero:after{content:'';position:absolute;inset:6% 8%;border:1px solid #d9c9a1;clip-path:polygon(20% 0,80% 0,100% 25%,100% 75%,80% 100%,20% 100%,0 75%,0 25%);pointer-events:none}.hero:after{inset:7% 9%;opacity:.5}.hero-content,.section-inner{width:min(100%,620px);text-align:center;position:relative;z-index:2}.eyebrow{letter-spacing:.2em;font-size:11px;font-weight:700;color:#738675;line-height:1.8}.hero h1,h2,.thank-you{font-family:'Great Vibes',cursive;font-weight:400;color:var(--green)}.hero h1{font-size:clamp(42px,8vw,66px);margin:14px 0 6px}.names{display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap;font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(30px,7vw,53px);line-height:1.2}.names small{font-family:'Great Vibes',cursive;color:var(--gold);font-size:.95em;font-weight:400}.ornament{color:var(--gold);margin:17px 0}.invitation-line{font-family:'Playfair Display',serif;font-size:clamp(14px,3.4vw,17px);line-height:1.75}.guest{font-size:13px;letter-spacing:.02em;margin:16px auto 22px;max-width:330px;border-bottom:1px dotted #b9b9a9;padding-bottom:9px}.date-row{display:flex;align-items:center;justify-content:center;gap:17px;margin:17px auto 22px;font-family:'Playfair Display',serif}.date-row span{font-size:14px;line-height:1.5;min-width:90px;border-block:1px solid var(--gold);padding:6px 0}.date-row strong{font-size:clamp(55px,13vw,82px);line-height:1;font-weight:500}.ceremony{display:flex;flex-direction:column;gap:5px;font-size:15px}.ceremony strong{font-family:'Playfair Display',serif;font-size:19px}.venue-name{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(20px,5vw,27px);margin:21px 0 0}.city{margin:5px 0 22px;font-size:16px}.outline-button,.solid-button{display:inline-block;text-decoration:none;border-radius:50px;padding:12px 25px;font-size:13px;font-weight:700;transition:transform .2s,background .2s}.outline-button{border:1px solid var(--green);color:var(--green);background:#fff9}.solid-button{background:var(--green);color:white}.outline-button:hover,.solid-button:hover{transform:translateY(-3px)}.foliage{position:absolute;width:300px;height:370px;opacity:.85;pointer-events:none;background-image:url('assets/botanical.png');background-size:contain;background-position:center;background-repeat:no-repeat}.foliage-top{top:-100px;left:-105px;transform:rotate(-22deg)}.foliage-bottom{bottom:-120px;right:-100px;transform:rotate(155deg)}.details{background:linear-gradient(165deg,#f0f4e9,#fffdf7 60%,#eef1e7)}h2{font-size:clamp(52px,10vw,75px);margin:4px 0 17px}.single-photo{width:min(100%,290px);height:245px;border-radius:140px 140px 14px 14px;overflow:hidden;margin:0 auto 22px;border:5px solid #fff;box-shadow:0 8px 30px #244b3c23}.single-photo img{width:100%;height:100%;object-fit:cover;object-position:center 26%}.countdown{display:flex;justify-content:center;gap:10px;margin:20px 0 25px}.countdown>div{width:74px;min-width:0;background:white;border:1px solid #e8e5d9;border-radius:15px;padding:12px 5px;box-shadow:0 4px 15px #1b3e2310}.countdown strong{display:block;font-family:'Playfair Display',serif;font-size:25px}.countdown span{font-size:10px;color:var(--muted)}.event-card{max-width:410px;display:flex;gap:15px;align-items:center;text-align:left;background:#ffffffdb;border:1px solid #e7e3d6;border-radius:17px;padding:16px;margin:0 auto}.event-icon{font-size:36px;color:var(--gold)}.event-card h3{font-family:'Playfair Display',serif;font-size:19px;margin:3px 0 5px}.event-card p{margin:0;font-size:12px;line-height:1.6}.event-card .eyebrow{font-size:9px}.final{background:radial-gradient(ellipse at center,#fff,#f1f4eb)}.location-card{border:1px solid #e3dccb;border-radius:22px;background:#fff;padding:22px 20px;margin:14px auto 23px;max-width:420px;box-shadow:0 8px 30px #284d3610}.location-symbol{font-size:37px;color:var(--gold)}.location-card h3{font-family:'Playfair Display',serif;font-size:25px;margin:8px 0}.location-card p{margin:0 0 20px}.family-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:16px auto;max-width:500px}.family-grid>div{padding:14px 10px;border-top:1px solid #d8c99e}.family-grid p:last-child{font-family:'Playfair Display',serif;font-size:13px;line-height:1.6}.rsvp{font-size:13px;letter-spacing:.08em}.rsvp a{font-weight:700;text-decoration:none;color:var(--green);margin-left:7px}.thank-you{font-size:65px;margin:16px 0 0}.closing{font-family:'Playfair Display',serif;font-size:14px}.back-top{display:inline-block;margin-top:15px;color:var(--green);font-size:12px}.butterfly{position:fixed;z-index:3;pointer-events:none;opacity:.65;font-size:25px;filter:saturate(.7);animation:fly 13s ease-in-out infinite}.butterfly-one{top:17%;right:9%}.butterfly-two{bottom:16%;left:7%;animation-delay:-6s;font-size:20px}@keyframes fly{0%,100%{transform:translate(0,0) rotate(-12deg)}25%{transform:translate(24px,-35px) rotate(14deg)}50%{transform:translate(-15px,-65px) rotate(-18deg)}75%{transform:translate(16px,-25px) rotate(10deg)}}.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}.reveal.visible{opacity:1;transform:none}@media(max-width:520px){.page{padding:58px 19px}.hero{min-height:100svh}.hero:before{inset:3% 5%}.hero:after{inset:4% 6%}.hero-content{padding:20px 3px}.foliage{width:180px;height:230px}.foliage-top{top:-58px;left:-60px}.foliage-bottom{bottom:-65px;right:-60px}.names{gap:9px}.date-row{gap:10px}.date-row span{min-width:78px;font-size:12px}.family-grid{gap:8px}.family-grid p:last-child{font-size:12px}.butterfly{font-size:19px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}.reveal{opacity:1;transform:none}}

.music-toggle{position:fixed;right:16px;bottom:18px;z-index:999;background:#184b36;color:#fff;border:1px solid #d5bb83;border-radius:999px;padding:12px 17px;font:600 13px 'DM Sans',sans-serif;box-shadow:0 7px 22px #15362433;cursor:pointer;display:flex;gap:9px;align-items:center}.music-toggle:hover{background:#286a4e}.music-toggle[hidden]{display:none}

/* Four-screen layout: envelope cover followed by invitation, photograph, location. */
body:not(.invitation-opened){overflow:hidden}
.invitation-main[inert]{visibility:hidden;height:0;overflow:hidden}
.envelope-cover{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:25px 18px;background:radial-gradient(ellipse at center,#fffefa 12%,#f2f1e6 100%)}
.envelope-cover[hidden]{display:none}
.cover-leaves{position:absolute;width:clamp(180px,42vw,390px);height:clamp(200px,45vw,430px);background:url('assets/botanical.png') center/contain no-repeat;pointer-events:none;opacity:.85}.cover-leaves-left{top:-95px;left:-115px;transform:rotate(-30deg)}.cover-leaves-right{bottom:-100px;right:-110px;transform:rotate(148deg)}
.cover-kicker,.cover-date{z-index:1;letter-spacing:.22em;font-size:clamp(10px,2.6vw,13px);color:#61715f;font-weight:700}.cover-title{z-index:1;font-size:clamp(56px,12vw,94px);margin:8px 0 0;line-height:1.15}.cover-subtitle{z-index:1;font-family:'Playfair Display',serif;line-height:1.8;margin:8px 0 22px;font-size:clamp(14px,3.5vw,18px)}.cover-subtitle strong{display:block;color:#28533e;font-size:1.35em}.cover-date{margin-top:26px}.envelope-button{border:0;background:none;cursor:pointer;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:23px;padding:12px;touch-action:manipulation}.envelope-button:focus-visible{outline:3px solid #c2a36d;border-radius:12px}.open-caption{font-family:'DM Sans',sans-serif;color:#385747;font-size:13px;letter-spacing:.08em;animation:promptPulse 2.2s ease-in-out infinite}.envelope-visual{position:relative;display:block;width:min(75vw,350px);height:min(48vw,220px);filter:drop-shadow(0 16px 17px #1a352a42);perspective:850px}.envelope-back{position:absolute;inset:0;background:#153d2f;border-radius:5px}.envelope-letter{position:absolute;z-index:2;left:12%;bottom:6%;width:76%;height:87%;background:linear-gradient(135deg,#fffef8,#f6eddb);border:2px solid #c7b47e;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 1s cubic-bezier(.2,.7,.2,1);box-shadow:0 1px 5px #0002}.letter-script{font-family:'Great Vibes',cursive;color:#2c4c3a;font-size:clamp(26px,6vw,39px)}.letter-heart{font-size:28px;color:#a88b4f}.envelope-front{position:absolute;inset:0;z-index:4;background:linear-gradient(145deg,#235440,#0d3026);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);border-radius:4px}.envelope-flap{position:absolute;inset:0;z-index:5;background:linear-gradient(160deg,#31664c,#123d2e);clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:50% 0;transition:transform .75s ease,z-index 0s .4s;backface-visibility:hidden}.wax-seal{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);z-index:6;display:grid;place-items:center;width:59px;height:59px;border-radius:50%;font-family:'Playfair Display',serif;font-size:12px;font-weight:700;letter-spacing:-.04em;color:#5e4318;background:radial-gradient(circle at 30% 25%,#f9e6a9,#c99b4e 60%,#9b6c2f);border:3px double #fff0c6;box-shadow:0 3px 10px #0004;transition:opacity .3s}.is-opening .envelope-flap{transform:rotateX(180deg);z-index:1}.is-opening .wax-seal{opacity:0}.is-opening .envelope-letter{transform:translateY(-72%)}.is-opening .envelope-visual{animation:envelopeFade 1.2s .1s both}.is-opening .cover-kicker,.is-opening .cover-title,.is-opening .cover-subtitle,.is-opening .cover-date,.is-opening .open-caption{animation:fadeAway .6s .55s forwards}.music-toggle{position:fixed;z-index:30;bottom:18px;right:16px;border:1px solid #d3c59f;background:#fffdf5f2;color:#244b3c;border-radius:30px;padding:12px 17px;box-shadow:0 5px 20px #0002;font-family:'DM Sans',sans-serif;font-weight:700;cursor:pointer}.music-toggle[hidden]{display:none}body:not(.invitation-opened) .music-toggle{display:none}@keyframes envelopeFade{0%,60%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.14)}}@keyframes fadeAway{to{opacity:0}}@keyframes promptPulse{50%{opacity:.48}}@media(prefers-reduced-motion:reduce){.is-opening .envelope-letter{transform:none}.is-opening .envelope-visual{opacity:0}}

/* Refined realistic emerald envelope; typography and visual hierarchy */
.envelope-cover{background:radial-gradient(ellipse at 50% 42%,#fffdf5 0%,#f7efdf 65%,#eee5d3 100%);padding:22px 14px;gap:0}
.cover-kicker{font-size:11px;letter-spacing:.28em;color:#967e50;margin:0 0 12px}
.cover-title{font-family:'Great Vibes',cursive;font-size:clamp(49px,11vw,76px);color:#a78343;margin:0 0 3px;line-height:1.16;font-weight:400}
.cover-subtitle{font-size:14px;color:#56604e;margin:0 0 22px;line-height:1.6}
.cover-subtitle strong{font-family:'Playfair Display',serif;font-size:20px;letter-spacing:.01em;color:#214b37;font-weight:600}
.envelope-visual{width:min(83vw,405px);height:min(57vw,280px);max-height:260px;filter:drop-shadow(0 18px 16px #18372c45)}
.envelope-back{background:linear-gradient(120deg,#0c3b2b,#185b41);border:1px solid #b59b63;box-shadow:inset 0 0 0 5px #ffffff0c}
.envelope-letter{left:8%;width:84%;height:96%;bottom:4%;z-index:2;background:linear-gradient(130deg,#fffef9,#f4ebd9);border:1px solid #cbb684;box-shadow:0 0 10px #0003;justify-content:flex-start;padding-top:24px}
.letter-script{font-family:'Great Vibes',cursive;font-size:clamp(28px,6vw,42px);color:#a67c3f;line-height:1.25;white-space:nowrap}
.letter-script em{font-size:.7em;font-style:normal}
.letter-heart{font-family:'Playfair Display',serif;font-size:11px;letter-spacing:.08em;color:#65553e;margin-top:12px}
.envelope-front{background:linear-gradient(150deg,#145139 0%,#0a3929 55%,#092f25 100%);clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);box-shadow:inset 0 0 20px #071b1444}
.envelope-flap{background:linear-gradient(155deg,#236b4c,#0b3b2b);clip-path:polygon(0 0,100% 0,50% 59%);filter:drop-shadow(0 3px 2px #0003)}
.wax-seal{width:67px;height:67px;top:58%;font-size:13px;letter-spacing:.02em;color:#654314;background:radial-gradient(circle at 28% 24%,#fff1c0,#dfb665 38%,#ad7934 76%,#81541e);border:5px double #f8dfa3;box-shadow:0 3px 9px #061c1666, inset 0 0 0 2px #996d35}
.open-caption{border-radius:99px;background:#0d4934;color:#fff;padding:12px 21px;font-size:12px;letter-spacing:.035em;box-shadow:0 5px 15px #103e2b25}
.cover-date{margin-top:18px;color:#937949;font-size:11px}
.cover-leaves{opacity:.8;filter:saturate(.95)}
.cover-leaves-left{top:-75px;left:-120px;transform:rotate(-12deg)}
.cover-leaves-right{bottom:-105px;right:-120px;transform:rotate(150deg)}
@media(max-width:420px){.cover-subtitle{margin-bottom:15px}.envelope-button{gap:19px}.cover-title{font-size:52px}.cover-leaves{width:240px;height:290px}.cover-leaves-left{left:-140px;top:-100px}.cover-leaves-right{right:-150px;bottom:-110px}}

/* Editable, genuinely layered envelope: no flat screenshot */
.invitation-main[hidden]{display:none!important}
.envelope-cover{height:100dvh;min-height:560px;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:0;padding:clamp(12px,3vh,26px) 12px;background:linear-gradient(#fff9ecdb,#f7eadbdc),url('assets/botanical.png') center/cover!important}
.envelope-cover::before{content:"";position:absolute;inset:-20%;pointer-events:none;background:radial-gradient(circle at 45% 42%,#fff9efc7,transparent 48%);animation:softLight 9s ease-in-out infinite alternate}
.opening-ambient{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 15%,#f3d69b44,transparent 35%),radial-gradient(circle at 83% 72%,#b5c79c44,transparent 38%);animation:softLight 6s ease-in-out infinite alternate}
.opening-kicker{position:relative;z-index:2;font-size:clamp(10px,2.4vw,13px);letter-spacing:.22em;color:#3b5947;font-weight:600;margin:0 0 7px}
.opening-heading{position:relative;z-index:2;font-family:'Great Vibes',cursive;font-weight:400;font-size:clamp(53px,12vw,98px);line-height:.85;color:#ad7c35;margin:0 0 clamp(15px,4vh,36px);text-shadow:0 2px 2px #fff9;animation:headingEnter 1.2s both}
.opening-heading span{font-size:.78em}
.opening-envelope-wrap{position:relative;z-index:3;width:min(90vw,450px);height:clamp(210px,31vh,315px);display:flex;align-items:center;justify-content:center;animation:floatEnvelope 5s ease-in-out infinite}
.envelope-button{display:block;position:relative;width:100%;height:100%;padding:0;cursor:pointer;touch-action:manipulation;outline-offset:5px}
.envelope-visual{position:relative;display:block;width:100%;height:100%;filter:drop-shadow(0 16px 16px #153b2e4b);perspective:1100px}
.envelope-back{inset:0;position:absolute;background:linear-gradient(130deg,#0c3628,#24654c 50%,#0b3527);border-radius:4px;box-shadow:inset 0 0 0 2px #b68c45}
.envelope-letter{position:absolute;z-index:2;bottom:7%;left:9%;width:82%;height:89%;background:linear-gradient(140deg,#fffefa,#f3e8d3);border:2px solid #d4b97c;border-radius:3px;box-shadow:0 0 8px #0002;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;transition:transform 1.05s cubic-bezier(.15,.7,.25,1)}
.letter-script{font-size:clamp(26px,6.5vw,43px);line-height:1.15;color:#9b6b34}.letter-heart{font-size:clamp(12px,2.8vw,17px);color:#5d5c44;margin-top:8px}
.envelope-front{position:absolute;inset:0;z-index:4;clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);background:linear-gradient(145deg,#1b5840 2%,#0b392b 62%,#073023);box-shadow:inset 0 -2px 0 #bb934e}
.envelope-front::after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,transparent 49.5%,#b88f4b 50%,transparent 50.5%);opacity:.55}
.envelope-flap{position:absolute;inset:0;z-index:5;clip-path:polygon(0 0,100% 0,50% 58%);background:linear-gradient(150deg,#2a6d51,#0b3a2b 78%);transform-origin:top center;transition:transform .9s ease;backface-visibility:hidden;filter:drop-shadow(0 3px 1px #0003)}
.wax-seal{z-index:6;position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);width:clamp(48px,13vw,68px);height:clamp(48px,13vw,68px);border-radius:50%;background:radial-gradient(circle at 32% 25%,#ffdf91,#c78d3a 65%,#82501f);border:4px double #ffe2a1;box-shadow:0 4px 12px #0006;color:#664315;display:grid;place-items:center;font-size:28px;transition:opacity .3s}
.tap-hint{position:relative;z-index:3;border:1px solid #c5a16c;background:#0d4935;color:#fff7df;border-radius:40px;letter-spacing:.19em;font-size:clamp(10px,2.5vw,13px);padding:13px 26px;min-height:44px;box-shadow:0 7px 18px #23433438;cursor:pointer;margin-top:clamp(12px,3vh,26px);animation:hintPulse 2.5s infinite}
.opening-footer{position:relative;z-index:2;letter-spacing:.12em;color:#53664c;font-size:clamp(10px,2.6vw,13px);margin:clamp(15px,3vh,28px) 0 0;text-align:center}
.opening-butterfly{position:absolute;z-index:2;font-size:clamp(20px,5vw,32px);pointer-events:none;filter:saturate(.7);animation:butterflyFloat 6s ease-in-out infinite alternate}.butterfly-a{left:10%;top:24%}.butterfly-b{right:10%;top:30%;animation-delay:-3s}
.is-opening .envelope-flap{transform:rotateX(180deg);z-index:1}.is-opening .wax-seal{opacity:0}.is-opening .envelope-letter{transform:translateY(-80%)}
.is-opening .opening-envelope-wrap{animation:envelopeLeave 1.45s both}.is-opening .opening-heading,.is-opening .opening-kicker,.is-opening .opening-footer,.is-opening .tap-hint{animation:fadeAway .55s .8s forwards}
@keyframes floatEnvelope{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes softLight{to{opacity:.48;transform:scale(1.06)}}@keyframes headingEnter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes hintPulse{50%{box-shadow:0 7px 26px #bc96587a}}@keyframes butterflyFloat{to{transform:translate(15px,-17px) rotate(15deg)}}@keyframes envelopeLeave{0%,55%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.14)}}
@media(max-width:600px){.envelope-cover{min-height:0;padding:10px 12px;justify-content:center}.opening-heading{font-size:clamp(54px,14vw,77px);margin-bottom:clamp(15px,4vh,32px)}.opening-envelope-wrap{width:min(84vw,390px);height:auto;aspect-ratio:1.5}.opening-footer{max-width:85%}.hero-content,.section-inner{width:min(100% - 28px,540px)}.page{min-height:100svh;padding:72px 14px 56px}.names{overflow-wrap:anywhere}.family-grid{grid-template-columns:1fr}.date-row{max-width:100%}.event-card{max-width:100%}.music-toggle{bottom:max(12px,env(safe-area-inset-bottom));right:12px}}
@media(max-height:650px){.opening-heading{font-size:clamp(44px,10vh,64px);margin-bottom:8px}.opening-envelope-wrap{width:min(64vw,300px)}.tap-hint{margin-top:8px}.opening-footer{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.opening-envelope-wrap,.opening-butterfly,.opening-ambient,.opening-heading,.tap-hint{animation:none!important}}

/* MOBILE-FIRST INTERACTIVE COVER: editable CSS, not a flat image-only screen */
.premium-cover{position:relative!important;display:block!important;width:100%;height:100svh;min-height:560px;overflow:hidden;background:#f6ead6;padding:0!important;isolation:isolate}
.premium-cover[hidden]{display:none!important}
.cover-background{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;animation:coverBreath 8s ease-in-out infinite alternate;pointer-events:none}
.cover-touch{position:absolute;z-index:4;top:42%;left:5%;width:90%;height:43%;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cover-touch:focus-visible,.cover-open-button:focus-visible{outline:3px solid #fff1a7;outline-offset:3px}
.accessible-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.cover-open-button{position:absolute;z-index:5;bottom:10%;left:50%;transform:translateX(-50%);padding:12px 18px;white-space:nowrap;border-radius:999px;border:1px solid #d9ad60;background:#063d2edc;color:#f9e3b3;box-shadow:0 4px 22px #39200855;font:600 clamp(12px,3vw,15px) 'DM Sans',sans-serif;letter-spacing:.06em;animation:hintPulse 2.6s ease-in-out infinite;cursor:pointer}
.floating-glow{position:absolute;z-index:2;width:12px;height:12px;border-radius:50%;background:#fff3c5;filter:blur(4px);box-shadow:0 0 22px 11px #fff5b777;pointer-events:none;animation:glowFloat 7s ease-in-out infinite}
.glow-one{top:25%;left:15%}.glow-two{top:67%;right:12%;animation-delay:-3s}
.drifting-petal{position:absolute;z-index:2;color:#fff7e6;opacity:.8;text-shadow:0 2px 8px #a78c56;pointer-events:none;animation:petalDrift 11s linear infinite}
.petal-one{top:-5%;left:25%;font-size:19px}.petal-two{top:-12%;left:75%;font-size:14px;animation-delay:-4s}.petal-three{top:-8%;left:48%;font-size:13px;animation-delay:-7s}
.premium-cover.is-opening .cover-background{animation:coverOpen 1.05s ease-in forwards}
.premium-cover.is-opening .cover-touch,.premium-cover.is-opening .cover-open-button{pointer-events:none;opacity:0}
@keyframes coverBreath{from{transform:scale(1)}to{transform:scale(1.025)}}
@keyframes coverOpen{0%{opacity:1;transform:scale(1)}65%{opacity:1;transform:scale(1.10) translateY(-1%)}100%{opacity:0;transform:scale(1.17) translateY(-3%)}}
@keyframes hintPulse{0%,100%{box-shadow:0 4px 18px #39200855}50%{box-shadow:0 4px 28px #ffd687bd}}
@keyframes glowFloat{0%,100%{transform:translate(0,0);opacity:.25}50%{transform:translate(20px,-28px);opacity:.8}}
@keyframes petalDrift{0%{transform:translate(0,-10vh) rotate(0);opacity:0}12%{opacity:.8}85%{opacity:.7}100%{transform:translate(40px,110vh) rotate(240deg);opacity:0}}
.invitation-main{width:100%;overflow-x:clip}
.invitation-main .page{min-height:100svh;box-sizing:border-box}
@media(max-width:600px){.premium-cover{min-height:0;height:100svh}.cover-open-button{bottom:9%;font-size:12px;padding:10px 14px}.invitation-main .page{padding-left:clamp(12px,4vw,20px);padding-right:clamp(12px,4vw,20px)}.hero-content,.section-inner{max-width:100%;overflow-wrap:break-word}.family-grid{grid-template-columns:1fr!important}.date-row{max-width:100%}}
@media(min-width:601px){.premium-cover{max-width:500px;margin-inline:auto;box-shadow:0 0 80px #163b2b30}.cover-open-button{bottom:9%}}
@media(prefers-reduced-motion:reduce){.cover-background,.floating-glow,.drifting-petal,.cover-open-button{animation:none!important}}

/* Responsive invitation visibility fix */
html,body{max-width:100%;overflow-x:hidden}
body.invitation-opened{overflow-y:auto!important;height:auto!important;position:static!important}
body.invitation-opened #invitationMain{display:block!important;visibility:visible!important;height:auto!important;overflow:visible!important}
body.invitation-opened .reveal{opacity:1!important;transform:none!important}
body.invitation-opened #envelopeCover{display:none!important}
#invitationMain[hidden],#envelopeCover[hidden]{display:none!important}
.invitation-main .page{width:100%;height:auto;min-height:100svh;overflow:visible;scroll-margin-top:45px}
.hero-content,.section-inner{min-width:0;max-width:100%;padding:12px 0}
.mobile-nav{position:sticky;top:0;z-index:20;display:flex;justify-content:center;gap:clamp(10px,4vw,35px);padding:12px;background:#fffcf4ee;backdrop-filter:blur(12px);box-shadow:0 3px 14px #173b2720}
.mobile-nav a{font-size:clamp(12px,3.5vw,14px);font-weight:700;color:#24523e;text-decoration:none}
.premium-cover{height:100dvh!important;min-height:0!important}
.cover-background{width:100%;height:100%;object-fit:cover;object-position:center}
.natural-butterfly{position:absolute;z-index:3;pointer-events:none;width:clamp(32px,9vw,67px);filter:drop-shadow(0 4px 6px #3a342944);animation:butterflyFlight 9s ease-in-out infinite}
.butterfly-a{left:9%;top:17%}.butterfly-b{right:8%;top:30%;width:clamp(27px,7vw,51px);animation-delay:-3.5s}
@keyframes butterflyFlight{0%,100%{transform:translate(0,0) rotate(-12deg) scaleX(1)}25%{transform:translate(13px,-21px) rotate(8deg) scaleX(.75)}50%{transform:translate(-8px,-33px) rotate(-8deg) scaleX(1)}75%{transform:translate(10px,-12px) rotate(12deg) scaleX(.65)}}
@media(max-width:600px){.invitation-main .page{min-height:100svh;padding:30px 20px 45px}.hero-content,.section-inner{width:100%!important;max-width:420px!important;margin:auto}.hero h1{font-size:clamp(39px,11vw,56px)}.names{font-size:clamp(29px,8vw,43px);gap:7px}.date-row{gap:8px}.date-row span{min-width:0;width:30%;font-size:clamp(10px,3vw,13px)}.date-row strong{font-size:clamp(54px,15vw,76px)}.single-photo{height:clamp(175px,29vh,250px);width:min(70vw,280px)}.countdown{gap:6px}.countdown>div{flex:1;width:auto;padding:9px 2px}.countdown strong{font-size:clamp(17px,5.6vw,25px)}.family-grid{grid-template-columns:1fr}.foliage{opacity:.35}.music-toggle{right:9px;bottom:max(10px,env(safe-area-inset-bottom));padding:9px 12px}.cover-touch{top:38%;height:50%}}
@media(max-height:700px) and (max-width:600px){.invitation-main .page{padding-block:22px}.hero h1{margin:4px 0}.ornament{margin:9px 0}.date-row{margin:10px auto}.single-photo{height:175px}}
@media(prefers-reduced-motion:reduce){.natural-butterfly{animation:none}}

/* FINAL SMARTPHONE FIX: all content after opening stays visible, readable, and scrollable. */
html { scroll-padding-top: 56px; }
body.invitation-opened { overflow: auto !important; height: auto !important; min-height: 100svh; touch-action: pan-y; }
body.invitation-opened main#invitationMain { display: block !important; height: auto !important; min-height: 100svh; overflow: visible !important; visibility: visible !important; opacity: 1 !important; }
body.invitation-opened main#invitationMain .page { display: flex !important; height: auto !important; min-height: 100svh !important; max-height: none !important; overflow: visible !important; padding-block: 52px !important; }
body.invitation-opened .hero-content,body.invitation-opened .section-inner { position: relative; width: min(100%, 570px) !important; max-width: 100% !important; height: auto !important; overflow: visible !important; opacity: 1 !important; transform: none !important; }
body.invitation-opened .page * { max-width: 100%; }
body.invitation-opened .date-row strong { flex-shrink: 0; }
body.invitation-opened .event-card { min-width: 0; }
@media (max-width: 600px) {
  body.invitation-opened main#invitationMain .page { min-height: 100svh !important; padding: 45px 20px 50px !important; align-items: center; }
  body.invitation-opened .hero-content,body.invitation-opened .section-inner { width: 100% !important; padding: 16px 4px !important; }
  .hero h1 { font-size: clamp(38px, 10vw, 52px) !important; line-height: 1.2; }
  .names { font-size: clamp(25px, 7.8vw, 40px) !important; gap: 5px !important; }
  .names span { min-width: 0; overflow-wrap: anywhere; }
  .invitation-line { font-size: clamp(13px, 3.6vw, 16px) !important; }
  .date-row { gap: 5px !important; margin: 13px auto !important; }
  .date-row span { min-width: 0 !important; width: 32%; font-size: clamp(10px, 3vw, 13px) !important; }
  .date-row strong { font-size: clamp(48px, 14vw, 72px) !important; }
  .venue-name { font-size: clamp(18px, 5vw, 24px) !important; }
  .family-grid { grid-template-columns: 1fr !important; }
  .single-photo { width: min(67vw, 255px) !important; height: clamp(155px, 27vh, 235px) !important; }
  .countdown { gap: 5px !important; }
  .countdown>div { flex: 1 1 0; width: auto !important; min-width: 0; padding: 10px 1px !important; }
  .countdown strong { font-size: clamp(16px, 5vw, 23px) !important; }
  .countdown span { font-size: 9px; }
  .event-card { padding: 12px !important; gap: 9px !important; }
  .location-card { padding: 17px 12px !important; }
  .location-card h3 { font-size: clamp(18px, 5vw, 24px) !important; }
  .thank-you { font-size: clamp(45px, 12vw, 65px) !important; }
  .foliage { opacity: .24 !important; }
  .music-toggle { position: fixed !important; right: 8px !important; bottom: max(9px, env(safe-area-inset-bottom)) !important; font-size: 11px !important; padding: 9px 12px !important; }
  .mobile-nav { padding: 12px 7px !important; }
}
@media (max-width: 360px) { body.invitation-opened main#invitationMain .page { padding-inline: 12px !important; } .eyebrow { letter-spacing: .08em; } .family-grid>div { padding: 9px 5px; } }
@media (max-height: 650px) and (max-width: 600px) { body.invitation-opened main#invitationMain .page { align-items: flex-start !important; } }
/* Definitive mobile visibility and scroll repair */
html,body{overflow-x:hidden!important}
body.invitation-opened{position:relative!important;overflow-y:auto!important;overflow-x:hidden!important;height:auto!important;min-height:100vh!important}
#invitationMain:not([hidden]){display:block!important;position:relative!important;visibility:visible!important;opacity:1!important;height:auto!important;min-height:100vh!important;overflow:visible!important;z-index:10!important}
#invitationMain:not([hidden]) .page{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;visibility:visible!important;opacity:1!important;height:auto!important;min-height:100svh!important;max-height:none!important;overflow:visible!important;z-index:1!important}
#invitationMain:not([hidden]) .page .hero-content,#invitationMain:not([hidden]) .page .section-inner,#invitationMain:not([hidden]) .reveal{display:block!important;visibility:visible!important;opacity:1!important;transform:none!important;filter:none!important;z-index:5!important;position:relative!important}
#invitationMain:not([hidden]) .page .hero-content *,#invitationMain:not([hidden]) .page .section-inner *{visibility:visible!important;opacity:1!important}
#invitationMain:not([hidden]) .page .foliage{z-index:0!important;pointer-events:none!important;opacity:.17!important}
#envelopeCover[hidden]{display:none!important}
@media(max-width:600px){#invitationMain:not([hidden]) .page{padding:65px 17px 52px!important;align-items:center!important}#invitationMain:not([hidden]) .hero-content,#invitationMain:not([hidden]) .section-inner{width:100%!important;max-width:440px!important;margin:auto!important;padding:10px 0!important}.hero h1{font-size:clamp(35px,10vw,49px)!important}.names{font-size:clamp(26px,7vw,37px)!important}.family-grid{grid-template-columns:1fr!important}.mobile-nav{position:sticky!important;top:0!important}}

/* Fix opening visibility on Android Chrome */
body.invitation-opened #invitationMain,
body.invitation-opened #invitationMain .hero-content,
body.invitation-opened #invitationMain .section-inner {
 display:block!important;visibility:visible!important;opacity:1!important;
 transform:none!important;filter:none!important;
}
body.invitation-opened #invitationMain .page{display:flex!important}
body.invitation-opened #invitationMain .page .reveal{opacity:1!important;transform:none!important}