/* 3D Rotating Gradient Ring (Torus) Loader */
.win7-ring-loader {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    animation: loaderFadeIn 0.6s ease-out;
}

/* Main torus ring */
.ring-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotate3D 2.5s linear infinite;
}

@keyframes rotate3D {
    0% {
        transform: rotateX(70deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(70deg) rotateY(360deg) rotateZ(0deg);
    }
}

/* Torus segments with gradient */
.ring-segment {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(0, 174, 239, 0.9) 0deg,
        rgba(76, 194, 255, 1) 45deg,
        rgba(0, 206, 209, 0.95) 90deg,
        rgba(64, 224, 208, 0.9) 135deg,
        rgba(0, 174, 239, 0.9) 180deg,
        rgba(76, 194, 255, 1) 225deg,
        rgba(0, 206, 209, 0.95) 270deg,
        rgba(64, 224, 208, 0.9) 315deg,
        rgba(0, 174, 239, 0.9) 360deg
    );
    mask-image: radial-gradient(
        circle at center,
        transparent 0%,
        transparent 62%,
        black 62%,
        black 85%,
        transparent 85%,
        transparent 100%
    );
    -webkit-mask-image: radial-gradient(
        circle at center,
        transparent 0%,
        transparent 62%,
        black 62%,
        black 85%,
        transparent 85%,
        transparent 100%
    );
}

/* 3D lighting effect - top highlight */
.ring-segment::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        ellipse 40% 30% at 50% 25%,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.4) 30%,
        transparent 60%
    );
    mask-image: radial-gradient(
        circle at center,
        transparent 0%,
        transparent 62%,
        black 62%,
        black 85%,
        transparent 85%,
        transparent 100%
    );
    -webkit-mask-image: radial-gradient(
        circle at center,
        transparent 0%,
        transparent 62%,
        black 62%,
        black 85%,
        transparent 85%,
        transparent 100%
    );
}

/* 3D lighting effect - bottom shadow */
.ring-segment::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        ellipse 40% 30% at 50% 75%,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.3) 30%,
        transparent 60%
    );
    mask-image: radial-gradient(
        circle at center,
        transparent 0%,
        transparent 62%,
        black 62%,
        black 85%,
        transparent 85%,
        transparent 100%
    );
    -webkit-mask-image: radial-gradient(
        circle at center,
        transparent 0%,
        transparent 62%,
        black 62%,
        black 85%,
        transparent 85%,
        transparent 100%
    );
}

/* Inner glow */
.ring-inner-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at center,
        rgba(0, 174, 239, 0.3) 0%,
        rgba(76, 194, 255, 0.2) 30%,
        rgba(0, 206, 209, 0.1) 50%,
        transparent 65%
    );
    border-radius: 50%;
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(0.95);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* Ambient glow layer */
.win7-ring-loader::before {
    content: '';
    position: absolute;
    width: 140%;
    height: 140%;
    background: radial-gradient(
        circle at center,
        rgba(0, 174, 239, 0.4) 0%,
        rgba(76, 194, 255, 0.2) 25%,
        transparent 60%
    );
    border-radius: 50%;
    animation: ambientGlow 3s ease-in-out infinite;
    z-index: -1;
}

@keyframes ambientGlow {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

/* Glossy reflection */
.win7-ring-loader::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    top: 15%;
    left: 25%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.2) 40%,
        transparent 70%
    );
    border-radius: 50%;
    animation: shimmer 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

/* Enhanced drop shadow for 3D effect */
.win7-ring-loader {
    filter: drop-shadow(0 4px 12px rgba(0, 174, 239, 0.6))
            drop-shadow(0 8px 24px rgba(76, 194, 255, 0.4))
            drop-shadow(0 0 40px rgba(0, 206, 209, 0.3));
}

/* Fade-in animation */
@keyframes loaderFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}