/* ========================================
   DILIGENT EDUCATIONS - REPLIT EFFECTS
   Premium Visual Effects & Enhancements
   ======================================== */

/* ==========================================
   GLASSMORPHISM EFFECTS
   ========================================== */
.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-dark {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-colored {
    background: rgba(99, 102, 241, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

/* ==========================================
   GLOW EFFECTS
   ========================================== */
.glow-primary {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3),
        0 0 40px rgba(99, 102, 241, 0.2),
        0 0 60px rgba(99, 102, 241, 0.1);
}

.glow-secondary {
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.3),
        0 0 40px rgba(14, 165, 233, 0.2),
        0 0 60px rgba(14, 165, 233, 0.1);
}

.glow-accent {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3),
        0 0 40px rgba(245, 158, 11, 0.2),
        0 0 60px rgba(245, 158, 11, 0.1);
}

.text-glow {
    text-shadow: 0 0 10px rgba(99, 102, 241, 0.5),
        0 0 20px rgba(99, 102, 241, 0.3),
        0 0 30px rgba(99, 102, 241, 0.2);
}

/* Animated Glow */
.glow-pulse {
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
    }

    50% {
        box-shadow: 0 0 40px rgba(99, 102, 241, 0.6),
            0 0 60px rgba(99, 102, 241, 0.4);
    }
}

/* ==========================================
   GRADIENT BORDERS
   ========================================== */
.gradient-border {
    position: relative;
    background: var(--dark);
    border-radius: var(--border-radius);
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: var(--gradient-primary);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Animated Gradient Border */
.gradient-border-animated::before {
    background: linear-gradient(90deg,
            var(--primary),
            var(--secondary),
            var(--accent),
            var(--primary));
    background-size: 300% 100%;
    animation: gradientMove 3s linear infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 300% 50%;
    }
}

/* ==========================================
   NEON EFFECTS
   ========================================== */
.neon-text {
    color: var(--primary-light);
    text-shadow:
        0 0 5px var(--primary),
        0 0 10px var(--primary),
        0 0 20px var(--primary),
        0 0 40px var(--primary);
}

.neon-box {
    border: 2px solid var(--primary);
    box-shadow:
        0 0 5px var(--primary),
        inset 0 0 5px var(--primary),
        0 0 10px var(--primary),
        inset 0 0 10px var(--primary);
}

/* ==========================================
   MORPHING BACKGROUNDS
   ========================================== */
.morph-bg {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    background: linear-gradient(45deg,
            rgba(99, 102, 241, 0.3),
            rgba(14, 165, 233, 0.2));
    filter: blur(40px);
    animation: morphBg 15s ease-in-out infinite;
}

@keyframes morphBg {

    0%,
    100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: rotate(0deg) scale(1);
    }

    25% {
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
    }

    50% {
        border-radius: 50% 60% 30% 60% / 70% 40% 70% 30%;
        transform: rotate(180deg) scale(1.1);
    }

    75% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

/* ==========================================
   PARTICLE EFFECTS
   ========================================== */
.particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary);
    border-radius: 50%;
    animation: particleFloat 10s linear infinite;
}

@keyframes particleFloat {
    0% {
        opacity: 0;
        transform: translateY(100vh) scale(0);
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-10vh) scale(1);
    }
}

/* ==========================================
   AURORA EFFECT
   ========================================== */
.aurora {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.aurora-layer {
    position: absolute;
    width: 200%;
    height: 200%;
    background: linear-gradient(180deg,
            transparent 0%,
            rgba(99, 102, 241, 0.1) 25%,
            rgba(14, 165, 233, 0.15) 50%,
            rgba(245, 158, 11, 0.1) 75%,
            transparent 100%);
    animation: auroraMove 20s ease-in-out infinite;
}

@keyframes auroraMove {

    0%,
    100% {
        transform: translateX(-25%) translateY(-25%) rotate(0deg);
    }

    50% {
        transform: translateX(0%) translateY(0%) rotate(180deg);
    }
}

/* ==========================================
   RIPPLE EFFECTS
   ========================================== */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.ripple:active::after {
    width: 300px;
    height: 300px;
}

/* ==========================================
   SPOTLIGHT EFFECT
   ========================================== */
.spotlight {
    position: relative;
    overflow: hidden;
}

.spotlight::before {
    content: '';
    position: absolute;
    top: var(--mouse-y, 50%);
    left: var(--mouse-x, 50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle,
            rgba(99, 102, 241, 0.15) 0%,
            transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.spotlight:hover::before {
    opacity: 1;
}

/* ==========================================
   CARD SHINE EFFECT
   ========================================== */
.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transform: skewX(-25deg);
    transition: left 0.6s ease;
}

.shine-effect:hover::before {
    left: 150%;
}

/* ==========================================
   NOISE TEXTURE
   ========================================== */
.noise-overlay {
    position: relative;
}

.noise-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
}

/* ==========================================
   BLUR TRANSITIONS
   ========================================== */
.blur-in {
    animation: blurIn 0.6s ease forwards;
}

@keyframes blurIn {
    from {
        filter: blur(10px);
        opacity: 0;
    }

    to {
        filter: blur(0);
        opacity: 1;
    }
}

/* ==========================================
   MAGNETIC ELEMENTS
   ========================================== */
[data-magnetic] {
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */
@media (max-width: 768px) {
    .morph-bg {
        width: 300px;
        height: 300px;
    }

    .aurora-layer {
        animation-duration: 30s;
    }
}

/* ==========================================
   REDUCED MOTION
   ========================================== */
@media (prefers-reduced-motion: reduce) {

    .morph-bg,
    .aurora-layer,
    .particle,
    .glow-pulse {
        animation: none;
    }

    .gradient-border-animated::before {
        animation: none;
    }
}