:root{--hud-size-loading:120px;--hud-size-active:min(528px,58vh,58vw);--hud-primary:#5fead5;--hud-secondary:#0d9488;--hud-glow:rgba(95,234,213,.35);--hud-activation:#38bdf8;--hud-spark:#e0f2fe;--hud-glow-active:rgba(56,189,248,.6)}.hud-system{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;transition:width 1.8s cubic-bezier(.22,1,.36,1),height 1.8s cubic-bezier(.22,1,.36,1),transform 1.8s cubic-bezier(.22,1,.36,1);margin:0 auto;z-index:10;max-height:58vh;contain:layout}.hud-system.state-loading{width:var(--hud-size-loading);height:var(--hud-size-loading);--hud-size:var(--hud-size-loading)}.hud-system.state-active{width:var(--hud-size-active);max-width:100%;height:var(--hud-size-active);max-height:100%;--hud-size:var(--hud-size-active)}.hud-system.state-active:before{background:radial-gradient(circle,var(--hud-spark) 0,var(--hud-glow-active) 35%,rgba(56,189,248,0) 70%);filter:blur(18px);transform:scale(.6);animation:plasma-flash 1.25s cubic-bezier(.22,1,.36,1) forwards}.hud-system.state-active:after,.hud-system.state-active:before{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;pointer-events:none;will-change:transform,opacity}.hud-system.state-active:after{border:calc(var(--hud-size-active) * .007) solid var(--hud-activation);box-shadow:0 0 32px var(--hud-activation),inset 0 0 18px var(--hud-activation);transform:scale(.7);animation:plasma-shockwave 1.15s cubic-bezier(.22,1,.36,1) forwards}.avatar-box{width:58%;height:58%;border-radius:50%;overflow:hidden;border:calc(var(--hud-size-active) * .01) solid var(--hud-activation);opacity:0;pointer-events:none;z-index:2;transition:border-width 1.8s cubic-bezier(.22,1,.36,1);transform-origin:center}.avatar-box img{width:100%;height:100%;object-fit:cover;transform-origin:center}.hud-system.state-loading .avatar-box{animation:frame-appear 2s cubic-bezier(.4,0,1,1) forwards}.hud-system.state-loading .avatar-box img{opacity:0}.hud-system.state-active .avatar-box{pointer-events:auto;animation:frame-activate 1.6s cubic-bezier(.22,1,.36,1) forwards}.hud-system.state-active .avatar-box img{animation:image-reveal 1.2s cubic-bezier(.22,1,.36,1) forwards}.hud-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;filter:drop-shadow(0 0 6px var(--hud-glow));transition:filter 1.6s ease}.hud-system.state-active .hud-svg{filter:drop-shadow(0 0 12px var(--hud-primary))}.ring-outer{fill:none;stroke:var(--hud-primary);stroke-linecap:round;r:180;stroke-width:20;stroke-dasharray:186 191;transform-origin:200px 200px;transition:stroke-width 1.6s cubic-bezier(.16,1,.3,1)}.hud-system.state-active .ring-outer{stroke-width:14}.ring-inner{fill:none;stroke:var(--hud-secondary);stroke-linecap:round;opacity:.85;r:140;stroke-width:14;stroke-dasharray:130 163.2;transform-origin:200px 200px;transition:stroke-width 1.6s cubic-bezier(.16,1,.3,1)}.hud-system.state-active .ring-inner{stroke-width:8}.spin-clockwise{animation:spin 2.4s linear infinite}.spin-clockwise,.spin-counter{transform-origin:200px 200px;transform-box:view-box;will-change:transform}.spin-counter{animation:spin-rev 1.68s linear infinite}@keyframes plasma-flash{0%{opacity:0;transform:scale(.6)}35%{opacity:.9;transform:scale(1.54)}to{opacity:0;transform:scale(2.42)}}@keyframes plasma-shockwave{0%{opacity:0;transform:scale(.7)}25%{opacity:.8}to{opacity:0;transform:scale(1.87)}}@keyframes frame-appear{0%{opacity:0;transform:scale(1.3);border-color:var(--hud-activation)}33.33%{opacity:0;transform:scale(1.3);border-color:var(--hud-activation)}to{opacity:.85;transform:scale(1);border-color:var(--hud-primary)}}@keyframes frame-activate{0%{opacity:.8;border-color:var(--hud-primary);box-shadow:0 0 15px var(--hud-glow)}to{opacity:1;border-color:var(--hud-secondary);box-shadow:0 0 20px var(--hud-glow)}}@keyframes image-reveal{0%{opacity:0;transform:scale(.92);filter:brightness(1.3) contrast(1.08)}60%{opacity:1;filter:brightness(1.06) contrast(1.03)}to{opacity:1;transform:scale(1);filter:brightness(1) contrast(1)}}@keyframes spin-accelerate-clockwise{0%{transform:rotate(0deg)}33.33%{transform:rotate(150deg)}to{transform:rotate(900deg)}}@keyframes spin-accelerate-counter{0%{transform:rotate(0deg)}33.33%{transform:rotate(-180deg)}to{transform:rotate(-3turn)}}@keyframes loading-glow-buildup{0%{filter:drop-shadow(0 0 4px var(--hud-glow))}33.33%{filter:drop-shadow(0 0 4px var(--hud-glow))}85%{filter:drop-shadow(0 0 15px var(--hud-primary)) brightness(1.2)}to{filter:drop-shadow(0 0 25px var(--hud-primary)) brightness(1.35)}}@keyframes trace-primary{0%{stroke:var(--hud-activation);stroke-dashoffset:320}60%{stroke:var(--hud-activation);stroke-dashoffset:0}to{stroke:var(--hud-primary);stroke-dashoffset:0}}@keyframes trace-secondary{0%{stroke:var(--hud-activation);stroke-dashoffset:320}60%{stroke:var(--hud-activation);stroke-dashoffset:0}to{stroke:var(--hud-secondary);stroke-dashoffset:0}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes spin-rev{to{transform:rotate(-1turn)}}@media (max-width:1024px){.hud-system{width:420px;height:420px;--hud-size-active:420px}.avatar-box{border:calc(420px * .012) solid var(--hud-activation)}}@media (max-width:576px){.hud-system{width:320px;height:320px;--hud-size-active:320px}.avatar-box{border:calc(320px * .012) solid var(--hud-activation)}}@media (prefers-reduced-motion:reduce){.avatar-box,.hud-system circle,.hud-system:after,.hud-system:before,.spin-clockwise,.spin-counter{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}}