body[data-theme="glass"] {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 50%, #16213e 100%);
    background-attachment: fixed;
}

body[data-theme="glass"] .shapes-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -10;
}

body[data-theme="glass"] .container {
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

body[data-theme="glass"] .shape {
    position: absolute;
    opacity: 0;
    will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
    body[data-theme="glass"] .shape {
        animation: fadeInOut 8s infinite ease-in-out !important;
    }
    body[data-theme="glass"] .glass-card {
        animation: none !important;
    }
}

body[data-theme="glass"] .rectangle {
    width: 94%;
    height: 20px;
    background: #0066ff77;
    top: 92%;
    left: 3%;
    border-radius: 50px;
    animation: 
        colorShiftRectangle 12s 2s infinite ease-in-out,
        fadeInOut 10s 2s infinite ease-in-out;
}

body[data-theme="glass"] .square {
    width: 120px;
    height: 120px;
    background: #ff006f8a;
    top: 10%;
    right: -150px;
    animation: 
        floatSquare 32s infinite ease-in-out,
        colorShiftSquare 13s 4s infinite ease-in-out,
        fadeInOut 9s 1s infinite ease-in-out,
        rotate 40s infinite linear;
}

/* CIRCLE - Extra Large, slow drift */
body[data-theme="glass"] .circle {
    width: 200px;
    height: 200px;
    background: #00fffb8c;
    border-radius: 50%;
    bottom: -200px;
    left: 15%;
    animation: 
        floatCircle 40s infinite ease-in-out,
        colorShiftCircle 15s 11s infinite ease-in-out,
        fadeInOut 12s 3s infinite ease-in-out;
}

/* PENTAGON - Very small, erratic movement */
body[data-theme="glass"] .pentagon {
    width: 6000px;
    height: 6000px;
    background: #ff6b3583;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    top: 50%;
    left: 50%;
    animation: 
        floatPentagon 22s infinite ease-in-out,
        colorShiftPentagon 11s 7s infinite ease-in-out,
        fadeInOut 7s 4s infinite ease-in-out,
        rotate 35s infinite linear;
}

/* HEXAGON - Large, moves off-screen bottom */
body[data-theme="glass"] .hexagon {
    width: 280px;
    height: 280px;
    background: #00d5ff7a;
    clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
    top: 60%;
    right: -300px;
    animation: 
        floatHexagon 38s infinite ease-in-out,
        colorShiftHexagon 16s 5s infinite ease-in-out,
        fadeInOut 11s 4s infinite ease-in-out,
        rotate 45s infinite linear;
}

/* OCTAGON - Medium-small, circular path */
body[data-theme="glass"] .octagon {
    width: 90px;
    height: 90px;
    background: #ffd90075;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    top: 35%;
    left: 70%;
    animation: 
        floatOctagon 30s infinite ease-in-out,
        colorShiftOctagon 13s 16s infinite ease-in-out,
        fadeInOut 9s 5s infinite ease-in-out;
}

/* SMALL GLOWING CIRCLES */
body[data-theme="glass"] .glow-circle-1 {
    width: 4500px;
    height: 150px;
    background: #00d5ff80;
    border-radius: 50%;
    top: 12%;
    left: 8%;
    animation: 
        floatGlow1 26s infinite ease-in-out,
        colorShiftGlow1 13s infinite ease-in-out,
        fadeInOut 9s 1s infinite ease-in-out;
}

body[data-theme="glass"] .glow-circle-2 {
    width: 7000px;
    height: 70px;
    background: #ff006f8a;
    border-radius: 50%;
    top: 18%;
    right: 12%;
    animation: 
        floatGlow2 29s infinite ease-in-out,
        colorShiftGlow2 14s 3s infinite ease-in-out,
        fadeInOut 10s 4s infinite ease-in-out;
}

body[data-theme="glass"] .glow-circle-3 {
    width: 55px;
    height: 55px;
    background: #ffd90091;
    border-radius: 50%;
    bottom: 22%;
    left: 15%;
    animation: 
        floatGlow3 24s infinite ease-in-out,
        colorShiftGlow3 12s 5s infinite ease-in-out,
        fadeInOut 8s 2s infinite ease-in-out;
}

body[data-theme="glass"] .glow-circle-4 {
    width: 38px;
    height: 38px;
    background: #b300ff86;
    border-radius: 50%;
    bottom: 15%;
    right: 18%;
    animation: 
        floatGlow4 27s infinite ease-in-out,
        colorShiftGlow4 15s 6s infinite ease-in-out,
        fadeInOut 11s 3s infinite ease-in-out;
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    10%, 40% {
        opacity: 0.7;
    }
    25% {
        opacity: 0.85;
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes floatTriangle {
    0% { transform: translate(-100px, 0); }
    25% { transform: translate(calc(50vw), -60px); }
    50% { transform: translate(calc(100vw + 100px), 40px); }
    75% { transform: translate(calc(50vw), 80px); }
    100% { transform: translate(-100px, 0); }
}

@keyframes floatRectangle {
    0% { transform: translate(-250px, 0); }
    25% { transform: translate(calc(40vw), -80px); }
    50% { transform: translate(calc(100vw + 250px), 60px); }
    75% { transform: translate(calc(50vw), -40px); }
    100% { transform: translate(-250px, 0); }
}

@keyframes floatSquare {
    0% { transform: translate(150px, 0); }
    35% { transform: translate(-200px, 200px); }
    70% { transform: translate(-400px, -100px); }
    100% { transform: translate(150px, 0); }
}

@keyframes floatCircle {
    0%, 100% { transform: translate(0, 200px); }
    25% { transform: translate(100px, -100px); }
    50% { transform: translate(-150px, -300px); }
    75% { transform: translate(200px, 100px); }
}

@keyframes floatPentagon {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-250px, -200px); }
    40% { transform: translate(300px, 100px); }
    60% { transform: translate(-100px, 250px); }
    80% { transform: translate(200px, -150px); }
    100% { transform: translate(0, 0); }
}

@keyframes floatHexagon {
    0% { transform: translate(300px, 0); }
    30% { transform: translate(-100px, -200px); }
    60% { transform: translate(-300px, 150px); }
    100% { transform: translate(300px, 0); }
}

@keyframes floatOctagon {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-180px, -120px); }
    50% { transform: translate(-80px, 180px); }
    75% { transform: translate(120px, 80px); }
}

@keyframes floatStar {
    0% { transform: translate(0, 100px); }
    33% { transform: translate(-200px, -400px); }
    66% { transform: translate(100px, calc(-100vh - 150px)); }
    100% { transform: translate(0, 100px); }
}

@keyframes floatGlow1 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(40px, -50px); }
    50% { transform: translate(-30px, 40px); }
    75% { transform: translate(50px, 30px); }
}

@keyframes floatGlow2 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-60px, 45px); }
    50% { transform: translate(35px, -40px); }
    75% { transform: translate(-45px, -30px); }
}

@keyframes floatGlow3 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(55px, 5px); }
    50% { transform: translate(-0px, -45px); }
    75% { transform: translate(30px, 50px); }
}

@keyframes floatGlow4 {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-0px, -40px); }
    50% { transform: translate(45px, 5px); }
    75% { transform: translate(-35px, 5px); }
}

@keyframes colorShiftTriangle {
    0%, 100% {
        border-bottom-color: #00d5ff8c;
    }
    33% {
        border-bottom-color: #00fffb79;
    }
    66% {
        border-bottom-color: #b300ff75;
    }
}

@keyframes colorShiftRectangle {
    0%, 100% {
        background-color: #b300ff83;
    }
    33% {
        background-color: #ff006f8c;
    }
    66% {
        background-color: #00d5ff8e;
    }
}

@keyframes colorShiftSquare {
    0%, 100% {
        background-color: #ff006f8f;
    }
    33% {
        background-color: #ffd9007e;
    }
    66% {
        background-color: #20b3b07c;
    }
}

@keyframes colorShiftCircle {
    0%, 100% {
        background-color: #00b7ff8c;
    }
    33% {
        background-color: #b300ff7a;
    }
    66% {
        background-color: #ff006f70;
    }
}

@keyframes colorShiftPentagon {
    0%, 100% {
        background-color: #ff6b358c;
    }
    33% {
        background-color: #00d5ff8c;
    }
    66% {
        background-color: #ffd9007c;
    }
}

@keyframes colorShiftHexagon {
    0%, 100% {
        background-color: #00d5ff80;
    }
    33% {
        background-color: #ff006f83;
    }
    66% {
        background-color: #00fffb88;
    }
}

@keyframes colorShiftOctagon {
    0%, 100% {
        background-color: #ffd900;
    }
    33% {
        background-color: #b300ff;
    }
    66% {
        background-color: #00d5ff;
    }
}

@keyframes colorShiftGlow1 {
    0%, 100% {
        background-color: #006eff8c;
    }
    33% {
        background-color: #b300ff80;
    }
    66% {
        background-color: #ff00552c;
    }
}

@keyframes colorShiftGlow2 {
    0%, 100% {
        background-color: #ff006f86;
    }
    33% {
        background-color: #ff48006e;
    }
    66% {
        background-color: #00d5ff85;
    }
}

@keyframes colorShiftGlow3 {
    0%, 100% {
        background-color: #ffd900;
    }
    33% {
        background-color: #00fffb4d;
    }
    66% {
        background-color: #ff006f8f;
    }
}

@keyframes colorShiftGlow4 {
    0%, 100% {
        background-color: #b300ff8c;
    }
    33% {
        background-color: #00d5ff86;
    }
    66% {
        background-color: #ffd900;
    }
}