:root {
    --bg-dark: #0f1016;
    --accent-1: #4f663c;
    --accent-2: #778643;
    --accent-3: #1c3628;
    --text-light: #e8f1df;
}
body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: "Inter", sans-serif;
    background-color: var(--bg-dark);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Subtle Tidal Wave Background */
.wave-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    background: var(--bg-dark);
}
.wave {
    position: absolute;
    left: 50%;
    width: 250vw;
    height: 250vw;
    margin-left: -125vw;
    top: 35vh;
    background: linear-gradient(
        to bottom,
        var(--accent-1),
        transparent
    );
    border-radius: 40%;
    animation: tidalWave 18s infinite linear;
    opacity: 0.6;
    filter: blur(20px);
    will-change: transform;
}
.wave-2 {
    top: 45vh;
    width: 260vw;
    height: 260vw;
    margin-left: -130vw;
    background: linear-gradient(
        to bottom,
        var(--accent-2),
        transparent
    );
    border-radius: 43%;
    animation: tidalWave 22s infinite linear reverse;
    opacity: 0.5;
    filter: blur(25px);
}
.wave-3 {
    top: 55vh;
    width: 270vw;
    height: 270vw;
    margin-left: -135vw;
    background: linear-gradient(
        to bottom,
        var(--accent-3),
        transparent
    );
    border-radius: 46%;
    animation: tidalWave 26s infinite linear;
    opacity: 0.7;
    filter: blur(30px);
}
@keyframes tidalWave {
    0% {
        transform: rotate(0deg) translateY(0);
    }
    50% {
        transform: rotate(180deg) translateY(4vh);
    }
    100% {
        transform: rotate(360deg) translateY(0);
    }
}
/* Grain Noise */
.noise-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
}
/* Content Container */
.content {
    position: relative;
    z-index: 10;
    text-align: center;
}
/* Animated Title */
.title {
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 200;
    letter-spacing: -0.04em;
    color: var(--text-light);
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.2em;
    overflow: hidden;
    padding: 0.2em;
}
.char {
    display: inline-block;
    transform: translateY(100%) rotate(10deg);
    opacity: 0;
    filter: blur(10px);
    animation: revealChar 1.5s cubic-bezier(0.19, 1, 0.22, 1)
        forwards;
    will-change: transform, opacity, filter;
}
@keyframes revealChar {
    to {
        transform: translateY(0) rotate(0);
        opacity: 1;
        filter: blur(0);
    }
}
.subtitle {
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    font-weight: 400;
    color: rgba(232, 241, 223, 0.7);
    margin-top: 1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 2s ease-out 1.5s forwards;
    will-change: transform, opacity;
}
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}