@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* The Body should have a effect like bluish particles floating on a black background that should remind of a disco */
body {
    background-color: black;
    overflow: hidden;
    position: relative; /* Added position relative */
    animation: fadeIn 0.5s ease-in;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative; /* Added position relative */
    z-index: 1; /* Keep content above the disco effect */
    text-align: center;
    padding: 20px;
}

.container-content {
    background-color: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    animation: fadeIn 0.5s ease-in;
    width: 100%;
    max-width: 500px;
}

.logo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 8vw, 60px);
    color: white;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.coming-soon-head {
    font-family: "Oswald", sans-serif;
    color: white;
    font-size: clamp(25px, 6vw, 35px);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.coming-soon-text {
    font-family: "Inter", sans-serif;
    color: white;
    font-size: clamp(14px, 4vw, 16px);
    padding: 0 10px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes disco-effect {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 0.7;
        background: radial-gradient(circle, #ff00ff, #ff00cc, transparent 70%);
    }
    33% {
        transform: translate(-40%, -60%) scale(1.4) rotate(120deg);
        opacity: 0.9;
        background: radial-gradient(circle, #00ffff, #00ccff, transparent 70%);
    }
    66% {
        transform: translate(-60%, -40%) scale(1.2) rotate(240deg);
        opacity: 0.8;
        background: radial-gradient(circle, #ffff00, #ffcc00, transparent 70%);
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(360deg);
        opacity: 0.7;
        background: radial-gradient(circle, #ff00ff, #ff00cc, transparent 70%);
    }
}

/* Added pseudo-elements for the disco effect */
body::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #ff00ff, #ff00cc, transparent 70%);
    filter: blur(30px);
    animation: disco-effect 4s infinite, fadeIn 0.5s ease-in;
    z-index: 0;
    mix-blend-mode: screen;
}

body::after {
    content: '';
    position: absolute;
    top: 30%;
    left: 30%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, #00ffff, #00ccff, transparent 70%);
    filter: blur(25px);
    animation: disco-effect 4s infinite 1s, fadeIn 0.5s ease-in;
    z-index: 0;
    mix-blend-mode: screen;
}

/* Additional disco lights */
body::before,
body::after {
    box-shadow: 
        -40vw -40vh 0 rgba(255, 0, 255, 0.3),
        40vw 40vh 0 rgba(0, 255, 255, 0.3),
        -40vw 40vh 0 rgba(255, 255, 0, 0.3),
        40vw -40vh 0 rgba(0, 255, 0, 0.3),
        20vw 20vh 0 rgba(255, 0, 128, 0.3),
        -20vw -20vh 0 rgba(128, 0, 255, 0.3),
        -20vw 20vh 0 rgba(0, 255, 128, 0.3),
        20vw -20vh 0 rgba(255, 128, 0, 0.3),
        0vw 30vh 0 rgba(255, 0, 255, 0.3),
        0vw -30vh 0 rgba(0, 255, 255, 0.3),
        30vw 0vh 0 rgba(255, 255, 0, 0.3),
        -30vw 0vh 0 rgba(128, 255, 0, 0.3);
}

/* Extra floating particles */
@keyframes float {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-20px) translateX(10px); }
    50% { transform: translateY(-35px) translateX(-10px); }
    75% { transform: translateY(-15px) translateX(15px); }
}

.container::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15) 2px, transparent 2px);
    background-size: 30px 30px, 50px 50px;
    animation: float 8s infinite ease-in-out, fadeIn 0.5s ease-in;
}