@font-face {
    font-family: 'Arete Mono';
    src: url('Arete Mono Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --accent-color: #555555;
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-heading: 'Arete Mono', 'Outfit', sans-serif;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 2rem;
}

.content-wrapper {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.logo-container {
    position: relative;
    margin-bottom: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.disco-aura {
    position: absolute;
    width: 115%;
    height: 115%;
    background:
        radial-gradient(circle at 30% 30%, rgba(0, 191, 255, 0.8) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(255, 0, 255, 0.7) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(50, 205, 50, 0.6) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 25%),
        radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.3) 0%, transparent 20%);
    filter: blur(25px);
    border-radius: 50%;
    opacity: 0.8;
    animation:
        pulse 3s ease-in-out infinite,
        sparkle 2s ease-in-out infinite alternate;
    z-index: -1;
}

.disco-aura::before {
    content: '';
    position: absolute;
    inset: -10%;
    background:
        conic-gradient(from 0deg,
            transparent 0deg,
            rgba(0, 191, 255, 0.3) 60deg,
            transparent 120deg,
            rgba(255, 0, 255, 0.3) 180deg,
            transparent 240deg,
            rgba(50, 205, 50, 0.3) 300deg,
            transparent 360deg);
    filter: blur(30px);
    border-radius: 50%;
    animation: spin 8s linear infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.6;
    }
}

@keyframes sparkle {
    0% {
        filter: blur(25px) brightness(1);
    }

    100% {
        filter: blur(20px) brightness(1.3);
    }
}

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

    to {
        transform: rotate(360deg);
    }
}

.logo {
    width: 100%;
    max-width: 450px;
    height: auto;
    transition: transform 0.4s ease;
}

.logo:hover {
    transform: scale(1.02);
}

.text-container {
    margin-top: 1rem;
}

.coming-soon {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 8vw, 3.5rem);
    font-weight: 400;
    /* Arete Mono is a mono font, usually looks better with standard weight */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    color: var(--text-color);
}

.tagline {
    font-size: clamp(1rem, 3vw, 1.2rem);
    font-weight: 300;
    letter-spacing: 0.1em;
    color: var(--accent-color);
    text-transform: uppercase;
}

.tagline span {
    font-weight: 600;
    color: var(--text-color);
}

footer {
    padding: 2rem;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: #999;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsiveness adjustments */
@media (max-width: 480px) {
    .logo {
        max-width: 280px;
    }

    .coming-soon {
        letter-spacing: 0.15em;
    }
}