/* ============================================
   Animations and Effects
   ============================================ */

/* Stars Background Animation */
.stars-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0 !important;
    pointer-events: none;
}

.section {
    position: relative;
    z-index: 1;
}

.section .container {
    position: relative;
    z-index: 2;
}

.stars-background canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Animated Stars Layers */
.stars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.stars-layer {
    position: absolute;
    width: 100%;
    height: 100%;
}

.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    animation: twinkle linear infinite;
}

/* Small Stars */
.stars-layer-1 .star {
    width: 1px;
    height: 1px;
    animation-duration: 3s;
}

/* Medium Stars */
.stars-layer-2 .star {
    width: 2px;
    height: 2px;
    animation-duration: 4s;
}

/* Large Stars */
.stars-layer-3 .star {
    width: 3px;
    height: 3px;
    animation-duration: 5s;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Shooting Stars */
.shooting-star {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, #fff, transparent);
    border-radius: 50%;
    animation: shoot 3s linear infinite;
    opacity: 0;
}

@keyframes shoot {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: translateX(-300px) translateY(300px);
        opacity: 0;
    }
}

/* Glow Particles */
.glow-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--primary-color),
                0 0 20px var(--primary-color);
    animation: float 6s ease-in-out infinite;
    opacity: 0.3;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-20px) translateX(10px);
    }
    50% {
        transform: translateY(-10px) translateX(-10px);
    }
    75% {
        transform: translateY(-30px) translateX(5px);
    }
}

/* Fade In Up Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Rotate Animation for Card Borders */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Pulse Animation for Badges */
@keyframes pulse-badge {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Float Animation for Awards */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}