/* css/styles.css */

/* Global Styles */
body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: radial-gradient(circle at bottom, #1a1a2e, #000000);
    height: 100vh;
    width: 100vw;
    font-family: 'Roboto Slab', serif; /* Apply the new font */
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    filter: blur(0.5px); /* Overall slight blur for a misty effect */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.text-group {
    position: relative;
    text-align: center;
    z-index: 2; /* Ensure text is above smoke */
}

.text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 5em;
    font-weight: 300;
    letter-spacing: 4px;
    animation: float 6s ease-in-out infinite, drift 8s ease-in-out infinite;
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.5),
        0 0 20px rgba(255, 255, 255, 0.3),
        0 0 30px rgba(255, 255, 255, 0.2);
    will-change: transform; /* Optimize animation performance */
    user-select: none; /* Prevent text selection */
    margin: 0; /* Remove default margins */
}

.subtitle {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.5em;
    letter-spacing: 2px;
    animation: float 6s ease-in-out infinite, drift 8s ease-in-out infinite;
    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.3),
        0 0 10px rgba(255, 255, 255, 0.2);
    will-change: transform;
    user-select: none;
    margin-top: 0.5em; /* Space between main text and subtitle */
}

/* Responsive Typography */
@media (max-width: 768px) {
    .text {
        font-size: 3em;
    }
    .subtitle {
        font-size: 1em;
    }
}

@media (max-width: 480px) {
    .text {
        font-size: 2em;
    }
    .subtitle {
        font-size: 0.9em;
    }
}

/* Animations */
@keyframes float {
0% { transform: translate(0, 0); }
50% { transform: translate(0, -5px); }
100% { transform: translate(0, 0); }
}

@keyframes drift {
0% { transform: translate(0, 0); }
25% { transform: translate(10px, 0); }
50% { transform: translate(0, 0); }
75% { transform: translate(-10px, 0); }
100% { transform: translate(0, 0); }
}

/* Smoke Canvas */
#smoke {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: transform; /* Optimize animation performance */
    z-index: 1; /* Behind the text */
}