/* ALBANOVA STUDIO · Edición Gran Relieve · luis + yadira
   Escenas originales, movimiento en el compositor, compatible con móviles.
*/
:root{--sky:#a9cce2;--powder:#d8eaf4;--ice:#f0f8fc;--ivory:#fffaf1;--paper:#fffdf7;--blue:#4d7799;--navy:#234864;--night:#15374f;--silver:#d7dde0;--line:#bbd1df}
html{scroll-behavior:smooth}body{background:#c3d8e6}.invitation{box-shadow:0 0 70px rgba(17,42,62,.26);background:#fefcf7}.intro{background:radial-gradient(ellipse at 50% 40%,#c9e0ee 0%,#8db5d0 48%,#2c5474 100%);padding:6px 9px 13px;}
.intro::before{inset:14px;border:1px solid rgba(252,253,251,.31);border-radius:0;box-shadow:inset 0 0 0 9px rgba(245,249,251,.06)}
.intro::after{opacity:.34;background-image:radial-gradient(circle,rgba(255,255,255,.7) .7px,transparent 1px);background-size:29px 29px;mask-image:linear-gradient(90deg,transparent,#000,transparent)}
.intro-halo{width:90vmin;height:90vmin;filter:blur(94px);opacity:.26;background:#fff}
.intro-eyebrow{font-size:10px;letter-spacing:.30em;color:#f5fbff;text-shadow:0 2px 6px rgba(13,47,75,.42);margin:0 0 3px}
.intro-footer{color:#f6fcff;text-shadow:0 2px 10px rgba(23,55,79,.55);letter-spacing:.19em;font-weight:600;margin:8px 0 0}
.intro-footer span{color:#e6f4fa}
.intro-line{display:block;color:#dceaf4;letter-spacing:.21em;font:500 13px var(--serif);position:relative;z-index:11;margin-bottom:3px}
.envelope-stage.royal-envelope{width:min(98vw,550px,calc((100svh - 127px)*.63));aspect-ratio:740 / 1180;max-height:calc(100svh - 127px);contain:layout style;filter:drop-shadow(0 32px 28px rgba(9,40,63,.36));perspective:1600px;transform:translate3d(0,0,0)}
.royal-envelope .envelope-shell{z-index:1;inset:0;border-radius:10px;background:#a7cbe2 url('assets/papel-azul-relieve-3d.webp') center/100% 100% no-repeat;border:2px solid rgba(243,252,255,.9);box-shadow:inset 0 0 0 9px rgba(255,255,255,.11),inset 0 0 34px rgba(35,85,119,.18),0 11px 15px rgba(18,47,70,.26)}
.royal-envelope .envelope-shell:before{display:none}.royal-envelope .inner-envelope,.royal-envelope .inner-lining{display:none}
.envelope-liner{position:absolute;inset:3% 5% 12%;z-index:2;background:repeating-linear-gradient(48deg,rgba(255,255,255,.19) 0px,rgba(255,255,255,.19) 1px,transparent 1px,transparent 9px),linear-gradient(147deg,#497c9e 0%,#8fb7d0 55%,#d5e7f2 100%);border:1px solid rgba(250,254,255,.63);clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);box-shadow:inset 0 18px 20px rgba(25,71,109,.35)}
.envelope-gold-edge{position:absolute;inset:2.5%;z-index:3;pointer-events:none;border:1px solid rgba(250,253,251,.63);outline:1px solid rgba(28,82,118,.11);outline-offset:-6px;border-radius:7px}
.royal-envelope .pocket{z-index:9;inset:0;clip-path:polygon(0 24%,50% 52%,100% 24%,100% 100%,0 100%);border-radius:11px;background:linear-gradient(136deg,rgba(236,251,255,.16),rgba(69,117,151,.19) 47%,rgba(10,58,100,.17)),url('assets/papel-azul-relieve-3d.webp') center/100% 100% no-repeat;filter:drop-shadow(0 -3px 4px rgba(31,83,119,.25));box-shadow:inset 0 0 18px rgba(33,77,116,.27)}
.royal-envelope .pocket:before{content:'';position:absolute;inset:0;clip-path:polygon(0 24%,50% 52%,100% 24%,100% 100%,0 100%);background:linear-gradient(to bottom,transparent 20%,rgba(255,255,255,.13) 23%,transparent 35%);pointer-events:none}
.royal-envelope .pocket-texture{background:none}
.royal-envelope .pocket-stitch{border-color:rgba(255,255,255,.33);opacity:.9}
.royal-envelope .pocket-vine{opacity:.5}
.royal-envelope .flap{top:0;left:0;width:100%;height:51%;z-index:13;transform-origin:50% 1%;backface-visibility:visible;filter:drop-shadow(0 13px 8px rgba(25,71,107,.44));}
.royal-envelope .flap svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 5px 4px rgba(35,73,107,.28))}
.flap-outer,.flap-inside,.flap-etched{display:none}
.royal-envelope .envelope-floral-edges{z-index:10;background:url('assets/papel-azul-relieve-3d.webp') center/100% 100% no-repeat;inset:43% 0 0;opacity:.25;clip-path:polygon(0 0,50% 30%,100% 0,100% 100%,0 100%)}
.royal-envelope .envelope-date{z-index:11;bottom:4.8%;font-size:clamp(15px,3vw,23px);color:#fffdf8;text-shadow:0 2px 7px rgba(17,57,85,.53);letter-spacing:.15em}
.royal-envelope .wax{z-index:15;position:absolute;left:50%;top:42%;width:30%;height:auto;aspect-ratio:1;background:transparent;border:0;border-radius:0;box-shadow:none;transform:translate3d(-50%,-50%,0);pointer-events:none;filter:drop-shadow(0 6px 6px rgba(30,59,78,.48));}
.royal-envelope .wax img{width:100%;height:100%;object-fit:contain;}
.royal-envelope .folded-letter{z-index:5;top:50%;left:50%;width:73%;height:69%;transform:translate3d(-50%,9%,0) scale(.76);transform-origin:center;opacity:0;overflow:visible;padding:16px 8px;box-shadow:0 22px 38px rgba(21,58,84,.32),0 0 0 3px #fffef9,inset 0 0 0 4px rgba(190,210,220,.32);background:linear-gradient(139deg,#fffefa,#fffdf9 51%,#edf4f8);border:1px solid #d2e3ed;will-change:transform,opacity}
.royal-envelope .folded-letter:before{content:'';position:absolute;inset:7px;border:1px solid #bcd4e2;pointer-events:none}
.royal-envelope .folded-letter:after{inset:12px;border:1px solid #e3e8eb}
.letter-inner-border{inset:20px;z-index:1;pointer-events:none}
.letter-emboss{position:absolute;z-index:3;font:clamp(15px,3.7vw,27px) var(--serif);color:#adc9d9;text-shadow:-1px -1px #fff,1px 2px #a3b9c7;pointer-events:none}.letter-emboss.top-left{top:6%;left:7%;transform:rotate(-35deg)}.letter-emboss.bottom-right{right:7%;bottom:6%;transform:rotate(142deg)}
.royal-envelope .letter-script{font-size:clamp(27px,6vw,49px)}.royal-envelope .letter-names{font-size:clamp(22px,5vw,37px)}
.unfold-panel{position:absolute;z-index:-1;top:0;width:18%;height:100%;background:linear-gradient(110deg,#e8f2f7,#fffefa 24%,#fffdf8 88%,#d5e6f1);box-shadow:0 5px 14px rgba(42,78,106,.14),inset 0 0 0 2px #c7dce6;opacity:0;backface-visibility:hidden}
.unfold-panel:before{content:'❦';position:absolute;left:14%;top:17%;color:#a7c6d8;writing-mode:vertical-rl;font:22px var(--serif)}
.unfold-panel.left-panel{left:-17%;transform-origin:right center;transform:perspective(550px) rotateY(-88deg)}.unfold-panel.right-panel{right:-17%;transform-origin:left center;transform:perspective(550px) rotateY(88deg)}
.royal-envelope .envelope-hit{z-index:25}
.intro-button{z-index:35;background:linear-gradient(180deg,#fffefa,#f4f8fb);border:1px solid #a8c5d8;color:#315875;box-shadow:0 9px 25px rgba(18,54,80,.25);padding:15px 25px;letter-spacing:.17em;transition:transform .25s,background .25s,box-shadow .25s}
.intro-button:hover{transform:translateY(-3px);box-shadow:0 16px 28px rgba(18,54,80,.25)}
.skip-button{z-index:40;background:rgba(255,255,255,.93);color:#315875;border-radius:22px;border:1px solid rgba(255,255,255,.4);padding:9px 18px}
.butterfly-theatre{position:absolute;z-index:26;left:44%;top:44%;width:120px;height:120px;opacity:0;pointer-events:none;transform:translate3d(-50%,-50%,0) scale(.2);transform-style:preserve-3d;filter:drop-shadow(0 9px 6px rgba(24,65,98,.2))}
.butterfly-theatre .wing{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d}
.butterfly-theatre .wing svg{display:block;width:100%;height:100%;overflow:visible}
.butterfly-theatre .wing-left{left:0;transform-origin:right 47%;animation:wingLeft .36s ease-in-out infinite alternate}
.butterfly-theatre .wing-right{right:0;transform-origin:left 47%;animation:wingRight .36s ease-in-out infinite alternate}
.butterfly-body{position:absolute;top:45%;left:50%;width:3px;height:24px;border-radius:100%;background:#365b78;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.butterfly-spark{position:absolute;color:#fff;opacity:.7;text-shadow:0 0 10px #fff}.butterfly-spark.sp1{top:10%;left:-10%;animation:glowDust 2s ease-in-out infinite alternate}.butterfly-spark.sp2{bottom:10%;right:-5%;animation:glowDust 2.4s .4s ease-in-out infinite alternate}
@keyframes wingLeft{from{transform:perspective(180px) rotateY(-65deg)}to{transform:perspective(180px) rotateY(14deg)}}
@keyframes wingRight{from{transform:perspective(180px) rotateY(65deg)}to{transform:perspective(180px) rotateY(-14deg)}}
@keyframes glowDust{0%{opacity:.18;transform:scale(.4) rotate(-20deg)}100%{opacity:.95;transform:scale(1.18) rotate(30deg)}}
/* CINEMATIC OPENING TIMELINE - single choreography, synchronized phases */
.intro.is-opening .intro-button{animation:buttonDissolve .5s ease forwards;pointer-events:none}
@keyframes buttonDissolve{to{transform:translate3d(0,10px,0);opacity:0}}
.intro.is-opening .royal-envelope .wax{animation:realWax 1.25s .18s cubic-bezier(.17,.72,.2,1) both}
@keyframes realWax{0%,16%{opacity:1;transform:translate3d(-50%,-50%,0) scale(1) rotate(0)}48%{opacity:1;transform:translate3d(-50%,-51%,0) scale(1.1) rotate(-9deg)}100%{opacity:0;transform:translate3d(-70%,-110%,0) scale(.55) rotate(-24deg)}}
.intro.is-opening .royal-envelope .flap{animation:curvedFlap 1.65s 1.02s cubic-bezier(.29,.69,.13,1) both}
@keyframes curvedFlap{0%{opacity:1;transform:perspective(1100px) rotateX(0)}62%{opacity:1;transform:perspective(1100px) rotateX(-160deg)}100%{opacity:0;transform:perspective(1100px) rotateX(-180deg)}}
.intro.is-opening .royal-envelope .folded-letter{animation:paperExtraction 5.3s 1.28s cubic-bezier(.22,.66,.17,1) both}
@keyframes paperExtraction{
0%,9%{opacity:0;z-index:5;transform:translate3d(-50%,13%,0) scale(.76)}
15%{opacity:1;z-index:5;transform:translate3d(-50%,5%,0) scale(.77)}
45%{opacity:1;z-index:5;transform:translate3d(-50%,-81%,0) scale(.91)}
54%{z-index:23;transform:translate3d(-50%,-88%,0) scale(.94)}
69%{z-index:23;transform:translate3d(-50%,-58%,0) scale(1.05)}
84%,100%{z-index:23;opacity:1;transform:translate3d(-50%,-50%,0) scale(1.13)} }
.intro.is-opening .royal-envelope .unfold-panel.left-panel{animation:unfoldLeft 1.3s 4.33s cubic-bezier(.18,.72,.18,1) both}
.intro.is-opening .royal-envelope .unfold-panel.right-panel{animation:unfoldRight 1.3s 4.33s cubic-bezier(.18,.72,.18,1) both}
@keyframes unfoldLeft{0%{opacity:0;transform:perspective(550px) rotateY(-88deg)}14%{opacity:1}100%{opacity:1;transform:perspective(550px) rotateY(0)}}
@keyframes unfoldRight{0%{opacity:0;transform:perspective(550px) rotateY(88deg)}14%{opacity:1}100%{opacity:1;transform:perspective(550px) rotateY(0)}}
.intro.is-opening .royal-envelope .pocket,.intro.is-opening .royal-envelope .envelope-shell,.intro.is-opening .envelope-liner,.intro.is-opening .envelope-gold-edge,.intro.is-opening .royal-envelope .envelope-date,.intro.is-opening .royal-envelope .envelope-floral-edges{animation:envelopeRetire 1.25s 3.95s cubic-bezier(.24,.68,.27,1) both}
@keyframes envelopeRetire{0%,18%{opacity:1;transform:translate3d(0,0,0) scale(1)}100%{opacity:0;transform:translate3d(0,16%,0) scale(.93)}}
.intro.is-opening .butterfly-theatre{animation:butterflyJourney 4.15s 2.75s cubic-bezier(.2,.64,.36,1) both}
@keyframes butterflyJourney{
0%{opacity:0;transform:translate3d(-50%,10%,0) scale(.15) rotate(-40deg)}
15%{opacity:1;transform:translate3d(-15%,-48%,0) scale(.6) rotate(17deg)}
38%{opacity:1;transform:translate3d(62%,-145%,0) scale(.94) rotate(-12deg)}
58%{opacity:1;transform:translate3d(-88%,-220%,0) scale(1.05) rotate(20deg)}
78%{opacity:.85;transform:translate3d(90%,-255%,0) scale(.77) rotate(-8deg)}
100%{opacity:0;transform:translate3d(200%,-370%,0) scale(.3) rotate(10deg)} }
.intro.is-opening .royal-envelope .envelope-stage{animation:none}
.intro.is-opening .royal-envelope{animation:none}
.intro.is-opening .intro-footer,.intro.is-opening .intro-eyebrow,.intro.is-opening .intro-line{animation:coverWordsHide 1s 3.9s both}
@keyframes coverWordsHide{to{opacity:0;transform:translateY(10px)}}
.intro.is-opening .intro-glint.g1{animation:glitter 2.1s 2.9s both}
.intro.is-opening .intro-glint.g2{animation:glitter 2.1s 4.2s both}
.intro.is-opening .intro-glint.g3{animation:glitter 2s 5.5s both}
/* Scrollytelling, light transition between scenes and hand-drawn ornate corners */
.cinema-scene{isolation:isolate;transform:translateZ(0);}
.scene-ornament,.card-ornament{display:block;position:absolute;pointer-events:none;z-index:1;width:clamp(67px,17vw,128px);height:auto;opacity:.74;filter:drop-shadow(0 1px 0 #fff)}
.scene-ornament-tl,.card-ornament-tl{top:19px;left:17px}
.scene-ornament-br,.card-ornament-br{bottom:20px;right:18px;transform:rotate(180deg)}
.card-ornament{width:clamp(48px,12vw,78px);opacity:.7}.card-ornament-tl{top:10px;left:10px}.card-ornament-br{bottom:10px;right:10px}
.engrave-art{width:100%;height:100%;overflow:visible}
.ornament-stem,.ornament-leaf,.ornament-spiral{stroke:#80abc6;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:370;stroke-dashoffset:370;transition:stroke-dashoffset 1.55s cubic-bezier(.17,.8,.22,1),opacity 1s;opacity:.15}
.ornament-leaf{fill:rgba(149,192,217,.12);stroke-width:1.1;transition-delay:.3s}
.ornament-spiral{transition-delay:.6s;stroke-width:1}
.cinema-scene.in-view .engrave-art path{stroke-dashoffset:0;opacity:1}
.engraved-card .ornament-stem,.engraved-card .ornament-leaf,.engraved-card .ornament-spiral{stroke:#83abc0}
.small-fly{position:absolute;top:11%;right:10%;z-index:2;width:clamp(48px,13vw,85px);height:auto;opacity:0;transform:translate3d(-30px,38px,0) scale(.7) rotate(-20deg);filter:drop-shadow(0 5px 4px rgba(39,77,108,.21));transition:opacity 1.6s .65s,transform 2.5s .65s cubic-bezier(.16,.72,.15,1);pointer-events:none}
.cinema-scene.in-view .small-fly{opacity:.62;transform:translate3d(16px,-12px,0) scale(1) rotate(22deg);animation:ambientButterfly 9s 2.4s ease-in-out infinite alternate}
@keyframes ambientButterfly{from{transform:translate3d(16px,-12px,0) rotate(22deg)}to{transform:translate3d(-17px,18px,0) rotate(-14deg)}}
.js .reveal{opacity:0;filter:none;transform:translate3d(0,35px,0) scale(.985);transition:transform 1.05s cubic-bezier(.17,.81,.2,1),opacity 1.12s ease}
.js .reveal.visible{opacity:1;transform:translate3d(0,0,0) scale(1)}
/* HERO: luminous floral fresco, deep contrast typography */
.hero{background:radial-gradient(ellipse at 48% 30%,#fffefa 0%,#f8fbfc 48%,#c4ddec 100%);padding-block:106px 118px}
.hero:before{inset:17px;border:1px solid #93b8d0;box-shadow:inset 0 0 0 7px rgba(255,255,255,.52)}.hero:after{inset:31px;border-color:#dbe6ec}
.hero-flower{width:91%;height:52%;filter:drop-shadow(0 8px 11px rgba(36,75,99,.2));opacity:.9}.hero-flower-top{top:-17%;left:-39%;}.hero-flower-bottom{bottom:-20%;right:-46%}
.hero-line{height:88px;background:linear-gradient(#6e9ab7,transparent)}
.hero-crest{border-color:#83a8be;box-shadow:0 0 0 7px #f4f8f9,0 0 0 9px #bbd2e0,inset 0 5px 10px rgba(73,111,136,.08);background:radial-gradient(circle at 40% 30%,#fff,#e6f0f4);width:124px;height:124px}
.hero .hero-preamble{color:#6b98b8;font-size:clamp(39px,8vw,54px)}
.hero-names{color:#183e59;font-weight:500;line-height:.86;margin-top:18px}
.hero-names .name-line{display:block;font:500 clamp(49px,10.2vw,78px)/.97 var(--serif);white-space:nowrap;letter-spacing:-.04em;max-width:100%}
.hero-names .name-ampersand{display:block;font:400 clamp(42px,9vw,65px)/.9 var(--script);color:#7fa4bd;margin:9px 0}
.hero-names .glyph{display:inline-block;font:inherit;letter-spacing:inherit;color:inherit;opacity:0;transform:translate3d(0,17px,0) rotate(-3deg)}
.hero.in-view .hero-names.visible .glyph{animation:lettersArrive .85s cubic-bezier(.21,.78,.23,1) both;animation-delay:calc(.15s + var(--i)*.07s)}
@keyframes lettersArrive{to{opacity:1;transform:translate3d(0,0,0) rotate(0)}}
.hero-date-frame{background:rgba(255,255,255,.5);border-color:#95b8ce;box-shadow:0 7px 22px rgba(57,97,130,.06);padding:14px 24px}
.hero .hero-city{color:#456d89;font-weight:700}
.hero-butterfly{width:98px;top:14%;right:10%;filter:drop-shadow(0 9px 6px rgba(28,69,104,.2))}
/* STORY: a paper leaf floats above deep blue, with embossed ornaments */
.story{background:radial-gradient(ellipse at 50% 25%,#476d8a 0%,#274d69 62%,#14354d 100%);padding-block:115px 125px}
.story .scene-number{color:#e2ecf5}.story .story-flower{opacity:.4;filter:brightness(1.3)}
.story-paper{background:linear-gradient(150deg,#fffefa 0%,#f4fafb 100%);padding:95px 43px 85px;border-radius:4px;border:2px solid #f5f9fc;box-shadow:0 15px 0 -7px #d9e7f0,0 32px 45px rgba(5,25,39,.34);transform:none}
.story-paper:before{inset:12px;border-color:#c4d7df}.story-paper:after{inset:19px;border-color:#d8e7ee}
.story .story-paper .eyebrow{color:#4c7792}.story .story-paper h2{color:#1a405b}.story .statement{color:#345f7e}
.story .small-fly{right:4%;top:8%}
/* FAMILY: warm paper, dark tall etched cards */
.family{background:linear-gradient(155deg,#f8fcff 0%,#dcecf5 52%,#fffdf7 100%)}
.family-card{border:1px solid #8db5ce;background:linear-gradient(135deg,#fdfefd 0%,#e4f0f6 100%);border-radius:4px;box-shadow:0 17px 0 -11px rgba(124,167,193,.7),0 24px 36px rgba(50,88,113,.17);padding:43px 31px}
.family-card:before{inset:9px;border:1px solid rgba(132,169,190,.48)}
.family-card h3{color:#2b536e}.family-card .family-card-icon{color:#749bb7}
.family-card.padrinos{background:linear-gradient(135deg,#f8fbfc,#d8e8f1)}
/* PROMISE: architectural ivory on midnight, keeps second quote */
.promise{background:radial-gradient(ellipse at 60% 0%,#446e8c 0%,#21465f 45%,#112f45 100%);padding:112px 23px 120px}
.promise-card{background:linear-gradient(155deg,#fffefa,#f5f9fc 65%,#e3eff7);border:2px solid #eaf4f8;border-radius:3px;box-shadow:0 24px 55px rgba(2,22,37,.35),inset 0 0 0 10px rgba(255,255,255,.62)}
.promise .promise-card h2{color:#264c66}.promise .statement{color:#315c7b}.promise .promise-seal{box-shadow:0 0 0 5px #e2eff5,0 0 0 6px #9ebed0}
.promise .promise-butterfly{animation:ambientFloat 9s infinite alternate}
/* COUNTDOWN: atmospheric sapphire blue with porcelain timers */
.countdown{background:radial-gradient(ellipse at 50% 20%,#739bb8,#365e7c 64%,#173b57 100%)}
.countdown .timer-box{background:linear-gradient(156deg,#fffefa,#e3f0f7);border:1px solid #e9f7ff;box-shadow:0 12px 22px rgba(7,40,65,.31),inset 0 0 0 4px rgba(255,255,255,.4);border-radius:5px}
.countdown .timer strong{color:#1f4864}.countdown .date-engraving{color:#f2f7fb}
/* EVENTS: pressed paper cards with corner art drawing into view */
.events{background:linear-gradient(155deg,#e3f0f8 0%,#fffdf7 36%,#d6e8f3 100%)}
.events h2{color:#1f4966}
.events .event-card{background:linear-gradient(147deg,#fffcf7 0%,#fff 47%,#edf7fb 100%);border:1px solid #a1bdcf;box-shadow:0 10px 0 -6px #eaf3f8,0 24px 30px rgba(44,78,108,.2);padding:36px 33px 40px}
.event-card:before{inset:11px;border:1px solid #d7e5ee}.event-card-top{color:#416c8a}.events .event-illustration{background:radial-gradient(ellipse at center,rgba(157,194,217,.16),transparent 70%)}
.events .event-card h3{color:#244963}.events .event-hour{color:#1b3e58}.map-link{background:linear-gradient(100deg,#275271,#1a405c);box-shadow:0 8px 15px rgba(32,69,99,.21)}
/* DETAILS: unique framed plaque */
.details{background:radial-gradient(ellipse at 50% 40%,#537f9e,#15394f)}
.details-frame{background:linear-gradient(140deg,#fffefa,#eaf4f9);border:2px solid #d7e8f1;box-shadow:0 19px 35px rgba(6,36,58,.31),inset 0 0 0 8px rgba(251,253,254,.9);padding:82px 31px}
.details-frame h2{color:#204662}.details-frame p:not(.eyebrow){color:#456c87}
/* RSVP: comfort of a real paper form, contrast button */
.rsvp{background:linear-gradient(150deg,#f4fafc,#d3e7f3 51%,#fffdfa 100%)}
.rsvp-card{background:linear-gradient(150deg,#fffefa,#f2f9fc);border:1px solid #95bdd1;box-shadow:0 16px 0 -9px #deedf5,0 30px 45px rgba(56,95,125,.22);padding:42px clamp(22px,5vw,48px)}
.rsvp-card:before{inset:11px}.rsvp-submit{background:#1d4763;box-shadow:0 10px 19px rgba(40,75,97,.27)}
.rsvp input,.rsvp select{border-radius:3px;border:1px solid #aacbdc}
/* END: immersive contrasting finish */
.goodbye{background:radial-gradient(ellipse at 50% 35%,#fdfdfa 0%,#d9e9f2 65%,#a3c5dd 100%)}
.goodbye:before{inset:17px;border:1px solid #86aec6}
.goodbye-script{color:#4d7f9f}.goodbye h2{color:#183d57}.goodbye .goodbye-flower{opacity:.7}
/* Keep important controls above decorations. */
.engraved-card{position:relative}.engraved-card > :not(.card-ornament){position:relative;z-index:2}
.rsvp form{position:relative;z-index:3}.rsvp-card .card-ornament{z-index:1}
/* Smaller displays, no horizontal overflow, no layout animation. */
@media(max-width:560px){
  .intro{padding:7px 5px calc(7px + env(safe-area-inset-bottom))}
  .envelope-stage.royal-envelope{width:min(98vw,calc((100svh - 112px)*.627));max-height:calc(100svh - 112px)}
  .intro-eyebrow{font-size:8px;letter-spacing:.25em}.intro-footer{font-size:8px}.intro-line{font-size:11px}
  .intro-button{margin-top:9px;font-size:10px;padding:12px 17px}
  .royal-envelope .folded-letter{width:75%;height:68%}.royal-envelope .letter-eyebrow{font-size:clamp(6px,1.5vw,9px)}
  .hero-names .name-line{font-size:clamp(48px,11vw,67px)}
  .hero-names .name-ampersand{font-size:clamp(41px,10vw,54px)}
  .scene-ornament{width:72px}.scene-ornament-tl{top:15px;left:9px}.scene-ornament-br{bottom:14px;right:9px}
  .card-ornament{width:51px}.card-ornament-tl{top:7px;left:7px}.card-ornament-br{bottom:8px;right:8px}
  .story{padding:98px 21px 110px}.story-paper{padding:80px 24px}
  .events .event-card{padding:32px 23px}.promise{padding:109px 18px}
}
@media(max-width:350px){.hero-names .name-line{font-size:47px}.intro-eyebrow{font-size:7px}.intro-button{font-size:9px}}
@media(max-height:650px){.envelope-stage.royal-envelope{width:min(85vw,calc((100svh - 92px)*.627));max-height:calc(100svh - 92px)}.intro-button{padding:9px 15px}.intro-footer{margin:5px 0}}
@media(prefers-reduced-motion:reduce){
  .butterfly-theatre,.small-fly{animation:none!important}
  .intro.is-opening .royal-envelope .pocket,.intro.is-opening .royal-envelope .envelope-shell,.intro.is-opening .royal-envelope .flap,.intro.is-opening .royal-envelope .wax{opacity:0!important}
  .intro.is-opening .royal-envelope .folded-letter{opacity:1!important;transform:translate3d(-50%,-50%,0) scale(1)!important}
  .hero-names .glyph{opacity:1!important;transform:none!important;animation:none!important}
  .engrave-art path{stroke-dashoffset:0!important;opacity:1!important}
}