/* Crystal Animation Styles */

.crystal-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.crystal {
    position: absolute;
    transform-origin: center;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.3);
    filter: blur(0.5px);
    transition: opacity 0.5s ease;
    will-change: transform, opacity;
    backdrop-filter: blur(2px);
}

/* Crystal types */
.crystal-square {
    border-radius: 2px;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
}

.crystal-circle {
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.4);
}

.crystal-polygon {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.4);
}

/* Crystal sizes */
.crystal-small {
    width: 5px;
    height: 5px;
}

.crystal-medium {
    width: 10px;
    height: 10px;
}

.crystal-large {
    width: 15px;
    height: 15px;
}

/* Animation for subtle pulsing */
@keyframes crystalPulse {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 0.2;
        box-shadow: 0 0 5px rgba(124, 58, 237, 0.2);
    }
    50% {
        transform: scale(1.2) rotate(5deg);
        opacity: 0.6;
        box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.2;
        box-shadow: 0 0 5px rgba(124, 58, 237, 0.2);
    }
}

/* Alternate animation for variety */
@keyframes crystalFloat {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-10px) rotate(5deg);
        opacity: 0.7;
    }
    100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.3;
    }
}

/* Apply different animation durations to create variety */
.crystal-small {
    animation: crystalPulse 4s infinite ease-in-out;
}

.crystal-medium {
    animation: crystalPulse 6s infinite ease-in-out;
}

.crystal-large {
    animation: crystalPulse 8s infinite ease-in-out;
}

/* Apply float animation to some crystals for variety */
.crystal-square:nth-child(3n) {
    animation: crystalFloat 7s infinite ease-in-out;
}

.crystal-circle:nth-child(4n) {
    animation: crystalFloat 9s infinite ease-in-out;
}

.crystal-polygon:nth-child(5n) {
    animation: crystalFloat 11s infinite ease-in-out;
}

/* Add random animation delays */
.crystal:nth-child(2n) {
    animation-delay: 0.5s;
}

.crystal:nth-child(3n) {
    animation-delay: 1s;
}

.crystal:nth-child(5n) {
    animation-delay: 1.5s;
}

.crystal:nth-child(7n) {
    animation-delay: 2s;
}

/* Add glow effect on some crystals */
.crystal:nth-child(11n) {
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.6);
}

.crystal:nth-child(13n) {
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.6);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .crystal-large {
        width: 12px;
        height: 12px;
    }
    
    .crystal-medium {
        width: 8px;
        height: 8px;
    }
    
    .crystal-small {
        width: 4px;
        height: 4px;
    }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .crystal {
        animation: none !important;
        transition: none !important;
    }
}