.inv-overlay{z-index:60;background:radial-gradient(ellipse at 50% 40%, color-mix(in oklab, var(--ev-accent) 22%, transparent), transparent 65%), var(--ev-bg);flex-direction:column;justify-content:center;align-items:center;gap:clamp(1.25rem,4vh,2.5rem);padding:1.5rem 1rem;transition:opacity .8s,transform .8s;display:flex;position:fixed;inset:0;overflow:hidden}.inv-overlay[data-state=revealed]{opacity:0;pointer-events:none;transform:scale(1.06)}.inv-heading,.inv-hint{text-align:center;transition:opacity .4s}.inv-overlay:not([data-state=closed]) .inv-heading,.inv-overlay:not([data-state=closed]) .inv-hint{opacity:0;animation:none}.inv-hint{letter-spacing:.2em;text-transform:uppercase;align-items:center;gap:.5rem;font-size:.8rem;animation:1.6s ease-in-out infinite inv-blink;display:flex}.inv-envelope{--w:min(90vw, 440px, 62svh);--h:var(--w);--flap:52%;--body:var(--ev-primary);--body-light:color-mix(in oklab, var(--ev-primary) 82%, #fff);--body-dark:color-mix(in oklab, var(--ev-primary) 82%, #000);--paper-grain:url("data:image/svg+xml,%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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");width:var(--w);height:var(--h);perspective:1600px;filter:drop-shadow(0 30px 40px #00000038)drop-shadow(0 6px 10px #0000001f);transition:transform .8s cubic-bezier(.2,.8,.2,1);position:relative}@media (min-width:768px){.inv-envelope{--w:min(640px, 70vw, 95svh);--h:calc(var(--w) * .68);--flap:58%}}.inv-overlay[data-state=closed] .inv-envelope{animation:5s ease-in-out infinite inv-float}.inv-overlay[data-state=letter] .inv-envelope,.inv-overlay[data-state=revealed] .inv-envelope{transform:translateY(24%)}.inv-back{z-index:1;background:var(--paper-grain), linear-gradient(180deg, var(--body-dark), var(--body));border-radius:10px;position:absolute;inset:0}.inv-letter{z-index:2;background:var(--paper-grain), #fffdf9;height:90%;color:var(--ev-text);text-align:center;border-radius:6px;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:1.25rem;transition:transform 1s cubic-bezier(.2,.8,.2,1);display:flex;position:absolute;top:5%;left:5%;right:5%;box-shadow:0 4px 14px #0000001f}.inv-letter:before{content:"";border:1px solid color-mix(in oklab, var(--ev-accent) 60%, transparent);pointer-events:none;border-radius:3px;position:absolute;inset:10px}.inv-overlay[data-state=letter] .inv-letter,.inv-overlay[data-state=revealed] .inv-letter{transform:translateY(-58%)}.inv-overlay[data-state=closed] .inv-letter,.inv-overlay[data-state=seal] .inv-letter{visibility:hidden}.inv-front{z-index:3;pointer-events:none;position:absolute;inset:0}.inv-fold{position:absolute;inset:0}.inv-fold>div{border-radius:10px;position:absolute;inset:0}.inv-fold-side{filter:drop-shadow(0 0 4px #0000002e)}.inv-fold-side>.l{background:var(--paper-grain), linear-gradient(100deg, var(--body-light), var(--body));clip-path:polygon(0 0,52% 56%,0 100%)}.inv-fold-side>.r{background:var(--paper-grain), linear-gradient(260deg, var(--body-light), var(--body));clip-path:polygon(100% 0,48% 56%,100% 100%)}.inv-fold-bottom{filter:drop-shadow(0 -3px 5px #0003)}.inv-fold-bottom>div{background:var(--paper-grain), linear-gradient(0deg, var(--body), var(--body-light));clip-path:polygon(0 100%,0 96%,50% 46%,100% 96%,100% 100%)}.inv-flap{height:var(--flap);z-index:4;transform-origin:top;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.6,0,.3,1),z-index 0s linear .4s;position:absolute;top:0;left:0;right:0}.inv-flap-shadow{height:var(--flap);z-index:4;filter:drop-shadow(0 5px 6px #00000047);transition:opacity .2s;position:absolute;top:0;left:0;right:0}.inv-flap-shadow>div{background:var(--body);clip-path:polygon(0 0,100% 0,50% 100%);position:absolute;inset:0}.inv-overlay:not([data-state=closed]):not([data-state=seal]) .inv-flap-shadow{opacity:0}.inv-flap>div{backface-visibility:hidden;clip-path:polygon(0 0,100% 0,50% 100%);border-radius:10px 10px 0 0;position:absolute;inset:0}.inv-flap-outer{background:var(--paper-grain), linear-gradient(180deg, var(--body), var(--body-light))}.inv-flap-inner{background:radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--ev-accent) 70%, #fff) 1.2px, transparent 1.6px) 0 0 / 14px 14px, radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--ev-accent) 70%, #fff) 1.2px, transparent 1.6px) 7px 7px / 14px 14px, linear-gradient(180deg, color-mix(in oklab, var(--ev-accent) 35%, #fff), color-mix(in oklab, var(--ev-accent) 55%, #fff));transform:rotateY(180deg)}.inv-overlay:not([data-state=closed]):not([data-state=seal]) .inv-flap{z-index:0;transform:rotateX(180deg)}.inv-seal{--size:clamp(5.5rem, 24vw, 7.5rem);left:50%;top:var(--flap);z-index:5;width:var(--size);height:var(--size);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0;transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .45s;position:absolute;transform:translate(-50%,-50%)}.inv-seal svg{z-index:1;filter:drop-shadow(0 6px 8px #00000059);width:100%;height:100%;animation:1.6s ease-in-out infinite inv-breathe;position:relative;overflow:visible}.inv-seal:before,.inv-seal:after{content:"";border:2px solid color-mix(in oklab, var(--ev-accent) 80%, #fff);box-shadow:0 0 18px 2px color-mix(in oklab, var(--ev-accent) 60%, transparent);border-radius:9999px;animation:1.6s ease-out infinite inv-ring;position:absolute;inset:4%}.inv-seal:after{animation-delay:.8s}.inv-seal:hover svg{animation-duration:.8s}.inv-seal:focus-visible{outline:3px solid var(--ev-accent);outline-offset:6px;border-radius:9999px}.inv-shine{animation:3.2s ease-in-out infinite inv-shine}.inv-overlay[data-state=seal] .inv-seal{transform:translate(-50%,-50%)scale(1.18)}.inv-overlay:not([data-state=closed]) .inv-seal:before,.inv-overlay:not([data-state=closed]) .inv-seal:after,.inv-overlay:not([data-state=closed]) .inv-seal svg{animation:none}.inv-overlay:not([data-state=closed]):not([data-state=seal]) .inv-seal{opacity:0;pointer-events:none;transform:translate(-50%,40%)scale(.7)}@keyframes inv-float{0%,to{transform:translateY(0)rotate(-.4deg)}50%{transform:translateY(-8px)rotate(.4deg)}}@keyframes inv-breathe{0%,to{filter:drop-shadow(0 6px 8px #00000059)brightness();transform:scale(1)}50%{filter:drop-shadow(0 8px 12px #0000004d)brightness(1.18);transform:scale(1.06)}}@keyframes inv-ring{0%{opacity:.9;transform:scale(.9)}to{opacity:0;transform:scale(1.75)}}@keyframes inv-blink{0%,to{opacity:.35}50%{opacity:1}}@keyframes inv-shine{0%,60%{transform:translate(-120%)rotate(25deg)}to{transform:translate(120%)rotate(25deg)}}@media (prefers-reduced-motion:reduce){.inv-overlay,.inv-overlay *,.inv-overlay :before,.inv-overlay :after{transition-duration:1ms!important;transition-delay:0s!important;animation:none!important}.inv-overlay{transition:opacity .4s!important}}
