/* Magic portal between the store and Gwen's workshop. See workshop-portal.js. */
html.gw-magic-portal-await{background:#05030c}
html.gw-magic-portal-await body{visibility:hidden}
.gw-magic-portal{position:fixed;inset:0;z-index:2147483000;pointer-events:auto;overflow:hidden;contain:strict}
.wp-veil{position:absolute;inset:0;background:radial-gradient(circle at var(--x) var(--y),#3a1d78 0,#140b38 28%,#07051a 62%,#030209 100%)}
.wp-ring{position:absolute;left:var(--x);top:var(--y);width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid #ffe3a1;box-shadow:0 0 18px #ffd56b,0 0 40px #b98cff,inset 0 0 18px #7fe9ff;opacity:0}
.wp-sparks{position:absolute;left:var(--x);top:var(--y)}
.wp-sparks i{position:absolute;left:-.5em;top:-.6em;font-style:normal;font-size:18px;color:#ffe9b0;text-shadow:0 0 10px #ffd56b,0 0 22px #b98cff;opacity:0;transform:rotate(var(--a)) translateY(0) scale(.4)}
.wp-sparks i:nth-child(3n){color:#9ff0ff;text-shadow:0 0 10px #5ddcff}
.wp-sparks i:nth-child(3n+1){color:#d9c2ff;text-shadow:0 0 10px #b98cff}
.wp-core{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:18px;transform:translate(-50%,-50%);opacity:0;width:min(92vw,640px);text-align:center}
.wp-scissors{width:64px;height:88px;filter:drop-shadow(0 0 14px #b98cff) drop-shadow(0 0 6px #7fe9ff)}
.wp-blade{transform-origin:50px 85px}
.wp-title{font:600 clamp(20px,4.6vw,34px)/1.25 Cinzel,Changa,'Segoe UI',serif;letter-spacing:.06em;background:linear-gradient(100deg,#7fe9ff 0%,#c49bff 30%,#ffe3a1 50%,#c49bff 70%,#7fe9ff 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 14px rgba(185,140,255,.6));animation:wpShimmer 2.6s linear infinite}
html[lang="ar"] .wp-title{letter-spacing:0}

/* Leaving the store: the portal opens from the click point and fills the screen. */
.is-departing .wp-veil{clip-path:circle(0 at var(--x) var(--y));animation:wpOpen .95s cubic-bezier(.55,0,.25,1) forwards}
.is-departing .wp-ring{animation:wpRing .95s cubic-bezier(.3,0,.2,1) forwards}
.is-departing .wp-sparks i{animation:wpSpark .9s cubic-bezier(.2,.6,.3,1) var(--d) forwards}
.is-departing .wp-core{animation:wpCoreIn .5s cubic-bezier(.2,.8,.3,1) .4s forwards}
.is-departing .wp-a{animation:wpSnipA .16s ease-in-out .45s 4 alternate}
.is-departing .wp-b{animation:wpSnipB .16s ease-in-out .45s 4 alternate}

/* Arriving in the workshop: we fly through the portal and it fades open. */
.gw-magic-portal.is-arriving{animation:wpDone 1.1s linear forwards}
.is-arriving .wp-veil{animation:wpFade .75s ease-in .3s forwards}
.is-arriving .wp-core{opacity:1;animation:wpCoreOut .7s cubic-bezier(.5,0,.75,0) .15s forwards}
.is-arriving .wp-ring{animation:wpRing 1s cubic-bezier(.3,0,.2,1) .1s forwards}
.is-arriving .wp-sparks i{animation:wpSpark .9s cubic-bezier(.2,.6,.3,1) calc(var(--d) + .12s) forwards}

@keyframes wpOpen{to{clip-path:circle(150vmax at var(--x) var(--y))}}
@keyframes wpRing{0%{opacity:0;transform:scale(.2)}15%{opacity:1}100%{opacity:0;transform:scale(28)}}
@keyframes wpSpark{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-38vmin) scale(1.1)}}
@keyframes wpCoreIn{from{opacity:0;transform:translate(-50%,-50%) scale(.82)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes wpCoreOut{to{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}
@keyframes wpSnipA{to{transform:rotate(-13deg)}}
@keyframes wpSnipB{to{transform:rotate(13deg)}}
@keyframes wpShimmer{to{background-position:-250% 0}}
@keyframes wpFade{to{opacity:0}}
@keyframes wpDone{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.gw-magic-portal{display:none}}