.mc{position:fixed;inset:0;z-index:9999;overflow:hidden;background:radial-gradient(120% 80% at 50% 40%,#2a1650 0%,#0d0818 55%,#05030a 100%);transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1),filter .4s cubic-bezier(.4,0,.2,1)}
.mc.lt{background:radial-gradient(120% 80% at 50% 40%,#3b1f72 0%,#1a0f30 60%,#0d0818 100%)}
.mc-out{opacity:0;transform:scale(1.06);filter:blur(6px);pointer-events:none}
.mc-out .mc-c,.mc-out .mc-t{transition:transform .4s cubic-bezier(.4,0,.2,1);transform:translate(-50%,-50%) scale(1.08)}.mc-out .mc-t{transform:translateY(6px)}
.mc canvas{position:absolute;inset:0;width:100%;height:100%}
.mc-beam{position:absolute;top:-30%;width:42%;height:160%;background:linear-gradient(90deg,transparent,rgba(214,190,255,.20) 45%,rgba(255,240,225,.32) 50%,rgba(214,190,255,.20) 55%,transparent);filter:blur(10px);mix-blend-mode:screen;opacity:0}
.mc-b1{left:-50%;transform:rotate(18deg);animation:mcBeam 1.1s .05s ease-in-out both}
.mc-b2{left:-60%;transform:rotate(-14deg);animation:mcBeam 1.2s .35s ease-in-out both}
.mc-c{position:absolute;left:50%;top:42%;width:150px;transform:translate(-50%,-50%)}
.mc-c:before{content:"";position:absolute;left:50%;top:50%;width:340px;height:340px;margin:-170px;border-radius:50%;background:radial-gradient(circle,rgba(170,120,255,.42) 0,rgba(140,90,240,.16) 35%,transparent 68%);opacity:0;animation:mcGlow 1s .45s ease-in-out both}
.mc-c img{position:relative;width:100%;display:block;animation:mcCrest .9s .25s cubic-bezier(.65,0,.35,1) both}
.mc-f{position:absolute;left:50%;top:42%;width:260px;height:260px;margin:-130px;border-radius:50%;background:radial-gradient(circle,rgba(255,246,235,.95) 0,rgba(220,195,255,.45) 12%,transparent 45%);mix-blend-mode:screen;opacity:0;animation:mcFlare .7s .8s ease-in-out both}
.mc-f:after{content:"";position:absolute;left:-60%;right:-60%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,240,230,.9),transparent)}
.mc-t{position:absolute;left:0;right:0;top:calc(42% + 112px);text-align:center;color:#efe7ff;font:600 12px Inter,sans-serif;text-transform:uppercase;white-space:nowrap;animation:mcTrack 1.1s .85s cubic-bezier(.2,.7,.2,1) both}
.mc-t small{display:block;margin-top:10px;font:500 14px 'IBM Plex Sans Arabic',sans-serif;letter-spacing:0;text-transform:none;opacity:.8}
.mc-g{position:absolute;inset:0;opacity:.09;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes mcBeam{0%{opacity:0;margin-left:0}30%{opacity:1}100%{opacity:0;margin-left:190%}}
@keyframes mcCrest{0%{clip-path:inset(100% -20% -20% -20%);opacity:0;transform:scale(.94)}60%{opacity:1}100%{clip-path:inset(-20%);transform:none}}
@keyframes mcGlow{0%{opacity:0;transform:scale(.7)}100%{opacity:1;transform:none}}
@keyframes mcFlare{0%{opacity:0;transform:scale(.4)}45%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes mcTrack{0%{opacity:0;letter-spacing:.05em;filter:blur(3px)}100%{opacity:1;letter-spacing:.42em;filter:none}}
@media (prefers-reduced-motion:reduce){.mc{display:none}}