/* ── Fonts (self-hosted, no external requests) ───────── */
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/space-mono-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/space-mono-700.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ── Reset ───────────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg: #000;
    --fg: #fff;
    --dim: #5a5a5a;
    --logo-w: min(86vw, 940px, 104vh);
}

html,
body {
    height: 100%;
    background: var(--bg);
    overflow: hidden;
}

body {
    font-family: 'Space Mono', ui-monospace, monospace;
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── The wordmark: a full-bleed field, seen only through the letters ── */
#gl {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* Fallback if WebGL never paints */
    background: conic-gradient(from 210deg at 50% 50%, #4400ff, #ff0066, #ffcc00, #00ffc3, #4400ff);

    -webkit-mask: url(mask.svg) 50% 45% / var(--logo-w) auto no-repeat;
    mask: url(mask.svg) 50% 45% / var(--logo-w) auto no-repeat;

    animation: rise 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Meta line ──────────────────────────────────────── */
.meta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: clamp(2rem, 7vh, 4.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 0 1.25rem;
    text-align: center;
}

.kicker {
    font-size: clamp(0.5rem, 1.5vw, 0.62rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.46em;
    text-indent: 0.46em;
    color: var(--dim);
    animation: rise 1s 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cta {
    font-size: clamp(0.95rem, 3.4vw, 1.35rem);
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #efefef;
    animation: rise 1s 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mail {
    position: relative;
    font-size: clamp(0.82rem, 2.6vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--fg);
    text-decoration: none;
    padding: 0.35rem 0;
    animation: rise 1s 0.78s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mail::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.mail:hover::after,
.mail:focus-visible::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
}

.mail:focus-visible {
    outline: none;
}

/* ── Texture ────────────────────────────────────────── */
.grain {
    position: fixed;
    inset: -50%;
    pointer-events: none;
    opacity: 0.055;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: drift 0.9s steps(3) infinite;
}

/* ── Motion ─────────────────────────────────────────── */
@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes drift {
    0% { transform: translate(0, 0); }
    33% { transform: translate(-2%, 1%); }
    66% { transform: translate(1%, -2%); }
    100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {

    #gl,
    .kicker,
    .cta,
    .mail,
    .grain {
        animation: none;
    }

    .mail::after {
        transition: none;
    }
}

@media (max-width: 600px) {
    :root {
        --logo-w: min(84vw, 62vh);
    }

    #gl {
        -webkit-mask-position: 50% 42%;
        mask-position: 50% 42%;
    }
}