@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Great+Vibes&display=swap');
:root{--cream:#f7f1e4;--ink:#534337;--red:#8c2635;--line:#cbb99c;--script:'Great Vibes','Snell Roundhand','Apple Chancery',cursive;--serif:'Cormorant Garamond',Georgia,serif}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 50% 25%,#fcf9f0,#e9deca);font-family:var(--serif);min-height:100svh}body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.32' filter='url(%23n)'/%3E%3C/svg%3E")}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--red);outline-offset:6px}.sound{position:fixed;right:20px;top:18px;border:1px solid #cdbda7;border-radius:30px;padding:8px 12px;background:#f7f1e4d9;font-size:11px;letter-spacing:1.5px;z-index:20}.script{font-family:var(--script);font-weight:400;text-transform:none}.cover{min-height:100svh;display:flex;align-items:center;flex-direction:column;justify-content:center;padding:70px 20px 35px;overflow:hidden}.eyebrow{font-size:12px;letter-spacing:3px;margin:0 0 23px}h1{font-size:clamp(43px,7vw,74px);margin:0;text-align:center;line-height:1.2}h1 span{font-size:.65em;color:#9c765f}.envelope-scene{width:min(540px,90vw);height:330px;display:grid;place-items:center;perspective:1400px;margin:40px 0 10px}.envelope{position:relative;width:100%;height:280px;filter:drop-shadow(0 18px 22px #68513c35);transition:transform 1.2s}.back{position:absolute;inset:0;background:#d8c9ad;border-radius:5px}.letter-preview{position:absolute;width:90%;height:90%;left:5%;top:4%;z-index:1;background:var(--cream);display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid #e5dac6;transition:transform 1.3s .65s}.letter-preview .script{font-size:64px}.letter-preview small{letter-spacing:3px}.fold{position:absolute;inset:0;z-index:3}.left{clip-path:polygon(0 0,57% 60%,0 100%);background:linear-gradient(105deg,#efe3ce,#e5d6bd)}.right{clip-path:polygon(100% 0,43% 60%,100% 100%);background:linear-gradient(-105deg,#eee2cd,#dac9ac)}.bottom{clip-path:polygon(0 100%,50% 39%,100% 100%);background:linear-gradient(0deg,#f1e6d3,#e3d4ba)}.flap{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 60%);background:linear-gradient(#f5ebda,#e2d2b5);z-index:4;transform-origin:top;transition:transform 1s .25s,z-index 0s .7s;backface-visibility:visible}.seal{position:absolute;left:calc(50% - 43px);top:calc(53% - 43px);width:86px;height:86px;z-index:5;border:0;border-radius:43% 49% 45% 47%;background:radial-gradient(circle at 35% 28%,#b95156 0,#922e3a 42%,#651525 85%);box-shadow:2px 5px 6px #67452e50,inset 3px 3px 3px #e38c7360,inset -3px -3px 4px #460d1c80;transition:opacity .4s,transform .4s}.seal:before{content:'';position:absolute;inset:8px;border:1px solid #e07c7060;border-radius:50%;box-shadow:inset 1px 1px 3px #4b0e24,1px 1px 2px #e99b8460}.seal>span{position:relative;font-family:var(--script);font-size:29px;color:#eac0a3;text-shadow:1px 1px #511423}.amp{font-size:18px;margin:0 3px}.seal:hover{transform:scale(1.04)}.envelope.open .seal{opacity:0;transform:scale(1.15);pointer-events:none}.envelope.open .flap{transform:rotateX(180deg);z-index:0}.envelope.open .letter-preview{transform:translateY(-170px)}.envelope.open{transform:translateY(65px)}.hint{letter-spacing:2.4px;font-size:11px;margin:12px 0 25px}.date{letter-spacing:3px;font-size:14px}.page{max-width:840px;margin:65px auto 30px;padding:0 24px;animation:appear .8s ease both}.paper{position:relative;background:var(--cream);box-shadow:0 18px 65px #6a52331c;border:1px solid #e7ddc8;padding:38px 60px;text-align:center}.paper:before{content:'';position:absolute;inset:13px;border:1px solid #d3c2a65c;pointer-events:none}.paper p{font-size:16px;letter-spacing:1.4px;line-height:1.65;margin:15px 0}.ceremony{max-width:660px;margin:auto}.ornament{font-size:27px;color:#ad8c68;margin:0 0 16px}.names{font-size:49px;line-height:1.25;margin:5px 0 25px}.names span{display:block;font-size:31px;margin:2px}.rule{width:65px;height:1px;background:var(--line);margin:25px auto}.paper .event-date{font-size:26px;letter-spacing:4px;margin:8px 0}.location{font-size:47px;line-height:1.15;margin:22px -10px}.paper .closing{font-size:15px}.paper .rsvp{font-size:12px;letter-spacing:1.8px;margin:25px 0}.ceremony>.ornament:last-child{transform:rotate(180deg);margin:0}.journey{min-height:700px;padding:170px 185px}.journey-copy{position:relative;z-index:2}.journey-copy p{font-size:15px;letter-spacing:1px;line-height:1.7}.photos{position:absolute;left:26px;right:26px;display:flex;justify-content:space-between}.photos.top{top:30px}.bottom-photos{bottom:30px}.photo{width:145px;height:184px;padding:7px 7px 20px;background:#fffcf4;box-shadow:0 4px 13px #533c2920;margin:0}.p1{transform:rotate(-7deg)}.p2{transform:rotate(6deg)}.p3{transform:rotate(5deg)}.p4{transform:rotate(-6deg)}.photo img{width:100%;height:100%;object-fit:cover;object-position:center 65%}.photo-placeholder{height:100%;display:grid;place-items:center;background:#e8decc;font-size:11px;letter-spacing:1px;color:#a18e74;text-align:center;padding:8px}.journey-copy .iban{font-family:Georgia,serif;letter-spacing:.4px;font-size:14px;overflow-wrap:anywhere}.holder .script{display:block;font-size:30px;line-height:1.5}.copy{background:transparent;border:1px solid #bca58c;padding:9px 17px;font-size:11px;letter-spacing:2px}.status{min-height:20px!important;font-size:12px!important;letter-spacing:0!important}nav{display:flex;justify-content:space-between;align-items:center;margin:25px auto 0;max-width:660px;gap:20px}.text-button{border:0;background:transparent;font-size:11px;letter-spacing:1.6px;padding:12px 0}.next{background:var(--red);color:#fff5e5;padding:14px 22px;border:0;font-size:12px;letter-spacing:1.7px}.next span{margin-left:12px}.nav-date{font-size:12px;letter-spacing:2px}[hidden]{display:none!important}@keyframes appear{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media(max-width:760px){.envelope-scene{height:230px;margin-top:55px}.envelope{height:210px}.eyebrow{font-size:10px;letter-spacing:2px}.seal{width:74px;height:74px;left:calc(50% - 37px);top:calc(53% - 37px)}.page{padding:0 14px;margin-top:62px}.paper{padding:30px 25px}.names{font-size:39px}.location{font-size:38px}.paper p{font-size:13px;letter-spacing:1px}.paper .event-date{font-size:22px;letter-spacing:2px}.paper .closing{font-size:13px}.journey{padding:26px 27px}.photos{position:static;gap:24px;margin:5px 0 30px}.photo{width:calc(50% - 12px);height:165px;max-width:160px}.bottom-photos{margin:30px 0 8px}.journey-copy p{font-size:14px;line-height:1.8}.journey-copy .iban{font-size:13px}.next{padding:13px 15px;font-size:10px}.text-button{font-size:10px;letter-spacing:1px}nav{gap:10px}.hint{font-size:10px}.paper:before{inset:9px}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}.envelope.open .letter-preview{transform:none}}

/* Conto alla rovescia e decorazioni della partecipazione */
.countdown{display:flex;align-items:flex-start;justify-content:center;gap:13px;margin:5px 0 0;font-variant-numeric:tabular-nums}
.countdown>div{min-width:52px;text-align:center}.countdown span{display:block;font-size:32px;font-weight:500;line-height:1.2;color:#825744}
.countdown small{display:block;font-size:9px;letter-spacing:1.8px;margin-top:9px}.countdown i{font-size:22px;font-style:normal;color:#b7a58a;line-height:1.5}
.countdown-note{font-size:10px;letter-spacing:2.4px;margin:20px 0 0;color:#967b61}.cover{padding-top:45px}.cover .date{margin-bottom:15px}.cover .hint{margin-bottom:12px}
.botanical{position:absolute;width:210px;height:300px;background:url('assets/botanical.svg') no-repeat center/contain;pointer-events:none;z-index:0;opacity:.75}
.corner-tl{top:8px;left:-4px;transform:scaleY(-1)}.corner-tr{top:8px;right:-4px;transform:scale(-1)}.corner-bl{bottom:4px;left:-4px}.corner-br{bottom:4px;right:-4px;transform:scaleX(-1)}
.ceremony{overflow:hidden;background:radial-gradient(ellipse at center,#faf5e9 40%,#f3e9d6 100%)}
.ceremony>*:not(.botanical){position:relative;z-index:1}.wedding-rings{display:block;width:92px;height:60px;margin:0 auto 15px}
.ceremony .names{padding:0 12px}.ceremony:before{z-index:1}
.journey{isolation:isolate;overflow:hidden;background:#f4eedf}.memory-backdrop{position:absolute;inset:0;z-index:-1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
.memory-backdrop img{width:100%;height:100%;min-height:0;object-fit:cover;object-position:center 65%;filter:saturate(.6);opacity:.19}
.memory-backdrop:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,#f7f1e4 14%,#f7f1e4ed 40%,#f7f1e480 80%)}
.journey-copy{padding:22px 12px;background:#faf5e9cf;border-top:1px solid #cebb9970;border-bottom:1px solid #cebb9970}.journey .photos{z-index:1}
@media(max-width:760px){.botanical{width:155px;height:250px;opacity:.48}.ceremony{padding-left:30px;padding-right:30px}.wedding-rings{width:80px;height:52px}.countdown{gap:8px}.countdown>div{min-width:43px}.countdown span{font-size:28px}.countdown small{font-size:8px;letter-spacing:1px}.journey-copy{margin:0 -7px;padding:20px 15px}.journey{padding:26px 27px}.memory-backdrop img{opacity:.24}.memory-backdrop:after{background:linear-gradient(0deg,#f7f1e44d,#f7f1e4d9 30%,#f7f1e4e8 65%,#f7f1e459)}}
@media(max-height:740px){.cover{padding-top:30px;padding-bottom:25px}.cover .envelope-scene{margin-top:25px;margin-bottom:0}.cover .eyebrow{margin-bottom:15px}.cover .hint{margin-top:8px}}

/* Un unico motivo floreale accompagna i tre fogli. */
.envelope-flower{z-index:4;bottom:4px;width:145px;height:180px;opacity:.72;transition:opacity .5s;transform-origin:bottom}
.envelope .flower-left{left:8px;transform:rotate(-9deg)}.envelope .flower-right{right:8px;transform:scaleX(-1) rotate(-9deg)}
.envelope.open .envelope-flower{opacity:.3}.seal>span{font-size:25px}
.floral-union{display:block;width:100%;max-width:490px;height:auto;margin:4px auto 9px;pointer-events:none}
.journey-flower{z-index:1;width:160px;height:315px;top:50%;margin-top:-157px;opacity:.7}
.journey-flower-left{left:7px}.journey-flower-right{right:7px;transform:scaleX(-1)}
.journey .journey-copy{z-index:2}.journey .photos{z-index:3}
@media(max-width:760px){.envelope-flower{width:115px;height:140px;opacity:.68}.journey-flower{width:125px;height:300px;opacity:.5}.journey-flower-left{left:-20px}.journey-flower-right{right:-20px}.journey-copy{background:linear-gradient(90deg,#faf5e970,#faf5e9e8 16%,#faf5e9ed 84%,#faf5e970)}.floral-union{width:calc(100% + 30px);max-width:none;margin-left:-15px;margin-top:6px;margin-bottom:7px}}

/* Monogrammi centrati e partecipazione essenziale. */
.seal{display:grid;place-items:center;padding:0}
.seal>span{display:flex;align-items:center;justify-content:center;gap:3px;line-height:1;transform:translate(-2px,3px);font-size:25px}
.seal .amp{font-size:12px;margin:0 1px;line-height:1}
.letter-preview .script{display:flex;align-items:center;justify-content:center;gap:7px;font-size:44px;line-height:1.2}
.letter-preview .preview-amp{font-size:16px}
@media(max-width:760px){.letter-preview .script{font-size:38px}.letter-preview .preview-amp{font-size:13px}}

.music-toggle{position:fixed;right:16px;top:14px;z-index:20;border:1px solid #cdbda7;border-radius:24px;background:#f7f1e4ed;padding:10px 14px;font-size:10px;letter-spacing:1.4px}
#music-credit{text-align:center;font-size:11px;line-height:1.7;color:#86735f;padding:0 20px 24px}#music-credit a{color:inherit;text-underline-offset:3px}

/* Il focus di lettura resta accessibile senza il riquadro di Safari. */
.paper [tabindex="-1"]:focus{outline:none}
/* Evita le decorazioni dei collegamenti riconosciuti automaticamente su iOS. */
a[x-apple-data-detectors],a[x-apple-data-detectors] *{color:inherit!important;text-decoration:none!important;border-bottom:0!important;font:inherit!important}
