/* Page Stability - Prevent Layout Shifts */
body {
    opacity: 1 !important;
}

#mainTitle {
    font-display: swap;
    will-change: color;
    transform: translateZ(0); /* Force hardware acceleration */
}

/* Glassmorphism Container */
.glass-container {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    filter: url(#gaussianNoise);
}

.glass-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 1px,
            rgba(255, 255, 255, 0.03) 1px,
            rgba(255, 255, 255, 0.03) 2px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 1px,
            rgba(255, 255, 255, 0.03) 1px,
            rgba(255, 255, 255, 0.03) 2px
        );
    pointer-events: none;
}

/* Blob Base Styles */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    mix-blend-mode: screen;
    opacity: 0.7;
    width: 400px;
    height: 400px;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Individual Blob Styles and Animations */
.blob-1 {
    background: linear-gradient(45deg, #ff6b6b, #feca57, #ff9ff3);
    top: 10%;
    left: 10%;
    animation-name: blob1-move;
}

.blob-2 {
    background: linear-gradient(135deg, #48cae4, #023e8a, #0077b6);
    top: 70%;
    right: 20%;
    animation-name: blob2-move;
    animation-duration: 25s;
}

.blob-3 {
    background: linear-gradient(225deg, #06ffa5, #b2fefa, #0be881);
    bottom: 20%;
    left: 50%;
    animation-name: blob3-move;
    animation-duration: 30s;
}

/* Blob Animation Keyframes */
@keyframes blob1-move {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    25% {
        transform: translate(200px, 150px) scale(1.1) rotate(90deg);
    }
    50% {
        transform: translate(400px, 50px) scale(0.9) rotate(180deg);
    }
    75% {
        transform: translate(100px, 300px) scale(1.2) rotate(270deg);
    }
    100% {
        transform: translate(300px, 200px) scale(1) rotate(360deg);
    }
}

@keyframes blob2-move {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    33% {
        transform: translate(-150px, -100px) scale(1.3) rotate(120deg);
    }
    66% {
        transform: translate(-300px, 100px) scale(0.8) rotate(240deg);
    }
    100% {
        transform: translate(-100px, -200px) scale(1.1) rotate(360deg);
    }
}

@keyframes blob3-move {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    20% {
        transform: translate(-200px, -150px) scale(1.2) rotate(72deg);
    }
    40% {
        transform: translate(150px, -100px) scale(0.9) rotate(144deg);
    }
    60% {
        transform: translate(250px, 100px) scale(1.1) rotate(216deg);
    }
    80% {
        transform: translate(-100px, 150px) scale(1.3) rotate(288deg);
    }
    100% {
        transform: translate(100px, -50px) scale(1) rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .blob {
        width: 250px;
        height: 250px;
        filter: blur(40px);
    }
    
    .glass-container {
        margin: 20px;
        border-radius: 20px;
    }
}

@media (max-width: 480px) {
    .blob {
        width: 200px;
        height: 200px;
        filter: blur(30px);
    }
}

/* Text Glow Effect */
.text-glow {
    text-shadow: 0 0 20px currentColor;
}

/* Smooth transitions for color changes */
* {
    transition: color 0.7s ease-in-out;
}