.bypass-logo-stage { position: relative; display: grid; place-items: center; width: min(320px,30vw); aspect-ratio: 1; margin: auto; }
.bypass-logo-stage img { position: relative; z-index: 3; width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 0 10px rgba(30,255,190,.46)) drop-shadow(0 20px 28px rgba(0,0,0,.55)); animation: logoFloat 4.5s ease-in-out infinite; }
.logo-halo { position: absolute; z-index: 1; inset: 8%; border: 1px solid rgba(48,255,198,.32); border-radius: 50%; background: radial-gradient(circle,rgba(44,255,198,.1),transparent 63%); box-shadow: 0 0 52px rgba(34,238,187,.13),inset 0 0 48px rgba(34,238,187,.08); animation: haloPulse 2.7s ease-in-out infinite; }
.logo-halo::before,.logo-halo::after { content: ""; position: absolute; inset: -10px; border: 1px dashed rgba(137,82,255,.34); border-radius: 50%; animation: logoSpin 18s linear infinite; }
.logo-halo::after { inset: 27px; border-color: rgba(34,238,187,.28); animation-direction: reverse; animation-duration: 11s; }
.logo-grid { position: absolute; z-index: 0; inset: 17%; transform: rotate(45deg); border: 1px solid rgba(34,238,187,.15); background: repeating-linear-gradient(0deg,transparent 0,transparent 17px,rgba(34,238,187,.055) 18px),repeating-linear-gradient(90deg,transparent 0,transparent 17px,rgba(34,238,187,.055) 18px); }
.logo-brand { position: absolute; z-index: 5; right: 1%; bottom: 7%; display: grid; gap: 3px; padding: 8px 10px; border-left: 2px solid #22eebb; background: rgba(3,18,19,.8); text-align: right; }
.logo-brand strong { color: #f4fffc; font: 900 .68rem "Orbitron",sans-serif; letter-spacing: .14em; }
.logo-brand span { color: #22eebb; font-size: .43rem; font-weight: 800; letter-spacing: .1em; }
.logo-node { position: absolute; z-index: 4; width: 9px; height: 9px; transform: rotate(45deg); border: 2px solid #22eebb; background: #061719; box-shadow: 0 0 11px #22eebb; animation: nodeBlink 1.8s ease-in-out infinite; }
.node-a { top: 11%; left: 14%; }.node-b { top: 23%; right: 5%; animation-delay: -.6s; }.node-c { right: 17%; bottom: 9%; animation-delay: -1.2s; }
@keyframes logoFloat { 50% { transform: translateY(-8px); } }
@keyframes haloPulse { 50% { transform: scale(1.035); opacity: .7; } }
@keyframes logoSpin { to { transform: rotate(360deg); } }
@keyframes nodeBlink { 50% { opacity: .25; transform: rotate(45deg) scale(.7); } }
@media(max-width:800px){.bypass-logo-stage{width:min(250px,70vw);margin-top:-8px}.logo-brand{display:none}}
@media(max-width:560px){.bypass-logo-stage{width:min(210px,62vw);margin-top:-12px;margin-bottom:4px}}
@media(prefers-reduced-motion:reduce){.bypass-logo-stage img,.logo-halo,.logo-halo::before,.logo-halo::after,.logo-node{animation:none}}