:root {
    --bg-dark: #1a1a1a;
    --bg-mid: #252525;
    --silver-1: #f0f0f0;
    --silver-2: #cfcfcf;
    --silver-3: #8f8f8f;
    --silver-4: #ffffff;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family:
        Inter,
        Segoe UI,
        Helvetica Neue,
        Arial,
        sans-serif;
}

body {
    background:
        radial-gradient(circle at top,
            #323232 0%,
            #222222 35%,
            #181818 100%);
    color: white;
    overflow-x: hidden;
}

/* HERO */

.hero {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.hero-content {
    text-align: center;
    max-width: 1100px;
}

/* HEADLINE */

.headline {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.02em;
    margin: 0;
    line-height: 1.15;
    perspective: 1400px;
}

.letter {
    display: inline-block;

    opacity: 0;

    font-weight: 800;

    font-size: clamp(2.6rem, 8vw, 6rem);

    color: #ffffff;

    text-shadow:
        0 2px 0 #bdbdbd,
        0 4px 10px rgba(0,0,0,.7);

    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.space {
    width: 0.4em;
}

/* FALL-IN ANIMATION */

.letter.animate {
    animation: cinematicFall 1.4s cubic-bezier(.22,.9,.25,1) forwards;
}

@keyframes cinematicFall {

    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform:
            translate3d(0,0,0)
            rotateX(0)
            rotateY(0)
            rotateZ(0)
            scale(1);
    }
}

/* FINAL METALLIC STATE */

.headline.finalized .letter {
    transition:
        all 1.6s ease;

    text-shadow: none;

    background:
        linear-gradient(
            180deg,
            var(--silver-4),
            var(--silver-1) 20%,
            var(--silver-3) 45%,
            var(--silver-4) 60%,
            var(--silver-2) 85%,
            var(--silver-4)
        );

    background-size: 300% 100%;

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    filter:
        drop-shadow(0 1px 2px rgba(255,255,255,.08))
        drop-shadow(0 2px 10px rgba(255,255,255,.04));

    transform:
        translateZ(0)
        rotateX(0)
        rotateY(0)
        rotateZ(0);
}

/* subtle brushed-metal movement */

.headline.finalized .letter {
    animation: metallicShimmer 12s linear infinite;
}

@keyframes metallicShimmer {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 300% 50%;
    }
}

.subheading {
    margin-top: 1.5rem;
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: #bdbdbd;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.cta-button {
    display: inline-block;
    margin-top: 2.5rem;

    padding: 14px 34px;

    text-decoration: none;

    color: #f3f3f3;

    border: 1px solid rgba(255,255,255,.25);

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.04)
        );

    backdrop-filter: blur(4px);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.cta-button:hover,
.cta-button:focus-visible {

    transform: translateY(-2px);

    border-color: rgba(255,255,255,.4);

    box-shadow:
        0 8px 24px rgba(255,255,255,.08);
}

.contact-section {
    text-align: center;
    padding: 4rem 2rem 6rem;
    color: #a9a9a9;
    max-width: 800px;
    margin: auto;
}

/* RESPONSIVE */

@media (max-width: 768px) {

    .headline {
        gap: 0;
    }

    .letter {
        font-size: clamp(2rem, 10vw, 3.6rem);
    }

}