/* assets/css/home.css */
.holographic-loader {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 2rem auto;
}

.holo-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    background: linear-gradient(45deg, #00f5ff, #ff00ff, #00ff88, #ffaa00, #00f5ff) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    animation: holoRotate 3s linear infinite;
}

.holo-ring-2 {
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    animation: holoRotate 2s linear infinite reverse;
}

.holo-core {
    position: absolute;
    width: 40%;
    height: 40%;
    top: 30%;
    left: 30%;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 245, 255, 0.3), rgba(255, 0, 255, 0.3));
    box-shadow: 0 0 30px rgba(0, 245, 255, 0.5), inset 0 0 20px rgba(255, 0, 255, 0.3);
    animation: holoPulse 2s ease-in-out infinite;
}

@keyframes holoRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes holoPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 1; }
}