:root{--taupe:#91877f;--ink:#514740;--gold:#a27a38}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow:hidden}body{background:#736b65;color:var(--ink);font-family:"DM Sans",sans-serif}.phone-experience{position:relative;width:100%;height:100svh;overflow:hidden;isolation:isolate;background:#f3eee6 url("assets/premium-paper-couple.webp") center/cover}.first-page,.photo-page,.details-page,.sealed-cover{position:absolute;inset:0}.first-page,.photo-page,.details-page{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;opacity:0;visibility:hidden;transform:scale(1.04);transition:opacity .7s,transform .9s,visibility 0s .9s}.first-page{background:linear-gradient(rgba(248,243,234,.74),rgba(248,243,234,.74)),url("assets/premium-paper-couple.webp") center/cover}.first-page::before,.details-page::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 15%,rgba(255,255,255,.7),transparent 35%),linear-gradient(160deg,transparent 62%,rgba(213,190,156,.22));pointer-events:none}.first-page p{position:relative;margin:0}.first-page__overline{text-transform:uppercase;letter-spacing:.27em;font-size:.52rem}.first-page__youre,.first-page__invited{text-transform:uppercase;letter-spacing:.06em;font:400 clamp(2.5rem,13vw,4rem)/.95 "Cormorant Garamond",serif;text-shadow:0 1px #fff}.first-page__youre{margin-top:2.2rem!important}.first-page__script{z-index:1;margin:-.2rem 0 -.5rem!important;font:400 clamp(3.9rem,20vw,6.2rem)/1 "Great Vibes",cursive;color:#756961;transform:rotate(-5deg)}.first-page__line{position:relative;width:3rem;height:1px;margin:2.3rem 0 1.2rem;background:var(--gold)}.first-page__names{font:italic 500 1.35rem "Cormorant Garamond",serif}.first-page__names i{color:var(--gold)}.first-page__hint{position:absolute!important;bottom:max(2rem,env(safe-area-inset-bottom));text-transform:uppercase;letter-spacing:.2em;font-size:.47rem;opacity:.55}.photo-page{padding:0;background:#3d332d}.photo-page img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% center}.photo-page__shade{position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(43,31,25,.76))}.photo-page p,.photo-page small{position:absolute;z-index:1;color:white}.photo-page p{bottom:5.5rem;margin:0;font:400 clamp(3rem,15vw,5rem) "Great Vibes",cursive}.photo-page p span{color:#d6ae69}.photo-page small{bottom:4rem;text-transform:uppercase;letter-spacing:.25em;font-size:.5rem}.details-page{background:linear-gradient(rgba(248,243,234,.78),rgba(248,243,234,.78)),url("assets/premium-paper-couple.webp") center/cover}.details-page>*{position:relative}.details-page p{margin:.4rem 0;font:italic .8rem "Cormorant Garamond",serif}.details-page__small{text-transform:uppercase!important;letter-spacing:.25em;font:500 .48rem "DM Sans",sans-serif!important}.details-page h1{margin:1.2rem 0 .6rem;font:400 clamp(4rem,20vw,6rem) "Great Vibes",cursive}.details-page__date{display:flex;align-items:center;gap:1rem}.details-page__date strong{font:400 4rem "Cormorant Garamond",serif}.details-page__date span{padding:.35rem 0;border-block:1px solid #ac8b53;text-transform:uppercase;letter-spacing:.12em;font-size:.55rem}.details-page h2{margin:1.2rem 0 0;font:500 1.6rem "Cormorant Garamond",serif}.details-page a{margin-top:2rem;padding:.8rem 1rem;color:#fff;background:#665850;text-decoration:none;text-transform:uppercase;letter-spacing:.14em;font-size:.5rem}.sealed-cover{z-index:5;overflow:hidden;background:#817870;transition:opacity .35s .85s,visibility 0s 1.2s}.paper{position:absolute;inset:-2%;background-color:var(--taupe);background-image:linear-gradient(120deg,rgba(255,255,255,.08),rgba(0,0,0,.05)),url("assets/premium-antique-paper.webp");background-size:auto,cover;background-blend-mode:normal,multiply;transition:transform 1.1s cubic-bezier(.65,0,.18,1)}.paper--base{inset:0;background-color:#80766f}.paper--top{clip-path:polygon(0 0,100% 0,48% 36%,0 16%);filter:drop-shadow(0 2px 2px rgba(27,20,17,.25))}.paper--left{z-index:2;clip-path:polygon(0 12%,49% 36%,13% 57%,0 49%);background-color:#978d85;filter:drop-shadow(2px 2px 2px rgba(28,21,18,.28))}.paper--bottom{z-index:2;clip-path:polygon(0 47%,14% 57%,47% 100%,0 100%);background-color:#897f77;filter:drop-shadow(2px -1px 2px rgba(25,19,16,.24))}.paper--right{z-index:3;inset:-2% -8% -2% 26%;clip-path:polygon(100% 0,100% 100%,44% 100%,0 52%,36% 19%,73% 0);background-color:#9b9189;filter:drop-shadow(-.6rem .4rem .45rem rgba(28,21,17,.35))}.seal{position:absolute;z-index:6;left:37%;top:50%;width:7rem;height:7rem;padding:0;border:0;border-radius:50%;background:transparent url("assets/wax-seal-dusty-blush.webp") center/contain no-repeat;filter:sepia(.9) saturate(.8) brightness(1.12) drop-shadow(0 .65rem .5rem rgba(42,31,25,.42));transform:translate(-50%,-50%);cursor:pointer;transition:transform .25s,opacity .35s .25s}.seal:active{transform:translate(-50%,-50%) scale(.92)}.seal:focus-visible{outline:3px solid white;outline-offset:4px}.seal span{display:block;color:#29211e;font:500 2rem "Cormorant Garamond",serif;letter-spacing:-.1em}.seal span i{font-style:normal;font-size:.85em}.seal b{position:absolute;top:calc(100% + 1rem);left:50%;transform:translateX(-50%);color:#e9e1d8;text-transform:uppercase;letter-spacing:.2em;font-size:.45rem;white-space:nowrap;text-shadow:0 1px 3px #332923}.is-open .paper--right{transform:translateX(108%)}.is-open .paper--left{transform:translateX(-108%)}.is-open .paper--top{transform:translateY(-108%)}.is-open .paper--bottom{transform:translateY(108%)}.is-open .paper--base{transform:scale(1.15);opacity:0}.is-open .seal{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.72)}.is-open .sealed-cover{opacity:0;visibility:hidden}.page-0 .first-page,.page-1 .photo-page,.page-2 .details-page{opacity:1;visibility:visible;transform:scale(1);transition:opacity .7s,transform .9s,visibility 0s}.dots{position:absolute;z-index:10;bottom:max(.8rem,env(safe-area-inset-bottom));left:50%;display:flex;gap:.45rem;transform:translateX(-50%)}.dots[hidden]{display:none}.dots button{width:.35rem;height:.35rem;padding:0;border:0;border-radius:50%;background:rgba(91,72,62,.3)}.dots button.is-current{background:#9a7335;transform:scale(1.4)}@media(min-width:600px){body{display:grid;place-items:center}.phone-experience{width:min(100%,29rem);box-shadow:0 0 4rem rgba(20,15,12,.55)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important}}
/* Reference-matched closed cover overrides */
.sealed-cover{background:#746b65}
.sealed-cover::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.16;background:url("assets/premium-antique-paper.webp") center/cover;mix-blend-mode:soft-light}
.paper{background:linear-gradient(125deg,rgba(255,255,255,.07),transparent 40%,rgba(25,19,16,.09)),#7f756e;background-image:linear-gradient(125deg,rgba(255,255,255,.07),transparent 40%,rgba(25,19,16,.09))}
.paper--base{background:#726963}
.paper--top{z-index:1;clip-path:polygon(0 0,100% 0,49% 36%,0 16%);background:linear-gradient(145deg,#776d67,#6e655f);filter:drop-shadow(0 3px 3px rgba(27,20,17,.4))}
.paper--left{z-index:2;clip-path:polygon(0 12%,49% 36%,12% 58%,0 51%);background:linear-gradient(145deg,#8e847d,#7b716b);filter:drop-shadow(3px 3px 3px rgba(28,21,18,.4))}
.paper--bottom{z-index:2;clip-path:polygon(0 49%,12% 58%,48% 100%,0 100%);background:linear-gradient(125deg,#776e68,#6f6660);filter:drop-shadow(3px -2px 3px rgba(25,19,16,.35))}
.paper--right{z-index:3;inset:-3% -7% -3% 25%;clip-path:polygon(100% 0,100% 100%,43% 100%,0 52%,35% 19%,72% 0);border-radius:0 0 0 12vw;background:linear-gradient(145deg,#968c85,#857b75 62%,#7c726c);filter:drop-shadow(-.75rem .45rem .55rem rgba(25,19,16,.55))}
.seal{left:37%;top:50%;width:8.4rem;height:8.4rem;filter:sepia(1) saturate(.95) hue-rotate(350deg) brightness(1.25) contrast(1.05) drop-shadow(0 .75rem .55rem rgba(35,25,20,.5))}
.seal span{color:#211a17;font-size:2.25rem}
.seal b{top:calc(100% + .9rem);color:#f4eee8;letter-spacing:.24em;font-size:.48rem;text-shadow:0 2px 4px #2b211c}

/* Three-dimensional envelope construction and opening sequence */
.sealed-cover{perspective:1400px;transform-style:preserve-3d;background:#6f6660;transition:visibility 0s 2.45s}
.sealed-cover::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(155deg,#817770,#6d645e 72%);box-shadow:inset 0 0 4rem rgba(28,20,16,.22)}
.paper{backface-visibility:hidden;transform-style:preserve-3d;transition:none}
.paper--base{z-index:1;inset:0;background:linear-gradient(145deg,#817770,#6e655f);box-shadow:inset 0 0 2rem rgba(25,18,14,.18)}
.paper--top{z-index:2;inset:0;clip-path:polygon(0 0,100% 0,46% 37%,0 17%);transform-origin:50% 0;background:linear-gradient(155deg,#8a8079,#746a64 70%);filter:drop-shadow(0 .25rem .18rem rgba(28,20,16,.48))}
.paper--left{z-index:3;inset:0;clip-path:polygon(0 14%,46% 37%,13% 59%,0 52%);transform-origin:0 48%;background:linear-gradient(125deg,#938982,#786e68);filter:drop-shadow(.3rem .18rem .22rem rgba(28,20,16,.5))}
.paper--bottom{z-index:4;inset:0;clip-path:polygon(0 50%,13% 59%,49% 100%,0 100%);transform-origin:30% 100%;background:linear-gradient(140deg,#817770,#6c635d);filter:drop-shadow(.25rem -.2rem .24rem rgba(28,20,16,.48))}
.paper--right{z-index:5;inset:0 -5% 0 25%;clip-path:polygon(100% 0,100% 100%,42% 100%,0 52%,35% 18%,70% 0);transform-origin:100% 50%;border-radius:0 0 0 3.5rem;background:linear-gradient(142deg,#9a9089,#847a74 63%,#786e68);filter:drop-shadow(-.8rem .3rem .55rem rgba(25,18,14,.6))}
.paper--top::after,.paper--left::after,.paper--bottom::after,.paper--right::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 32%,rgba(30,22,17,.08));opacity:.8}
.seal{z-index:8;left:37%;top:52%;width:8.8rem;height:8.8rem}
.is-open .sealed-cover{opacity:1;visibility:hidden}
.is-open .paper--base{animation:base-fade .4s ease 2s forwards}
.is-open .paper--right{animation:open-right .9s cubic-bezier(.5,.02,.15,1) .35s forwards}
.is-open .paper--left{animation:open-left .75s cubic-bezier(.55,.02,.18,1) 1.02s forwards}
.is-open .paper--bottom{animation:open-bottom .78s cubic-bezier(.5,.02,.15,1) 1.28s forwards}
.is-open .paper--top{animation:open-top .75s cubic-bezier(.5,.02,.15,1) 1.45s forwards}
.is-open .seal{animation:seal-release .72s cubic-bezier(.45,0,.6,1) forwards;pointer-events:none}
.is-open .first-page{animation:card-arrive .72s cubic-bezier(.2,.8,.2,1) 1.75s both}
@keyframes seal-release{0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}28%{transform:translate(-50%,-50%) rotate(-5deg) scale(1.08)}60%{opacity:1;transform:translate(-43%,-42%) rotate(13deg) scale(.93)}100%{opacity:0;transform:translate(-15%,65%) rotate(38deg) scale(.7)}}
@keyframes open-right{0%{transform:rotateY(0);filter:drop-shadow(-.8rem .3rem .55rem rgba(25,18,14,.6))}55%{filter:drop-shadow(-1.5rem .5rem 1rem rgba(25,18,14,.5))}100%{transform:rotateY(-108deg) translateX(12%);filter:drop-shadow(-.25rem .2rem .25rem rgba(25,18,14,.25))}}
@keyframes open-left{0%{transform:rotateY(0)}100%{transform:rotateY(104deg) translateX(-10%)}}
@keyframes open-bottom{0%{transform:rotateX(0)}100%{transform:rotateX(-105deg) translateY(8%)}}
@keyframes open-top{0%{transform:rotateX(0)}100%{transform:rotateX(105deg) translateY(-8%)}}
@keyframes base-fade{to{opacity:0;transform:scale(1.03)}}
@keyframes card-arrive{0%{opacity:0;transform:scale(.94) translateY(1rem);filter:blur(3px)}100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}

/* Higher-contrast warm mocha palette keeps every moving fold visible */
.sealed-cover{background:#554841}
.sealed-cover::before{background:linear-gradient(155deg,#6d5c53,#493d37 74%);box-shadow:inset 0 0 5rem rgba(20,13,10,.32)}
.paper--base{background:linear-gradient(145deg,#66564e,#4d413b)}
.paper--top{background:linear-gradient(155deg,#927d71,#746157 72%);filter:drop-shadow(0 .32rem .25rem rgba(22,13,10,.62))}
.paper--left{background:linear-gradient(125deg,#a28c7f,#806b61);filter:drop-shadow(.38rem .28rem .3rem rgba(22,13,10,.62))}
.paper--bottom{background:linear-gradient(140deg,#826d63,#65544c);filter:drop-shadow(.3rem -.28rem .3rem rgba(22,13,10,.58))}
.paper--right{background:linear-gradient(142deg,#b5a095,#9b8479 62%,#806c62);filter:drop-shadow(-.9rem .4rem .7rem rgba(20,12,9,.72))}
.sealed-cover::after{opacity:.1}

/* Simple envelope action: release seal, open flap, slide invitation upward */
.is-open .paper--left,.is-open .paper--bottom,.is-open .paper--top,.is-open .paper--base{animation:none;transform:none;opacity:1}
.is-open .paper--right{animation:flap-open-clean .85s cubic-bezier(.45,0,.16,1) .28s forwards}
.is-open .seal{animation:seal-lift-clean .42s cubic-bezier(.4,0,.2,1) forwards}
.is-open .sealed-cover{opacity:1;visibility:hidden;transition:visibility 0s 1.9s}
.is-open.page-0 .first-page{z-index:7;visibility:visible;animation:invitation-slide-up 1s cubic-bezier(.18,.82,.2,1) .85s both}
@keyframes seal-lift-clean{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}45%{opacity:1;transform:translate(-50%,-54%) scale(1.07)}100%{opacity:0;transform:translate(-50%,-68%) scale(.82)}}
@keyframes flap-open-clean{0%{transform:rotateY(0);filter:drop-shadow(-.9rem .4rem .7rem rgba(20,12,9,.72))}100%{transform:rotateY(-112deg);filter:drop-shadow(-.2rem .15rem .2rem rgba(20,12,9,.25))}}
@keyframes invitation-slide-up{0%{opacity:1;transform:translateY(100%) scale(.94);filter:none}55%{transform:translateY(12%) scale(.97)}100%{opacity:1;transform:translateY(0) scale(1);filter:none}}

/* Reference-video motion: sealed cover parts from the center like tall doors */
.paper--base{clip-path:polygon(0 0,72% 0,37% 52%,65% 100%,0 100%)}
.is-open .paper--base,.is-open .paper--top,.is-open .paper--left,.is-open .paper--bottom{animation:door-open-left 1.15s cubic-bezier(.72,0,.18,1) .34s forwards}
.is-open .paper--right{animation:door-open-right 1.15s cubic-bezier(.72,0,.18,1) .34s forwards}
.is-open .seal{animation:seal-open-reference .48s cubic-bezier(.4,0,.2,1) forwards}
.is-open .sealed-cover{visibility:hidden;transition:visibility 0s 1.55s}
.is-open.page-0 .first-page{z-index:2;visibility:visible;animation:content-reveal-reference 1.05s ease .62s both}
@keyframes door-open-left{0%{transform:translateX(0);filter:brightness(1)}35%{transform:translateX(-3%);filter:brightness(.93)}100%{transform:translateX(-108%);filter:brightness(.86)}}
@keyframes door-open-right{0%{transform:translateX(0);filter:drop-shadow(-.9rem .4rem .7rem rgba(20,12,9,.72))}35%{transform:translateX(3%);filter:drop-shadow(-1.2rem .35rem .8rem rgba(20,12,9,.58))}100%{transform:translateX(108%);filter:drop-shadow(-.2rem .1rem .2rem rgba(20,12,9,.2))}}
@keyframes seal-open-reference{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(1.09)}100%{opacity:0;transform:translate(-50%,-50%) scale(.78)}}
@keyframes content-reveal-reference{0%{opacity:0;transform:scale(1.12);filter:blur(5px)}45%{opacity:.45}100%{opacity:1;transform:scale(1);filter:blur(0)}}

/* Final reference-video treatment: continuous floral scene with split doors */
.first-page{background:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),url("assets/floral-arch-invitation.png") center/cover}
.first-page::before{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.2) 48%,rgba(238,226,204,.12))}
.first-page__overline{margin-top:9svh!important;color:#655a50;text-shadow:0 1px 2px white}
.first-page__youre,.first-page__invited{color:#554a42;text-shadow:0 1px 2px white,0 0 1rem rgba(255,255,255,.9)}
.first-page__script{color:#756557;text-shadow:0 1px 2px white,0 0 1rem rgba(255,255,255,.9)}
.first-page__names{color:#5c4d43;text-shadow:0 1px 3px white}
.sealed-cover{background:url("assets/floral-arch-invitation.png") center/cover;perspective:none}
.sealed-cover::before,.sealed-cover::after{display:none}
.paper--top,.paper--left,.paper--bottom{display:none}
.paper--base,.paper--right{display:block;inset:0;width:50%;height:100%;clip-path:none;border:0;border-radius:0;background-image:url("assets/floral-arch-invitation.png");background-repeat:no-repeat;background-size:200% 100%;backface-visibility:visible;filter:none}
.paper--base{left:0;right:auto;background-position:left center;box-shadow:.4rem 0 1rem rgba(46,38,30,.18)}
.paper--right{left:50%;right:auto;background-position:right center;box-shadow:-.4rem 0 1rem rgba(46,38,30,.18)}
.seal{left:50%;top:76%;width:auto;height:auto;padding:.8rem 1.3rem;border:1px solid rgba(92,73,58,.45);border-radius:999px;color:#5d4d42;background:rgba(255,251,242,.82);filter:none;box-shadow:0 .6rem 1.5rem rgba(62,48,37,.18);backdrop-filter:blur(8px)}
.seal span{color:inherit;font:500 .62rem "DM Sans",sans-serif;letter-spacing:.22em;text-transform:uppercase}
.seal span i{display:none}.seal b{position:absolute;top:calc(100% + .7rem);color:white;text-shadow:0 2px 5px rgba(44,34,26,.65);font-size:.46rem}
.is-open .paper--base{display:block;animation:video-panel-left 1.25s cubic-bezier(.76,0,.2,1) .15s forwards}
.is-open .paper--right{display:block;animation:video-panel-right 1.25s cubic-bezier(.76,0,.2,1) .15s forwards}
.is-open .seal{animation:video-enter-fade .35s ease forwards}
.is-open .sealed-cover{visibility:hidden;transition:visibility 0s 1.45s}
.is-open.page-0 .first-page{z-index:2;visibility:visible;animation:video-scene-reveal 1.35s ease .2s both}
.is-open.page-0 .first-page>*{animation:video-copy-in .9s ease 1.05s both}
@keyframes video-panel-left{0%{transform:translateX(0)}100%{transform:translateX(-102%)}}
@keyframes video-panel-right{0%{transform:translateX(0)}100%{transform:translateX(102%)}}
@keyframes video-enter-fade{to{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
@keyframes video-scene-reveal{0%{opacity:0;transform:scale(1.16);filter:blur(4px)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes video-copy-in{0%{opacity:0;transform:translateY(1rem)}100%{opacity:1;transform:translateY(0)}}

/* Responsive ribbon-and-seal entrance */
body{position:relative;background:#746d68}
.phone-experience{height:100vh;height:100svh}
.sealed-cover{perspective:1800px;overflow:hidden}
.paper--base,.paper--right{will-change:transform;box-shadow:none}
.paper--base::after,.paper--right::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);pointer-events:none}
.paper--base{transform-origin:right center}
.paper--right{transform-origin:left center}
.ribbon{position:absolute;z-index:7;left:0;right:0;top:50%;height:clamp(3.6rem,8vw,5.4rem);transform:translateY(-50%);filter:drop-shadow(0 .55rem .55rem rgba(54,38,26,.28));pointer-events:none}
.ribbon__left,.ribbon__right{position:absolute;top:0;width:50%;height:100%;overflow:hidden;background:linear-gradient(180deg,#b96575 0%,#853d50 18%,#c97888 48%,#743244 77%,#a85065 100%);will-change:transform,opacity}
.ribbon__left{left:0;transform-origin:right center}
.ribbon__right{right:0;transform-origin:left center}
.ribbon__left::after,.ribbon__right::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(92deg,rgba(255,255,255,.12) 0 1px,transparent 1px 5px),linear-gradient(90deg,rgba(62,42,24,.15),transparent 18%,rgba(255,255,255,.15) 48%,transparent 78%,rgba(62,42,24,.15));mix-blend-mode:soft-light}
.ribbon__tail{position:absolute;z-index:1;top:50%;left:50%;width:clamp(2.7rem,5vw,4.2rem);height:clamp(10rem,24vh,16rem);background:linear-gradient(90deg,#713143 0%,#b95e72 27%,#ca7b8b 52%,#873c50 100%);clip-path:polygon(4% 0,96% 0,86% 100%,52% 87%,13% 100%);filter:drop-shadow(.55rem .7rem .45rem rgba(49,27,31,.32));transform-origin:50% 0;will-change:transform,opacity}
.ribbon__tail::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(45,18,25,.22),transparent 24%,rgba(255,255,255,.2) 49%,transparent 72%,rgba(45,18,25,.2))}
.ribbon__tail--left{transform:translateX(-82%) rotate(23deg) skewY(-4deg)}
.ribbon__tail--right{transform:translateX(-18%) rotate(-23deg) skewY(4deg)}
.seal{left:50%;top:50%;width:clamp(6.8rem,15vw,9rem);height:clamp(6.8rem,15vw,9rem);padding:0;border:0;border-radius:50%;background:transparent url("assets/wax-seal-dusty-blush.webp") center/contain no-repeat;box-shadow:none;backdrop-filter:none;filter:sepia(.35) saturate(1.75) hue-rotate(350deg) brightness(.7) contrast(1.18) drop-shadow(0 .75rem .65rem rgba(48,20,26,.5));transform:translate(-50%,-50%);transition:filter .25s ease,transform .25s ease}
.seal:hover{filter:sepia(.32) saturate(1.9) hue-rotate(350deg) brightness(.75) contrast(1.2) drop-shadow(0 .9rem .75rem rgba(48,20,26,.56));transform:translate(-50%,-50%) scale(1.035)}
.seal:active{transform:translate(-50%,-50%) scale(.96)}
.seal .seal__monogram{display:block;color:#705249;font:500 clamp(.9rem,2vw,1.15rem) "Cormorant Garamond",serif;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px rgba(255,255,255,.38)}
.seal .seal__monogram i{display:inline;font:italic 1.05em "Cormorant Garamond",serif}
.seal b{top:calc(100% + 1rem);color:#fff;font-size:clamp(.48rem,.9vw,.62rem);letter-spacing:.3em;text-shadow:0 2px 7px rgba(42,31,24,.8)}
.is-open .seal{animation:seal-release-realistic .62s cubic-bezier(.35,0,.3,1) forwards}
.is-open .ribbon__left{animation:ribbon-collapse-left .82s cubic-bezier(.58,0,.25,1) .26s forwards}
.is-open .ribbon__right{animation:ribbon-collapse-right .82s cubic-bezier(.58,0,.25,1) .26s forwards}
.is-open .ribbon__tail--left{animation:ribbon-tail-left-release .78s cubic-bezier(.48,0,.3,1) .12s forwards}
.is-open .ribbon__tail--right{animation:ribbon-tail-right-release .78s cubic-bezier(.48,0,.3,1) .12s forwards}
.is-open .paper--base{animation:door-open-left-realistic 1.25s cubic-bezier(.72,0,.18,1) .72s forwards}
.is-open .paper--right{animation:door-open-right-realistic 1.25s cubic-bezier(.72,0,.18,1) .72s forwards}
.is-open .sealed-cover{visibility:hidden;transition:visibility 0s 2.05s}
.is-open.page-0 .first-page{z-index:2;visibility:visible;animation:scene-focus 1.45s cubic-bezier(.2,.75,.2,1) .72s both}
.is-open.page-0 .first-page>*{animation:video-copy-in .85s ease 1.55s both}
@keyframes seal-release-realistic{0%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}28%{transform:translate(-50%,-50%) scale(1.08) rotate(-2deg)}68%{opacity:1;transform:translate(-50%,-53%) scale(.96) rotate(4deg)}100%{opacity:0;transform:translate(-50%,-62%) scale(.78) rotate(8deg)}}
@keyframes ribbon-collapse-left{0%{opacity:1;transform:translateX(0) scaleX(1)}35%{transform:translateX(2%) scaleX(1.035)}100%{opacity:0;transform:translateX(77%) scaleX(.08)}}
@keyframes ribbon-collapse-right{0%{opacity:1;transform:translateX(0) scaleX(1)}35%{transform:translateX(-2%) scaleX(1.035)}100%{opacity:0;transform:translateX(-77%) scaleX(.08)}}
@keyframes ribbon-tail-left-release{0%{opacity:1;transform:translateX(-82%) rotate(23deg) skewY(-4deg)}42%{transform:translateX(-91%) rotate(31deg) skewY(-7deg) scaleY(.96)}100%{opacity:0;transform:translate(-34%,-20%) rotate(7deg) scale(.12,.35)}}
@keyframes ribbon-tail-right-release{0%{opacity:1;transform:translateX(-18%) rotate(-23deg) skewY(4deg)}42%{transform:translateX(-9%) rotate(-31deg) skewY(7deg) scaleY(.96)}100%{opacity:0;transform:translate(-66%,-20%) rotate(-7deg) scale(.12,.35)}}
@keyframes door-open-left-realistic{0%{transform:translateX(0) rotateY(0);filter:brightness(1)}38%{transform:translateX(-4%) rotateY(2deg);filter:brightness(.94)}100%{transform:translateX(-104%) rotateY(7deg);filter:brightness(.82)}}
@keyframes door-open-right-realistic{0%{transform:translateX(0) rotateY(0);filter:brightness(1)}38%{transform:translateX(4%) rotateY(-2deg);filter:brightness(.94)}100%{transform:translateX(104%) rotateY(-7deg);filter:brightness(.82)}}
@keyframes scene-focus{0%{opacity:.28;transform:scale(1.1);filter:blur(4px) brightness(.88)}100%{opacity:1;transform:scale(1);filter:blur(0) brightness(1)}}

@media (max-width:599px){
  body{background:#f0e7db}
  .phone-experience{width:100%;max-width:none;box-shadow:none}
  .first-page,.sealed-cover,.paper--base,.paper--right{background-position:center}
  .ribbon{height:3.8rem}
  .seal{width:7rem;height:7rem}
}

@media (min-width:900px){
  body{display:block;background:#f1e8da}
  body::before{display:none}
  .phone-experience{width:100vw;max-width:none;box-shadow:none}
  .first-page,.sealed-cover{background-position:center;background-size:cover}
  .paper--base,.paper--right{background-size:200% auto}
  .first-page__youre,.first-page__invited{font-size:clamp(3rem,6svh,5rem)}
  .first-page__script{font-size:clamp(5rem,9svh,7.5rem)}
}

@media (prefers-reduced-motion:reduce){
  .is-open .seal,.is-open .ribbon__left,.is-open .ribbon__right,.is-open .ribbon__tail,.is-open .paper--base,.is-open .paper--right,.is-open.page-0 .first-page,.is-open.page-0 .first-page>*{animation-duration:.01ms!important;animation-delay:0s!important}
  .is-open .sealed-cover{transition-delay:.02s}
}

/* Four-stage ribbon, envelope, welcome, and formal invitation flow */
.stage{position:absolute;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .65s ease,visibility 0s .65s;overflow:hidden}
[data-stage="ribbon"] .stage-ribbon,[data-stage="envelope"] .stage-envelope,[data-stage="welcome"] .stage-welcome,[data-stage="photo"] .stage-photo,[data-stage="invitation"] .stage-invitation{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .65s ease,visibility 0s}
.stage-ribbon{display:block}
.stage-envelope{z-index:4;background:linear-gradient(rgba(255,249,240,.24),rgba(255,249,240,.24)),url("assets/floral-arch-invitation.png") center/cover}
.stage-envelope::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,transparent 5%,rgba(74,56,43,.18) 100%);pointer-events:none}
.ceremony-envelope{position:relative;z-index:1;width:min(42rem,82vw);aspect-ratio:1.55;filter:drop-shadow(0 2.2rem 2rem rgba(48,34,25,.32));perspective:1200px}
.ceremony-envelope__back,.ceremony-envelope__front,.ceremony-envelope__flap{position:absolute;inset:0;border:1px solid rgba(104,76,55,.28);background:#dec2a3 url("assets/premium-antique-paper.webp") center/cover}
.ceremony-envelope__back{border-radius:.4rem;box-shadow:inset 0 0 2rem rgba(92,58,39,.1)}
.ceremony-envelope__front{z-index:3;clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%);background-color:#ecd3b7;filter:drop-shadow(0 -2px 2px rgba(78,51,35,.25))}
.ceremony-envelope__flap{z-index:4;clip-path:polygon(0 0,100% 0,50% 62%);transform-origin:50% 0;transition:transform .9s cubic-bezier(.45,0,.15,1),z-index 0s .45s;background-color:#f0d9be;filter:drop-shadow(0 .25rem .18rem rgba(76,48,34,.3))}
.ceremony-envelope__card{position:absolute;z-index:2;left:7%;right:7%;bottom:5%;height:88%;display:grid;visibility:hidden;place-items:center;align-content:center;gap:.8rem;color:#8b6530;background:#fbf3e5 url("assets/premium-paper-couple.webp") center/cover;border:1px solid rgba(130,91,48,.3);box-shadow:0 -.3rem .9rem rgba(62,39,25,.16);opacity:0;transform:translateY(28%);transition:transform 1s cubic-bezier(.18,.82,.2,1) .38s,opacity .2s .35s,visibility 0s .35s}
.ceremony-envelope__card img{width:5rem;filter:sepia(1) saturate(.7) brightness(.72);mix-blend-mode:multiply}
.ceremony-envelope__card span{font:italic 1.35rem "Cormorant Garamond",serif}
.welcome-continue,.photo-continue{position:absolute;z-index:7;bottom:max(2rem,env(safe-area-inset-bottom));padding:.85rem 1.35rem;border:1px solid rgba(82,61,47,.42);color:#5c493e;background:rgba(255,250,241,.86);box-shadow:0 .7rem 1.8rem rgba(57,42,32,.15);text-transform:uppercase;letter-spacing:.24em;font-size:.56rem;cursor:pointer;backdrop-filter:blur(8px)}
.ceremony-envelope__seal{position:absolute;z-index:8;left:50%;top:50%;width:clamp(6rem,12vw,8rem);height:clamp(6rem,12vw,8rem);padding:0;border:0;border-radius:50%;color:#512b29;background:transparent url("assets/wax-seal-dusty-blush.webp") center/contain no-repeat;filter:sepia(.35) saturate(1.75) hue-rotate(350deg) brightness(.7) contrast(1.18) drop-shadow(0 .7rem .6rem rgba(48,20,26,.48));transform:translate(-50%,-50%);cursor:pointer;transition:opacity .35s,transform .25s}
.ceremony-envelope__seal span{font:600 1.1rem "Cormorant Garamond",serif}.ceremony-envelope__seal span i{font-style:italic}.ceremony-envelope__seal b{position:absolute;top:calc(100% + .65rem);left:50%;transform:translateX(-50%);color:#fff;text-transform:uppercase;letter-spacing:.22em;font-size:.46rem;white-space:nowrap;text-shadow:0 2px 6px rgba(38,25,19,.65)}
.ceremony-envelope__seal:hover{transform:translate(-50%,-50%) scale(1.05)}
.envelope-open-control:focus-visible,.welcome-continue:focus-visible,.formal-invitation__enter:focus-visible{outline:3px solid #a97836;outline-offset:4px}
.envelope-is-open .ceremony-envelope__flap{z-index:1;transform:rotateX(178deg)}
.envelope-is-open .ceremony-envelope__seal{opacity:0;pointer-events:none;transform:translate(-50%,-58%) scale(.75)}
.envelope-is-open .ceremony-envelope__card{visibility:visible;opacity:1;animation:invitation-card-rise 1.05s cubic-bezier(.18,.82,.2,1) .42s forwards}
@keyframes invitation-card-rise{0%{transform:translateY(0)}65%{transform:translateY(-55%)}100%{transform:translateY(-42%) scale(1.025)}}

.stage-welcome{z-index:3;color:#5b5048;text-align:center;background:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.12)),url("assets/floral-arch-invitation.png") center/cover}
.stage-welcome::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.38),transparent 48%);pointer-events:none}
.welcome-copy{position:relative;z-index:1;display:grid;justify-items:center;width:min(34rem,84vw);text-shadow:0 1px 3px rgba(255,255,255,.78)}
.welcome-copy p{margin:0 0 2.4rem;text-transform:uppercase;letter-spacing:.34em;font-size:.58rem}
.welcome-copy h1{display:grid;margin:0;text-transform:uppercase;letter-spacing:.07em;font:400 clamp(3rem,7vw,5rem)/.96 "Cormorant Garamond",serif}
.welcome-copy h1 em{margin:-.08em 0 -.02em;text-transform:none;color:#77665a;font:400 clamp(4.2rem,9vw,6.6rem)/.9 "Great Vibes",cursive;letter-spacing:0}
.welcome-copy>span{width:3.8rem;height:1px;margin:2.4rem 0 1.5rem;background:#b47d2e}
.welcome-copy h2{margin:0;font:italic 1.4rem "Cormorant Garamond",serif}.welcome-copy h2 i{color:#b47d2e}

.stage-photo{z-index:3;background:#342b27}.stage-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.stage-photo__shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(43,31,27,.72))}.stage-photo__copy{position:absolute;z-index:2;bottom:clamp(6.5rem,13vh,9rem);left:50%;width:90%;transform:translateX(-50%);color:#fff;text-align:center;text-shadow:0 2px 8px rgba(35,25,20,.5)}.stage-photo__copy p{margin:0;font:400 clamp(3.5rem,8vw,6.5rem) "Great Vibes",cursive}.stage-photo__copy p i{color:#d5a75e}.stage-photo__copy span{text-transform:uppercase;letter-spacing:.28em;font-size:.58rem}.photo-continue{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(52,39,32,.48)}

.stage-invitation{z-index:2;padding:clamp(.7rem,2vw,1.4rem);background:linear-gradient(rgba(71,50,39,.2),rgba(71,50,39,.2)),url("assets/floral-arch-invitation.png") center/cover}
.formal-invitation{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(55rem,96vw);height:min(53rem,96svh);padding:clamp(1.1rem,3.4vh,2.8rem) clamp(1.2rem,4vw,3.5rem);text-align:center;color:#3e302b;background:#faf2e3 url("assets/premium-paper-couple.webp") center/cover;border:1px solid rgba(110,72,39,.56);outline:1px solid rgba(110,72,39,.3);outline-offset:-12px;box-shadow:0 2rem 5rem rgba(48,31,22,.32),inset 0 0 5rem rgba(154,111,53,.08)}
.formal-invitation__crest{display:flex;align-items:center;gap:.5rem;color:#a87a2e}.formal-invitation__crest span:last-child{transform:scaleX(-1)}
.formal-invitation__crest img{width:3.6rem;filter:sepia(1) saturate(.7) brightness(.65);mix-blend-mode:multiply}
.formal-invitation__kicker,.formal-invitation__day{margin:.45rem 0;text-transform:uppercase;letter-spacing:.28em;color:#875e27;font-size:.58rem;font-weight:600}
.formal-invitation h1{width:min(29rem,90%);height:clamp(8rem,23vh,13rem);margin:.15rem 0}.formal-invitation h1 img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px .6px rgba(78,42,5,.52))}
.formal-invitation__copy{max-width:38rem;margin:.4rem auto;font:italic 600 clamp(.88rem,1.7vw,1.18rem)/1.4 "Cormorant Garamond",serif}
.formal-invitation__rule{margin:.45rem 0;color:#a4772f}.formal-invitation__date{margin:.1rem 0;font:600 clamp(1.25rem,3vw,1.8rem) "Cormorant Garamond",serif;letter-spacing:.2em}
.formal-invitation__place{margin:.8rem 0 .25rem;font:600 clamp(1.15rem,2.4vw,1.55rem)/1.25 "Cormorant Garamond",serif}.formal-invitation__time{margin:.2rem 0 1rem;font-size:.72rem;line-height:1.5}
.formal-invitation__enter{display:inline-flex;gap:2rem;align-items:center;padding:.9rem 1.35rem;border:1px solid #865a4e;color:#734940;background:rgba(255,251,244,.62);text-decoration:none;text-transform:uppercase;letter-spacing:.18em;font-size:.56rem;font-weight:600}

@media (max-width:599px){.ceremony-envelope{width:91vw}.welcome-copy{transform:translateY(-2vh)}.formal-invitation{height:calc(100svh - 1rem);padding:1.15rem}.formal-invitation h1{height:9rem}.formal-invitation__copy{max-width:20rem}.formal-invitation__crest img{width:3rem}}
@media (min-width:900px){.ceremony-envelope{width:min(44rem,58vw)}.formal-invitation{width:min(56rem,70vw)}}
@media (prefers-reduced-motion:reduce){.stage{transition-duration:.01ms}.envelope-is-open .ceremony-envelope__flap{transition-duration:.01ms}.envelope-is-open .ceremony-envelope__card{animation-duration:.01ms!important;animation-delay:0s!important}}

/* Smoother physical envelope handoff. */
.stage{transition:opacity .9s cubic-bezier(.22,.8,.2,1),visibility 0s .9s}
[data-stage="ribbon"] .stage-ribbon,[data-stage="envelope"] .stage-envelope,[data-stage="welcome"] .stage-welcome,[data-stage="photo"] .stage-photo,[data-stage="invitation"] .stage-invitation{transition:opacity .9s cubic-bezier(.22,.8,.2,1),visibility 0s}
.ceremony-envelope__flap{transition:transform 1.2s cubic-bezier(.22,.8,.2,1),z-index 0s .6s}
.ceremony-envelope__card{transition:transform 1.3s cubic-bezier(.22,.8,.2,1) .38s,opacity .38s ease .32s,visibility 0s .32s}
.envelope-is-open .ceremony-envelope__card{animation:invitation-card-rise-smooth 1.35s cubic-bezier(.22,.8,.2,1) .38s forwards}
@keyframes invitation-card-rise-smooth{0%{transform:translateY(24%) scale(.98)}65%{transform:translateY(-48%) scale(1.012)}100%{transform:translateY(-42%) scale(1.025)}}

/* High-contrast construction details make the closed piece read as an envelope. */
.ceremony-envelope{filter:drop-shadow(0 2.2rem 2rem rgba(48,34,25,.32)) drop-shadow(0 .35rem .35rem rgba(60,35,23,.28))}
.ceremony-envelope__back{background-color:#f5dfc4}
.ceremony-envelope__front{clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);background:#d8ae83 url("assets/premium-antique-paper.webp") center/cover;box-shadow:inset 0 .2rem .6rem rgba(80,44,26,.2)}
.ceremony-envelope__front::before,.ceremony-envelope__front::after{content:"";position:absolute;top:0;width:51%;height:62%;pointer-events:none}
.ceremony-envelope__front::before{left:0;background:linear-gradient(31deg,transparent 49.35%,rgba(101,63,40,.38) 50%,rgba(255,239,217,.42) 50.8%,transparent 51.5%)}
.ceremony-envelope__front::after{right:0;background:linear-gradient(-31deg,transparent 49.35%,rgba(101,63,40,.38) 50%,rgba(255,239,217,.42) 50.8%,transparent 51.5%)}
.ceremony-envelope__flap{clip-path:polygon(0 0,100% 0,50% 64%);background:#f1d6b6 url("assets/premium-antique-paper.webp") center/cover;border-top-color:rgba(255,247,233,.8);filter:drop-shadow(0 .38rem .28rem rgba(75,43,26,.38))}
.ceremony-envelope__seal{top:54%}

@media(max-width:599px){.ceremony-envelope{width:min(92vw,36rem);filter:drop-shadow(0 1.4rem 1.1rem rgba(48,34,25,.32))}.ceremony-envelope__seal{width:6.5rem;height:6.5rem}}

/* Sunset envelope screen matched to the approved reference. */
.stage-envelope{background:linear-gradient(rgba(68,42,35,.1),rgba(68,42,35,.2)),url("assets/coron-sunset-hero.webp") center/cover no-repeat}
.stage-envelope::after{background:linear-gradient(180deg,rgba(50,30,25,.05),rgba(50,30,25,.18))}
.ceremony-envelope{width:min(50rem,76vw);aspect-ratio:1.68;filter:drop-shadow(0 1.6rem 1.15rem rgba(45,27,20,.42))}
.ceremony-envelope__back{background:#efd3b5 url("assets/premium-antique-paper.webp") center/cover;border-color:rgba(111,73,50,.22)}
.ceremony-envelope__front{clip-path:none;background:linear-gradient(160deg,rgba(255,244,228,.58),rgba(229,190,151,.32)),#efd2b2 url("assets/premium-antique-paper.webp") center/cover;border-radius:.35rem;box-shadow:inset 0 -.5rem 1rem rgba(102,62,38,.08)}
.ceremony-envelope__front::before,.ceremony-envelope__front::after{display:none}
.ceremony-envelope__flap{clip-path:polygon(0 0,100% 0,50% 55%);background:linear-gradient(155deg,rgba(255,248,236,.76),rgba(238,207,177,.42)),#f4dec5 url("assets/premium-antique-paper.webp") center/cover;filter:drop-shadow(0 .14rem .12rem rgba(91,56,39,.28))}
.ceremony-envelope__seal{top:55%;width:clamp(6.8rem,10vw,8.2rem);height:clamp(6.8rem,10vw,8.2rem);filter:sepia(.25) saturate(1.55) hue-rotate(350deg) brightness(.9) contrast(1.12) drop-shadow(0 .65rem .55rem rgba(48,20,26,.42))}
.ceremony-envelope__instruction{position:absolute;z-index:9;top:clamp(2rem,8vh,5.5rem);left:50%;margin:0;transform:translateX(-50%);color:#fff;text-transform:uppercase;letter-spacing:.34em;font-size:clamp(.52rem,.85vw,.72rem);font-weight:600;white-space:nowrap;text-shadow:0 2px 8px rgba(42,26,21,.48)}
.ceremony-envelope__seal b{display:none}
@media(max-width:599px){.ceremony-envelope{width:92vw;aspect-ratio:1.58}.ceremony-envelope__instruction{top:12vh;width:100%;padding-inline:1rem;text-align:center;white-space:normal;line-height:1.6}.ceremony-envelope__seal{width:6.6rem;height:6.6rem}}

/* Visible fold geometry for the sunset envelope. */
.ceremony-envelope__front::before,.ceremony-envelope__front::after{display:block;z-index:2;top:0;width:50.2%;height:56%;opacity:1}
.ceremony-envelope__front::before{left:0;background:linear-gradient(34deg,transparent 48.9%,rgba(112,72,47,.46) 49.55%,rgba(255,250,238,.72) 50.1%,transparent 50.8%)}
.ceremony-envelope__front::after{right:0;background:linear-gradient(-34deg,transparent 48.9%,rgba(112,72,47,.46) 49.55%,rgba(255,250,238,.72) 50.1%,transparent 50.8%)}
.ceremony-envelope__flap{filter:drop-shadow(0 .3rem .18rem rgba(91,56,39,.48));background-color:#f7dfc3}

/* Hand-tied satin bow over the original floral opening panels. */
.stage-ribbon .paper--base::before,.stage-ribbon .paper--right::before{content:"";position:absolute;inset:0;pointer-events:none;background:url("assets/premium-antique-paper.webp") center/cover;opacity:.13;mix-blend-mode:soft-light}
.ribbon{isolation:isolate;overflow:visible}
.ribbon__left,.ribbon__right{z-index:1;background:linear-gradient(180deg,#c98593 0%,#a54f63 14%,#d9909d 38%,#b45d70 61%,#873b50 84%,#bc6477 100%);box-shadow:inset 0 .18rem .2rem rgba(255,255,255,.22),inset 0 -.22rem .3rem rgba(75,24,39,.28)}
.ribbon__left::after,.ribbon__right::after,.ribbon__loop::after,.ribbon__tail::after,.ribbon__knot::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(87deg,rgba(255,255,255,.1) 0 1px,transparent 1px 3px),linear-gradient(100deg,rgba(63,24,35,.18),transparent 25%,rgba(255,255,255,.24) 49%,transparent 73%,rgba(61,22,34,.2));mix-blend-mode:soft-light;pointer-events:none}
.ribbon__loop{position:absolute;z-index:4;top:50%;left:50%;width:clamp(7.4rem,18vw,13rem);height:clamp(4.5rem,10vw,7rem);clip-path:polygon(0 50%,12% 20%,43% 3%,77% 13%,100% 50%,78% 86%,43% 97%,12% 80%);background:linear-gradient(150deg,#7e354a 0%,#be6879 24%,#db96a0 47%,#a44e63 70%,#6e2d42 100%);filter:drop-shadow(0 .65rem .42rem rgba(52,25,31,.38));transform-origin:100% 50%;will-change:transform,opacity}
.ribbon__loop--left{transform:translate(-93%,-50%) rotate(-5deg) scaleX(1.03)}
.ribbon__loop--right{transform:translate(-7%,-50%) rotate(5deg) scaleX(-1.03);transform-origin:0 50%}
.ribbon__knot{position:absolute;z-index:5;top:50%;left:50%;width:clamp(3.7rem,8vw,5.4rem);height:clamp(3.2rem,7vw,4.8rem);border-radius:44% 51% 47% 53%;background:radial-gradient(ellipse at 40% 27%,#e09aa4 0%,#bb6375 39%,#8b3b50 76%,#6f2c42 100%);box-shadow:inset .25rem .35rem .35rem rgba(255,255,255,.2),inset -.25rem -.35rem .4rem rgba(71,22,36,.28),0 .55rem .55rem rgba(58,29,35,.34);transform:translate(-50%,-50%) rotate(-3deg);will-change:transform,opacity}
.ribbon__tail{z-index:3;top:57%;width:clamp(4.4rem,8vw,6.8rem);height:clamp(10rem,26vh,17rem);clip-path:polygon(2% 0,98% 0,90% 100%,51% 86%,10% 100%);background:linear-gradient(90deg,#713143 0%,#bd6578 28%,#db929d 51%,#9d485e 78%,#6c2b40 100%)}
.ribbon__tail--left{transform:translateX(-91%) rotate(17deg) skewY(-3deg)}
.ribbon__tail--right{transform:translateX(-9%) rotate(-17deg) skewY(3deg)}

.is-open .ribbon__loop--left{animation:ribbon-loop-left-release .72s cubic-bezier(.4,0,.25,1) .12s forwards}
.is-open .ribbon__loop--right{animation:ribbon-loop-right-release .72s cubic-bezier(.4,0,.25,1) .12s forwards}
.is-open .ribbon__knot{animation:ribbon-knot-release .56s cubic-bezier(.4,0,.25,1) .06s forwards}
@keyframes ribbon-loop-left-release{0%{opacity:1;transform:translate(-93%,-50%) rotate(-5deg) scaleX(1.03)}38%{transform:translate(-101%,-49%) rotate(-11deg) scaleX(1.08)}100%{opacity:0;transform:translate(-43%,-47%) rotate(8deg) scale(.16,.72)}}
@keyframes ribbon-loop-right-release{0%{opacity:1;transform:translate(-7%,-50%) rotate(5deg) scaleX(-1.03)}38%{transform:translate(1%,-49%) rotate(11deg) scaleX(-1.08)}100%{opacity:0;transform:translate(-57%,-47%) rotate(-8deg) scale(-.16,.72)}}
@keyframes ribbon-knot-release{0%{opacity:1;transform:translate(-50%,-50%) rotate(-3deg) scale(1)}42%{transform:translate(-50%,-48%) rotate(3deg) scale(1.07,.94)}100%{opacity:0;transform:translate(-50%,-35%) rotate(9deg) scale(.55)}}

@media(max-width:599px){.ribbon__loop{width:8rem;height:4.7rem}.ribbon__tail{width:4.5rem;height:11.5rem}.ribbon__knot{width:4rem;height:3.5rem}}
@media(prefers-reduced-motion:reduce){.is-open .ribbon__loop,.is-open .ribbon__knot{animation-duration:.01ms!important;animation-delay:0s!important}}

/* Keep both gathered loops broad and visible around the seal. */
.ribbon__loop{width:clamp(8.5rem,20vw,15rem);height:clamp(4.8rem,10vw,7.4rem);clip-path:polygon(0 50%,10% 24%,38% 5%,72% 9%,100% 46%,76% 87%,39% 96%,11% 78%)}
.ribbon__loop--left{transform:translate(-96%,-50%) rotate(-4deg)}
.ribbon__loop--right{transform:translate(-4%,-50%) rotate(4deg);transform-origin:0 50%}
@keyframes ribbon-loop-left-release{0%{opacity:1;transform:translate(-96%,-50%) rotate(-4deg)}38%{transform:translate(-104%,-49%) rotate(-11deg) scaleX(1.06)}100%{opacity:0;transform:translate(-43%,-47%) rotate(8deg) scale(.16,.72)}}
@keyframes ribbon-loop-right-release{0%{opacity:1;transform:translate(-4%,-50%) rotate(4deg)}38%{transform:translate(4%,-49%) rotate(11deg) scaleX(1.06)}100%{opacity:0;transform:translate(-57%,-47%) rotate(-8deg) scale(.16,.72)}}
@media(max-width:599px){.ribbon__loop{width:8.8rem;height:4.9rem}}