/* ============================================================
   NZT AVATAR CORE
   Cara/orbe oficial rescatado desde ChatIA
   ============================================================ */

.nzt-showcase-avatar {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nzt-avatar-hologram {
    position: relative;
    display: block;
    width: 238px;
    height: 238px;
    flex: 0 0 238px;
    animation: nztFloat 4.5s ease-in-out infinite;
    filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.34));
}

.nzt-avatar-hologram--showcase {
    width: 238px;
    height: 238px;
    flex-basis: 238px;
}

.nzt-avatar-orbit {
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 999px;
    pointer-events: none;
    transform-origin: center center;
}

.nzt-orbit-one {
    width: 210px;
    height: 210px;
    border: 1px solid rgba(34, 211, 238, 0.42);
    border-top-color: rgba(165, 243, 252, 0.98);
    border-right-color: rgba(34, 211, 238, 0.08);
    border-bottom-color: rgba(34, 211, 238, 0.22);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.18), inset 0 0 16px rgba(34, 211, 238, 0.06);
    animation: nztOrbit 7.5s linear infinite;
    z-index: 2;
}

.nzt-orbit-two {
    width: 236px;
    height: 236px;
    border: 1px solid rgba(59, 130, 246, 0.26);
    border-left-color: rgba(103, 232, 249, 0.92);
    border-bottom-color: rgba(34, 211, 238, 0.10);
    border-top-color: rgba(147, 197, 253, 0.18);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.13), inset 0 0 20px rgba(59, 130, 246, 0.06);
    animation: nztOrbitReverse 12s linear infinite;
    z-index: 2;
}

.nzt-orbit-three {
    width: 190px;
    height: 190px;
    border: 1px dashed rgba(103, 232, 249, 0.22);
    opacity: 0.86;
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.10);
    animation: nztOrbit 18s linear infinite;
    z-index: 2;
}

.nzt-avatar-image-frame {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 178px;
    height: 178px;
    border-radius: 999px;
    overflow: hidden;
    z-index: 4;
    border: 2px solid rgba(103, 232, 249, 0.82);
    background: rgba(2, 6, 23, 0.96);
    box-shadow:
        0 0 0 4px rgba(34, 211, 238, 0.08),
        0 0 28px rgba(34, 211, 238, 0.56),
        0 0 62px rgba(34, 211, 238, 0.25),
        inset 0 0 20px rgba(34, 211, 238, 0.14);
    animation: nztFramePulse 4.8s ease-in-out infinite;
}

.nzt-avatar-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.02);
    filter: none !important;
    mix-blend-mode: normal !important;
    opacity: 1 !important;
}

.nzt-avatar-base {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    margin: 0 auto;
    width: 126px;
    height: 15px;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(103, 232, 249, 0.55), rgba(34, 211, 238, 0.20) 42%, transparent 72%);
    filter: blur(7px);
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.65), 0 0 34px rgba(34, 211, 238, 0.25);
    animation: nztBasePulse 3.2s ease-in-out infinite;
    transform-origin: center center;
    z-index: 1;
}

@keyframes nztFloat {
    0%, 100% { 
        transform: translateY(0); 
    }

    50% { 
        transform: translateY(-5px); 
    }
}

@keyframes nztOrbit {
    from { 
        transform: rotate(0deg); 
    }

    to { 
        transform: rotate(360deg); 
    }
}

@keyframes nztOrbitReverse {
    from { 
        transform: rotate(360deg); 
    }

    to { 
        transform: rotate(0deg); 
    }
}

@keyframes nztBasePulse {
    0%, 100% { 
        opacity: 0.45; 
        transform: scaleX(0.92); 
    }

    50% { 
        opacity: 0.92; 
        transform: scaleX(1.08); 
    }
}

@keyframes nztFramePulse {
    0%, 100% { 
        filter: brightness(1); 
    }

    50% { 
        filter: brightness(1.08); 
    }
}

@media (min-width: 520px) {
    .nzt-avatar-hologram,
    .nzt-avatar-hologram--showcase {
        width: 260px;
        height: 260px;
        flex-basis: 260px;
    }

    .nzt-avatar-image-frame {
        width: 194px;
        height: 194px;
    }

    .nzt-orbit-one {
        width: 230px;
        height: 230px;
    }

    .nzt-orbit-two {
        width: 258px;
        height: 258px;
    }

    .nzt-orbit-three {
        width: 208px;
        height: 208px;
    }
}