@font-face {
    font-family: "CloudyClouds";
    src:
        url("../fonts/Quaky-8Y7D.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}

html, body {
    height: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #e6e9ef;
}

.drifting-text {
    display: inline-block;
}

.drifting-text span {
    display: inline-block;
    animation: cloud-drift 6s ease-in-out infinite;
}

/* Slight variation per character */
.drifting-text span:nth-child(odd) {
    animation-duration: 7s;
}
.drifting-text span:nth-child(3n) {
    animation-duration: 8.5s;
}
.drifting-text span:nth-child(4n) {
    animation-duration: 6.5s;
}

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


/* Background */
body {
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.06), transparent 40%),
        radial-gradient(circle at 80% 10%, rgba(255,255,255,0.04), transparent 45%),
        linear-gradient(180deg, #0f172a 0%, #020617 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Layout */
.container {
    padding: 2rem;
    width: 100%;
    max-width: 600px;
}

.card {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(10px);
    border-radius: 5000px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Logo placeholder */
.logo-placeholder {
    width: 1px;
    height: 220px;
    margin: 0 auto 2rem;
    border-radius: 20px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.02)
        );
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.2em;
    font-weight: 600;
}

/* Typography */
h1 {
    font-family: "CloudyClouds", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin-top: 3.0rem;
    margin-bottom: 0.25rem;
    letter-spacing: 0.04em;
    filter: drop-shadow(0 0 10px rgba(120, 150, 255, 1.0));
}

.tagline {
    font-family: "CloudyClouds", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    color: #9aa4b2;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow:
        0 0 6px rgba(180, 200, 255, 0.65),
        0 0 14px rgba(120, 150, 255, 0.45),
        0 0 30px rgba(80, 110, 200, 0.25);
}