.portal-overlay{position:fixed;inset:0;z-index:999;pointer-events:none;overflow:hidden}.portal-overlay.done{display:none}.portal-shade{position:absolute;inset:0;background:var(--ink);opacity:0}.portal-fox-swirl{position:absolute;inset:0;background:radial-gradient(circle at center,var(--sun) 0%,var(--berry) 40%,var(--ink) 100%);clip-path:circle(0% at 50% 50%);animation:fox-swirl .7s var(--ease-out-soft) forwards}@keyframes fox-swirl{0%{clip-path:circle(150% at 50% 50%);transform:rotate(0)}60%{clip-path:circle(60% at 50% 50%);transform:rotate(90deg)}to{clip-path:circle(0% at 50% 50%);transform:rotate(180deg)}}.portal-frost{position:absolute;inset:0;background:radial-gradient(circle at 10% 10%,rgb(232 244 255 / .9),transparent 30%),radial-gradient(circle at 90% 20%,rgb(232 244 255 / .9),transparent 30%),radial-gradient(circle at 20% 90%,rgb(232 244 255 / .9),transparent 30%),radial-gradient(circle at 85% 85%,rgb(232 244 255 / .9),transparent 30%),linear-gradient(180deg,#c8e7ff99,#fff4e066);animation:frost-melt .7s var(--ease-out-soft) forwards}@keyframes frost-melt{0%{opacity:0;transform:scale(1.05)}30%{opacity:1}to{opacity:0;transform:scale(.9)}}.portal-sparkles{position:absolute;inset:0}.portal-sparkles i{position:absolute;width:8px;height:8px;background:#fff;border-radius:50%;box-shadow:0 0 12px #fff,0 0 24px var(--sun-glow);animation:sparkle .7s ease-out forwards}@keyframes sparkle{0%{transform:scale(0) rotate(0);opacity:0}40%{transform:scale(1.4) rotate(180deg);opacity:1}to{transform:scale(.4) rotate(360deg);opacity:0}}.portal-bubble-grow{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgb(255 255 255 / .9),rgb(199 236 247 / .6) 45%,rgb(127 216 232 / .5) 70%,transparent 100%);border:3px solid rgb(255 255 255 / .4);transform:translate(-50%,-50%);animation:bubble-inflate .5s var(--ease-out-soft) forwards}@keyframes bubble-inflate{0%{width:40px;height:40px;opacity:.4}60%{width:250vmax;height:250vmax;opacity:1}85%{width:260vmax;height:260vmax;opacity:1}to{width:280vmax;height:280vmax;opacity:0}}.portal-rising-bubbles{position:absolute;inset:0}.portal-rising-bubbles i{position:absolute;bottom:-50px;width:var(--s, 24px);height:var(--s, 24px);background:radial-gradient(circle at 30% 30%,rgb(255 255 255 / .8),rgb(199 236 247 / .5) 50%,transparent 75%);border:1.5px solid rgb(255 255 255 / .4);border-radius:50%;animation:rise 1.5s ease-out forwards}@keyframes rise{0%{transform:translateY(0) translate(0);opacity:0}20%{opacity:1}to{transform:translateY(-120vh) translate(var(--x, 30px));opacity:0}}.portal-rocket{position:absolute;inset:0;background:radial-gradient(circle at center,var(--paper) 0%,var(--sun-glow) 20%,var(--berry) 50%,var(--ink) 100%);animation:rocket-punch .6s var(--spring-punchy) forwards;transform-origin:center}@keyframes rocket-punch{0%{transform:scale(.02);opacity:0}20%{transform:scale(.4);opacity:1}60%{transform:scale(2.5);opacity:1}to{transform:scale(4);opacity:0}}.portal-stars{position:absolute;inset:0}.portal-stars i{position:absolute;width:12px;height:12px;background:var(--sun);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:star-fly .6s ease-out forwards}@keyframes star-fly{0%{transform:scale(0) rotate(0);opacity:0}50%{transform:scale(1.2) rotate(180deg);opacity:1}to{transform:scale(.2) rotate(360deg) translate(var(--tx, 200px),var(--ty, -200px));opacity:0}}.portal-sunrise{position:absolute;inset:0;background:linear-gradient(105deg,transparent 0%,rgb(255 201 107 / .9) 40%,rgb(255 244 224 / .95) 50%,rgb(245 139 168 / .7) 60%,transparent 100%);transform:translate(-100%);animation:sunrise-sweep .7s var(--ease-out-soft) forwards}@keyframes sunrise-sweep{0%{transform:translate(-100%)}to{transform:translate(100%)}}.portal-motes{position:absolute;inset:0}.portal-motes i{position:absolute;width:4px;height:4px;background:#ffde9ee6;border-radius:50%;box-shadow:0 0 8px var(--sun-glow);animation:mote-float .7s ease-out forwards}@keyframes mote-float{0%{transform:translateY(30px);opacity:0}40%{opacity:1}to{transform:translateY(-40px);opacity:0}}.portal-envelope{position:absolute;left:-80px;top:50%;width:100px;height:66px;transform:translateY(-50%);animation:envelope-fly .7s var(--ease-out-soft) forwards}.portal-envelope svg{width:100%;height:100%;filter:drop-shadow(0 8px 20px rgb(42 63 122 / .3))}@keyframes envelope-fly{0%{left:-100px;transform:translateY(-50%) rotate(-6deg)}50%{left:50%;transform:translate(-50%,-50%) rotate(4deg) scale(1.4)}to{left:calc(100% + 100px);transform:translateY(-50%) rotate(-4deg)}}.portal-envelope-trail{position:absolute;left:0;top:50%;height:3px;width:100%;background:repeating-linear-gradient(90deg,var(--ink) 0px,var(--ink) 8px,transparent 8px,transparent 16px);transform:translateY(-50%) scaleX(0);transform-origin:left;animation:trail-draw .7s var(--ease-out-soft) forwards;opacity:.3}@keyframes trail-draw{0%{transform:translateY(-50%) scaleX(0)}50%{transform:translateY(-50%) scaleX(.5)}to{transform:translateY(-50%) scaleX(1);opacity:0}}@media(prefers-reduced-motion:reduce){.portal-overlay>*{animation:crossfade .22s ease forwards!important;background:#fffbf299!important;clip-path:none!important}@keyframes crossfade{0%{opacity:1}to{opacity:0}}}
