.motion-stage{position:relative;isolation:isolate;background:radial-gradient(ellipse at 45% 30%,#fff 0%,#eaf1ff 60%,#dce8ff 100%);min-height:510px;padding-top:58px}
.motion-stage .stage-label{position:relative;z-index:2;font-size:10px}
.motion-toggle{position:absolute;top:16px;inset-inline-end:18px;border:1px solid #cad8f4;background:#ffffffc9;color:#425b85;border-radius:20px;padding:7px 12px;font-size:11px;z-index:3}
.logo-scene{position:relative;width:min(80%,310px);aspect-ratio:1;margin:40px 0 46px;perspective:1000px}
.logo-tilt{height:100%;transform-style:preserve-3d;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .3s ease-out}
.logo-float{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:brand-float 7s ease-in-out infinite}
.motion-stage .hero-logo{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;border-radius:24%;transform:translateZ(18px);box-shadow:inset 0 0 0 1px #ffffff70;backface-visibility:hidden}
.logo-depth{position:absolute;inset:0;border-radius:24%;background:linear-gradient(145deg,#4f9bff,#0042c6 60%,#002779);transform:translateZ(-2px);box-shadow:1px 1px #0756db,2px 2px #0753d5,3px 3px #0650d0,4px 4px #054ccc,5px 5px #0549c5,6px 6px #0445bc,7px 7px #0341b5,8px 8px #033cac,9px 9px #0238a5,10px 10px #02349e,11px 11px #013096,12px 12px #012c90,18px 26px 32px #00358a30}
.logo-shine{position:absolute;inset:0;border-radius:24%;transform:translateZ(19px);background:linear-gradient(125deg,#ffffff45,transparent 40%,transparent 65%,#ffffff16);pointer-events:none}
.logo-shadow{position:absolute;bottom:-26px;left:12%;width:76%;height:24px;border-radius:50%;background:#144ba83b;filter:blur(13px);z-index:-1;animation:brand-shadow 7s ease-in-out infinite}
@keyframes brand-float{0%,100%{transform:translateY(0) rotateX(9deg) rotateY(-15deg) rotateZ(-5deg)}50%{transform:translateY(-16px) rotateX(-6deg) rotateY(14deg) rotateZ(4deg)}}
@keyframes brand-shadow{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(.82);opacity:.4}}
.motion-paused .logo-float,.motion-paused .logo-shadow{animation-play-state:paused}
.motion-paused .logo-tilt{transform:none}
@media(max-width:800px){.motion-stage{min-height:400px}.logo-scene{width:min(70%,240px);margin:30px 0 40px}}
@media(prefers-reduced-motion:reduce){.logo-float,.logo-shadow{animation:none}.logo-float{transform:rotateX(6deg) rotateY(-10deg)}.logo-tilt{transition:none;transform:none}.motion-toggle{display:none}}
.wordmark-stage{background:transparent;border:0;border-radius:0;overflow:visible;min-height:460px;padding:45px 12px 25px}
.wordmark-stage .logo-scene{width:100%;max-width:400px;aspect-ratio:1.3;margin:20px 0 35px}
.wordmark-stage .logo-float{display:grid;place-items:center}
.nazzil-wordmark{display:block;white-space:nowrap;font-family:Tahoma,Arial,sans-serif;font-size:clamp(110px,13vw,185px);font-weight:700;line-height:1.7;color:#0862ff;transform:translateZ(24px);text-shadow:1px 1px #0654db,2px 2px #0650d2,3px 3px #054cc9,4px 4px #0548c0,5px 5px #0444b7,6px 6px #0440ae,7px 7px #033ca5,8px 8px #03389c,9px 9px #023493,12px 20px 26px #0752c026}
.wordmark-stage .logo-shadow{bottom:0;left:20%;width:60%;height:17px;background:#2465ca25}
.wordmark-stage .motion-toggle{top:auto;bottom:0;inset-inline-end:50%;transform:translateX(50%);font-size:11px;background:transparent}
html[dir=ltr] .wordmark-stage .motion-toggle{transform:translateX(-50%)}
@media(max-width:800px){.wordmark-stage{min-height:320px;overflow:hidden}.wordmark-stage .logo-scene{max-width:320px;margin:0 0 30px}.nazzil-wordmark{font-size:145px}}
@media(max-width:390px){.nazzil-wordmark{font-size:125px}}
.wordmark-stage .logo-float{animation:wordmark-dance 5.8s cubic-bezier(.45,0,.25,1) infinite;will-change:transform}
.wordmark-stage .logo-shadow{animation:wordmark-ground 5.8s ease-in-out infinite}
@keyframes wordmark-dance{
 0%,100%{transform:translate3d(0,0,0) rotateX(8deg) rotateY(-18deg) rotateZ(-6deg) scale(1)}
 20%{transform:translate3d(12px,-27px,24px) rotateX(-12deg) rotateY(24deg) rotateZ(7deg) scale(1.035)}
 42%{transform:translate3d(-9px,-9px,10px) rotateX(12deg) rotateY(-12deg) rotateZ(-4deg) scale(.985)}
 60%{transform:translate3d(-13px,-33px,30px) rotateX(-8deg) rotateY(-27deg) rotateZ(-9deg) scale(1.045)}
 78%{transform:translate3d(8px,7px,0) rotateX(15deg) rotateY(19deg) rotateZ(5deg) scale(.97)}
 89%{transform:translate3d(3px,-8px,12px) rotateX(3deg) rotateY(3deg) rotateZ(0) scale(1.015)}
}
@keyframes wordmark-ground{0%,100%{transform:scale(1);opacity:.65}20%,60%{transform:translateX(8px) scale(.7);opacity:.3}42%{transform:scale(.9);opacity:.5}78%{transform:scale(1.08);opacity:.75}}
@media(prefers-reduced-motion:reduce){.wordmark-stage .logo-float,.wordmark-stage .logo-shadow{animation:none;will-change:auto}}