/* ===== Opening: olive & gold envelope (rebuilt from the reference reel) ===== */
:root{--oc-olive:#6b6546;--oc-olive-dk:#4d4932;--oc-olive-dd:#3b3826;--oc-gold:#e9a83c;--oc-gold-lt:#f6d27c;--oc-champ:#d9c8ad;--oc-light:#fff3d0}
body.locked{overflow:hidden;height:100dvh;touch-action:none}
#cover{position:fixed;inset:0;z-index:999;overflow:hidden;background:var(--oc-olive-dd);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .9s ease;contain:layout paint}
#cover.fade{opacity:0;pointer-events:none}
#cover.gone{display:none}
.oc-stage{position:absolute;top:0;bottom:0;left:50%;width:min(100vw,calc(100dvh*.62));transform:translateX(-50%);overflow:hidden;background:var(--oc-olive)}
.oc-back{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 28%,#756e4d 0%,#686245 45%,#55513a 100%)}
.oc-back::after,.oc-front::after{content:"";position:absolute;inset:0;opacity:.16;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .4 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}
.oc-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.oc-glow{position:absolute;inset:0;opacity:0;background:radial-gradient(70% 42% at 50% 56%,rgba(255,243,208,.95) 0%,rgba(246,210,124,.55) 38%,rgba(246,210,124,0) 75%);will-change:opacity,transform}
.oc-flap{position:absolute;inset:0;z-index:4;transform-origin:50% 0;transform:perspective(1000px) rotateX(0deg);will-change:transform}
.oc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.oc-front{background:radial-gradient(110% 60% at 50% 30%,#756e4d 0%,#686245 50%,#58533b 100%);clip-path:polygon(0 0,100% 0,100% var(--ys,64%),50% var(--tip,93%),0 var(--ys,64%))}
.oc-face .oc-svg{pointer-events:none}
.oc-pocket{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,#58543a 0%,#4a462f 55%,#403c29 100%)}
.oc-pocket-clip{position:absolute;inset:0;clip-path:var(--pocket-clip);background:inherit}
.oc-tap{position:absolute;left:0;right:0;top:86%;z-index:6;text-align:center;font:500 12px/1 'Jost',sans-serif;letter-spacing:.34em;text-transform:uppercase;color:var(--oc-champ);pointer-events:none;transition:opacity .4s ease}
.oc-tap i{display:block;width:34px;height:1px;margin:12px auto 0;background:linear-gradient(90deg,transparent,var(--oc-champ),transparent)}
.oc-btn{position:absolute;inset:0;z-index:7;border:0;background:transparent;cursor:pointer;opacity:0}
.oc-btn:focus-visible{outline:2px solid var(--oc-gold);outline-offset:-8px;opacity:1;background:transparent}
.oc-mono{position:absolute;left:0;right:0;top:9%;text-align:center;pointer-events:none}
.oc-mono .oc-letters{position:relative;display:inline-block;height:1em;font-family:'Bodoni Moda','Playfair Display','Didot',serif;font-weight:500;font-size:112px;line-height:1;white-space:nowrap}
.oc-mono .oc-l{background:linear-gradient(180deg,#f8d98a 0%,#eba93a 52%,#c9801f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 3px rgba(30,24,8,.45))}
.oc-mono .oc-letters{display:inline-flex;align-items:flex-end;height:auto}
.oc-mono .oc-amp{position:relative;align-self:center;margin:0 .05em .02em;font-family:'Great Vibes',cursive;font-size:.36em;color:var(--oc-gold-lt);-webkit-text-fill-color:var(--oc-gold-lt);filter:drop-shadow(0 1px 2px rgba(30,24,8,.5));line-height:1}
.oc-mono .oc-swash{position:absolute;left:-.3em;right:-.3em;top:-.1em;bottom:-.1em;width:calc(100% + .6em);height:calc(100% + .2em);overflow:visible;pointer-events:none}
.oc-names{margin-top:20px;font-family:'Great Vibes',cursive;font-size:clamp(30px,9.2vw,38px);line-height:1.15;color:var(--oc-champ);text-shadow:0 1px 6px rgba(20,16,4,.45);white-space:nowrap}
.oc-orn{display:block;margin:14px auto 0;width:84px;opacity:.9}
.oc-mono-wrap{will-change:transform,opacity}
.oc-bokeh{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.oc-bokeh i{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,244,214,.9),rgba(255,226,150,.25) 60%,rgba(255,226,150,0) 72%);opacity:0;will-change:transform,opacity}
.oc-flood{position:absolute;left:50%;top:54%;width:240%;aspect-ratio:1;z-index:8;opacity:0;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,#ffffff 0%,#fffdf3 50%,rgba(255,244,212,.9) 80%,rgba(255,244,212,0) 100%);transform:translate(-50%,-50%) scale(.05);will-change:transform,opacity}
/* intro */
.oc-mono-wrap,.oc-names,.oc-orn,.oc-tap{opacity:0}
#cover.ready .oc-mono-wrap{animation:ocIn 1.1s .15s cubic-bezier(.2,.7,.2,1) both}
#cover.ready .oc-names{animation:ocIn 1.1s .5s cubic-bezier(.2,.7,.2,1) both}
#cover.ready .oc-orn{animation:ocIn 1s .8s ease both}
#cover.ready .oc-tap{animation:ocIn 1s 1.1s ease both,ocBreath 3.4s 2.2s ease-in-out infinite}
@keyframes ocIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ocBreath{0%,100%{opacity:.95}50%{opacity:.5}}
.oc-pearl{filter:drop-shadow(0 2px 3px rgba(20,16,4,.5))}
#cover.ready .oc-pearl-glint{animation:ocGlint 3.2s 1.6s ease-in-out infinite}
@keyframes ocGlint{0%,70%,100%{opacity:0}82%{opacity:.9}}
/* opening sequence (tap) */
#cover.open .oc-tap{animation:none;opacity:0;transition:opacity .35s ease}
#cover.open .oc-orn,#cover.open .oc-names{transition:opacity .5s ease .25s}
#cover.open .oc-flap{animation:ocFlap 1.5s .25s cubic-bezier(.55,.05,.45,1) forwards;animation-fill-mode:both}
@keyframes ocFlap{0%{transform:perspective(1200px) rotateX(0deg);opacity:1}90%{opacity:1}100%{transform:perspective(1200px) rotateX(-98deg);opacity:0}}

#cover.open .oc-glow{animation:ocGlow 2.4s .9s ease-out forwards}
@keyframes ocGlow{0%{opacity:0;transform:scale(.6)}60%{opacity:1}100%{opacity:1;transform:scale(1.5)}}
#cover.open @keyframes ocLiner{to{opacity:1}}
#cover.open .oc-bokeh i{animation:ocBokeh var(--d,3s) var(--dl,1s) ease-out forwards}
@keyframes ocBokeh{0%{opacity:0;transform:translate3d(0,30px,0) scale(.5)}30%{opacity:var(--o,.7)}100%{opacity:0;transform:translate3d(var(--dx,0),-150px,0) scale(1.2)}}
#cover.open .oc-flood{animation:ocFlood 1.7s 2.0s cubic-bezier(.4,0,.2,1) forwards}
@keyframes ocFlood{0%{opacity:0;transform:translate(-50%,-50%) scale(.05)}25%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}}
#cover.open .oc-pocket{animation:ocPocketDim 1.8s .6s ease forwards}
@keyframes ocPocketDim{to{filter:brightness(1.12)}}
@media(prefers-reduced-motion:reduce){#cover,#cover *{animation:none!important;transition:none!important}.oc-mono-wrap,.oc-names,.oc-orn,.oc-tap{opacity:1}}
@media(min-width:700px){.oc-stage{box-shadow:0 0 80px rgba(0,0,0,.4)}}

@font-face{font-family:'Dancing Script';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/DancingScript-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.oc-logo{display:block;width:min(64%,262px);height:auto;margin:0 auto;filter:drop-shadow(0 4px 8px rgba(20,16,4,.35))}
.oc-names{margin-top:2px!important;font-size:clamp(28px,8.4vw,34px)!important;line-height:1.2}

.oc-liner{position:absolute;inset:0;z-index:1;clip-path:polygon(50% 5%,100% 22%,100% 100%,0 100%,0 22%);background:linear-gradient(180deg,#c99a40 0%,#e0b865 20%,#f1d58f 46%,#fbe9b8 70%,#fffaea 100%)}
.oc-glow{z-index:2}
.oc-hot{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0}
.oc-hot i{position:absolute;top:60%;width:90px;height:90px;margin-top:-45px;border-radius:50%;background:radial-gradient(circle,#fff 0%,rgba(255,250,230,.8) 30%,rgba(255,240,190,0) 70%)}
.oc-hot i:first-child{left:34%;margin-left:-35px}.oc-hot i:last-child{left:66%;margin-left:-35px}
#cover.open .oc-hot{animation:ocHot 2.2s 1.0s ease-out forwards}
@keyframes ocHot{0%{opacity:0;transform:scale(.6)}50%{opacity:1}100%{opacity:1;transform:scale(1.5)}}
#cover.open .oc-liner{animation:ocLinerLight 2.4s .6s ease-out forwards}
@keyframes ocLinerLight{from{filter:brightness(.78)}to{filter:brightness(1.12) saturate(1.1)}}

.oc-hot i{filter:blur(7px)}

/* ===== 3D luxury envelope layer ===== */
.oc-stage{background:var(--oc-olive-dd)}
.oc-tilt{position:absolute;inset:0;perspective:1250px;perspective-origin:50% 56%;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.05);transform-origin:50% 50%;will-change:transform}
.oc-tilt::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;background:radial-gradient(130% 90% at 50% 38%,rgba(0,0,0,0) 55%,rgba(10,9,3,.38) 100%)}
.oc-flap{transform:rotateX(0deg);transform-origin:50% 0}
.oc-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.oc-inner{transform:rotateX(180deg);clip-path:polygon(0 0,100% 0,100% var(--ys,64%),50% var(--tip,93%),0 var(--ys,64%));background:linear-gradient(180deg,#2c2a1b 0%,#3d3a27 22%,#58533b 62%,#7a6d44 100%)}
.oc-inner::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 38%),radial-gradient(60% 40% at 50% 70%,rgba(240,205,120,.28),rgba(240,205,120,0) 70%)}
#cover.open .oc-flap{animation:ocFlap3d 1.7s .25s cubic-bezier(.5,.02,.3,1) forwards}
@keyframes ocFlap3d{0%{transform:rotateX(0deg)}12%{transform:rotateX(-6deg)}100%{transform:rotateX(-128deg)}}
/* shadows under the envelope parts */
.oc-flapshadow{position:absolute;inset:0;z-index:3;pointer-events:none}
.oc-fs-blur{position:absolute;inset:0;filter:blur(11px);transform:translate3d(0,12px,0);opacity:.55}
.oc-fs-poly{position:absolute;inset:0;background:rgba(14,12,4,.85);clip-path:polygon(0 0,100% 0,100% var(--ys,64%),50% var(--tip,93%),0 var(--ys,64%))}
#cover.open .oc-flapshadow{animation:ocFS 1.1s .25s ease-in forwards}
@keyframes ocFS{to{opacity:0;transform:translateY(-40px)}}
/* foil sheen sweeping once, flap shade while it lifts */
.oc-sheen,.oc-shade{position:absolute;inset:0;pointer-events:none}
.oc-sheen{overflow:hidden;opacity:.0;background:linear-gradient(105deg,rgba(255,236,170,0) 38%,rgba(255,240,190,.38) 49%,rgba(255,255,255,.55) 50.5%,rgba(255,240,190,.28) 52%,rgba(255,236,170,0) 62%);background-size:260% 100%;background-position:130% 0;mix-blend-mode:soft-light}
#cover.ready .oc-sheen{animation:ocSheen 3.4s 1.4s cubic-bezier(.4,0,.2,1) 1 both}
@keyframes ocSheen{0%{opacity:1;background-position:130% 0}100%{opacity:1;background-position:-30% 0}}
.oc-shade{background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(8,6,0,.0));opacity:0}
#cover.open .oc-shade{animation:ocShade 1.7s .25s ease-in forwards}
@keyframes ocShade{from{opacity:0;background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(8,6,0,.0))}to{opacity:1;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(8,6,0,.75))}}
.oc-svg-emboss{filter:drop-shadow(0 1px 0 rgba(255,248,225,.20)) drop-shadow(0 -1px 1px rgba(10,8,0,.55))}
#oc-svg-front,#oc-svg-back{filter:drop-shadow(0 1px 0 rgba(255,248,225,.22)) drop-shadow(0 -1px 1px rgba(10,8,0,.55))}
#oc-svg-pearl{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.oc-pearl{filter:drop-shadow(0 3px 3px rgba(10,8,0,.65)) drop-shadow(0 0 5px rgba(246,210,124,.35))}
/* card peeking from the pocket + inner light shade */
.oc-peek{position:absolute;left:11%;right:11%;top:41%;bottom:0;z-index:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#fffaf0 0%,#f6ead0 70%,#e8d4a4 100%);box-shadow:0 -6px 18px rgba(255,235,170,.55),0 0 0 1px rgba(214,170,80,.55) inset;opacity:0;transform:translate3d(0,26px,0)}
.oc-peek i{position:absolute;left:7%;right:7%;top:5%;height:14%;border-top:1px solid rgba(201,154,64,.65);border-bottom:1px solid rgba(201,154,64,.35)}
#cover.open .oc-peek{animation:ocPeek 1.6s 1.15s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ocPeek{0%{opacity:0;transform:translate3d(0,40px,0)}40%{opacity:1}100%{opacity:1;transform:translate3d(0,0,0)}}
.oc-linershade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(24,18,2,.55) 0%,rgba(24,18,2,0) 32%);opacity:1}
#cover.open .oc-linershade{animation:ocLS 2s .9s ease-out forwards}
@keyframes ocLS{to{opacity:.35}}
/* logo: smaller & centred in the flap */
.oc-mono{top:15.5%}
.oc-logo{width:min(42%,172px)!important;height:auto;filter:drop-shadow(0 3px 5px rgba(20,16,4,.45))}
.oc-names{margin-top:6px!important}
.oc-orn{margin-top:12px}
.oc-tap{top:88%}
@media(prefers-reduced-motion:reduce){.oc-tilt{transform:none!important}}
.oc-mono{top:20%!important}
#cover.open .oc-flap{animation:ocFlap3d 2.1s .2s cubic-bezier(.42,.08,.55,1) forwards}
@keyframes ocFlap3d{0%{transform:rotateX(0deg)}10%{transform:rotateX(-5deg)}55%{transform:rotateX(-62deg)}80%{transform:rotateX(-92deg)}100%{transform:rotateX(-130deg)}}
#cover.open .oc-shade{animation-duration:2.1s}
#cover.open .oc-flapshadow{animation-duration:1.6s}


/* ======================================================================
   SMOOTHNESS PASS (compositor-only): every animated property below is
   transform or opacity on a promoted layer. Shadows / sheen / glow are
   static pre-rendered layers that are moved or faded; no animated
   filter, blur, box-shadow, gradient position or layout property.
   ====================================================================== */
:root{--oc-ease:cubic-bezier(.4,0,.2,1);--oc-ease-out:cubic-bezier(.2,.7,.2,1)}
html{scrollbar-gutter:stable}
/* kill animated filters */
.oc-hot i{filter:none!important}
.oc-hot i{background:radial-gradient(circle,#fff 0%,rgba(255,250,230,.8) 22%,rgba(255,240,190,.35) 48%,rgba(255,240,190,0) 70%);width:130px;height:130px;margin-top:-65px}
.oc-hot i:first-child{margin-left:-55px}.oc-hot i:last-child{margin-left:-55px}
.oc-hot{will-change:transform,opacity}
#cover.open .oc-hot{animation:ocHot 2.6s 1.0s var(--oc-ease) forwards}
@keyframes ocHot{0%{opacity:0;transform:scale(.6)}50%{opacity:1}100%{opacity:1;transform:scale(1.5)}}
/* liner: dim -> bright done with two static overlays that fade (was animated filter:brightness) */
#cover.open .oc-liner{animation:none}
.oc-liner::before,.oc-liner::after{content:"";position:absolute;inset:0;pointer-events:none;will-change:opacity}
.oc-liner::before{background:rgba(24,16,2,.24);opacity:1}
.oc-liner::after{background:rgba(255,238,176,.30);opacity:0}
#cover.open .oc-liner::before{animation:ocFadeOut 2.8s .6s var(--oc-ease) forwards}
#cover.open .oc-liner::after{animation:ocFadeIn 2.8s .6s var(--oc-ease) forwards}
@keyframes ocFadeIn{from{opacity:0}to{opacity:1}}
@keyframes ocFadeOut{from{opacity:1}to{opacity:0}}
/* pocket: brightness filter -> static overlay fade */
#cover.open .oc-pocket{animation:none}
.oc-pocket::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(255,226,150,.12);opacity:0;will-change:opacity}
#cover.open .oc-pocket::after{animation:ocFadeIn 2.4s .6s var(--oc-ease) forwards}
/* flap: ONE ease-in-out segment (the old multi-keyframe version stopped dead at every keyframe) */
.oc-flap{will-change:transform;transform:rotateX(0deg)}
#cover.open .oc-flap{animation:ocFlap3d 2.3s .1s cubic-bezier(.42,0,.2,1) forwards}
@keyframes ocFlap3d{from{transform:rotateX(0deg)}to{transform:rotateX(-130deg)}}
/* flap shadow: pre-rendered (blur stays static inside the promoted layer), only moved/faded */
.oc-flapshadow{will-change:transform,opacity}
#cover.open .oc-flapshadow{animation:ocFS 1.9s .1s var(--oc-ease) forwards}
@keyframes ocFS{from{opacity:1;transform:translate3d(0,0,0)}to{opacity:0;transform:translate3d(0,-40px,0)}}
/* shade over the lifting flap: static gradient, opacity only */
.oc-shade{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(8,6,0,.75))!important;opacity:0;will-change:opacity}
#cover.open .oc-shade{animation:ocFadeIn 2.3s .1s var(--oc-ease) forwards!important}
/* foil sheen: a static gradient strip that SLIDES (was animating background-position + soft-light blend) */
.oc-sheen{background:none!important;mix-blend-mode:normal!important;opacity:1;overflow:hidden}
.oc-sheen::before{content:"";position:absolute;top:0;bottom:0;left:0;width:70%;will-change:transform;transform:translate3d(-110%,0,0);background:linear-gradient(105deg,rgba(255,236,170,0) 0%,rgba(255,240,190,.16) 38%,rgba(255,255,255,.30) 50%,rgba(255,240,190,.14) 62%,rgba(255,236,170,0) 100%)}
#cover.ready .oc-sheen{animation:none!important}
#cover.ready .oc-sheen::before{animation:ocSheenMove 3.4s 1.4s var(--oc-ease) 1 both}
#cover.open .oc-sheen::before{animation:none;transform:translate3d(240%,0,0)}
@keyframes ocSheenMove{from{transform:translate3d(-110%,0,0)}to{transform:translate3d(240%,0,0)}}
/* glow + card rise + light: layers promoted, one easing */
.oc-glow,.oc-peek{will-change:transform,opacity}
#cover.open .oc-glow{animation:ocGlow 2.9s .8s var(--oc-ease) forwards}
@keyframes ocGlow{0%{opacity:0;transform:scale(.6)}60%{opacity:1}100%{opacity:1;transform:scale(1.5)}}
#cover.open .oc-peek{animation:ocPeek 2.1s 1.1s var(--oc-ease) forwards}
.oc-linershade{will-change:opacity}
#cover.open .oc-linershade{animation:ocLS 2.4s .8s var(--oc-ease) forwards}
#cover.open .oc-bokeh i{animation:ocBokeh var(--d,3s) var(--dl,1s) var(--oc-ease) forwards}
/* intro entrances share the one easing */
#cover.ready .oc-mono-wrap{animation:ocIn 1.1s .15s var(--oc-ease-out) both}
#cover.ready .oc-names{animation:ocIn 1.1s .5s var(--oc-ease-out) both}
#cover.ready .oc-orn{animation:ocIn 1s .8s var(--oc-ease-out) both}
#cover.ready .oc-tap{animation:ocIn 1s 1.1s var(--oc-ease-out) both,ocBreath 3.4s 2.2s ease-in-out infinite}
.oc-mono-wrap,.oc-names,.oc-orn,.oc-tap{will-change:transform,opacity}
/* the idle float is driven by Web Animations on the compositor (see opening.js); no per-frame style writes */
.oc-tilt{transform:scale(1.05)}
/* white-gold flash: opaque centre -> opaque edge so the hand-off to the hero never shows a seam */
.oc-flood{width:160%;background:radial-gradient(closest-side,#ffffff 0%,#fffdf3 45%,rgba(255,244,212,1) 78%,rgba(255,244,212,0) 100%);transform:translate3d(-50%,-50%,0) scale(.3)}
#cover.open .oc-flood{animation:ocFlood 1.8s 2.0s cubic-bezier(.45,0,.25,1) forwards}
@keyframes ocFlood{0%{opacity:0;transform:translate3d(-50%,-50%,0) scale(.3)}70%{opacity:1}100%{opacity:1;transform:translate3d(-50%,-50%,0) scale(2.25)}}
#cover{will-change:opacity;transition:opacity 1.4s var(--oc-ease)}
/* pre-warm: touch the late layers once while the intro plays so the first tap has no raster hitch */
#cover.warm .oc-glow,#cover.warm .oc-hot,#cover.warm .oc-peek,#cover.warm .oc-flood,#cover.warm .oc-flapshadow{opacity:.02}
#cover.warm .oc-bokeh i{opacity:.02}
/* hero hand-off: the page below is still until the flash is solid, then settles in */
body.locked .hero-slide{animation-play-state:paused}
.hero-inner{will-change:transform,opacity}
body.invitation-opening .hero-inner{animation:ocHeroIn 1.8s var(--oc-ease) both}
@keyframes ocHeroIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
.opening-breeze{display:block!important;visibility:hidden}
body.invitation-opening .opening-breeze{visibility:visible}
.breeze-piece{animation-play-state:paused!important;will-change:transform,opacity}
body.invitation-opening .breeze-piece{animation-play-state:running!important}
@media(prefers-reduced-motion:reduce){body.invitation-opening .hero-inner{animation:none}.oc-sheen::before{display:none}}

/* lock the scroll without changing layout (old rule also set height:100dvh, which re-laid-out the page at the hand-off) */
body.locked{height:auto!important}
/* smaller promoted layers = less compositing per frame */
.oc-linershade{bottom:auto;height:36%}
.oc-glow{top:23%;bottom:auto;height:66%;background:radial-gradient(70% 63.6% at 50% 50%,rgba(255,243,208,.95) 0%,rgba(246,210,124,.55) 38%,rgba(246,210,124,0) 75%)}
.oc-hot{top:45%;bottom:auto;height:30%}
.oc-hot i{top:50%}

/* flap shadow: blurred ONCE into a canvas at build time (see opening.js), then only moved/faded - no live blur filter */
.oc-fs-blur{filter:none!important}
.oc-fs-poly{display:none}
.oc-fs-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}