@font-face {
    font-family: 'Anybody';
    font-style: normal;
    font-weight: 800;
    font-stretch: 125%;
    font-display: swap;
    src: url('assets/fonts/anybody-800-semi.woff2') format('woff2');
}

@font-face {
    font-family: 'Syne';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('assets/fonts/syne-800-latin.woff2') format('woff2');
}

:root {
    --ink: #f3f1ea;
    --muted: rgba(243, 241, 234, 0.64);
    --line: rgba(243, 241, 234, 0.14);
    --accent: #e8a23a;
    --bg0: #0c0b09;
    --bg1: #16140f;
    --font-brand: 'Syne', 'Arial Black', sans-serif;
    --font-display: 'Anybody', 'Arial Black', sans-serif;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    color-scheme: dark;
}

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

html, body { min-height: 100%; }

body {
    min-height: 100dvh;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--ink);
    background: var(--bg0);
    -webkit-font-smoothing: antialiased;
    position: relative;
}

.atmosphere {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(900px 520px at 8% -5%, rgba(232, 162, 58, 0.12), transparent 55%),
        radial-gradient(700px 480px at 100% 20%, rgba(255, 255, 255, 0.04), transparent 50%),
        linear-gradient(168deg, var(--bg1), var(--bg0) 58%);
}

.atmosphere__grid {
    position: absolute;
    inset: 0;
    opacity: 0.22;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 85%);
}

.atmosphere__glow {
    position: absolute;
    width: 42vw;
    height: 42vw;
    max-width: 420px;
    max-height: 420px;
    right: -8%;
    bottom: 8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 162, 58, 0.16), transparent 68%);
    animation: pulseGlow 7s var(--ease) infinite alternate;
}

.atmosphere__grain {
    position: absolute;
    inset: 0;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%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");
}

@keyframes pulseGlow {
    from { transform: scale(1); opacity: 0.7; }
    to { transform: scale(1.12); opacity: 1; }
}

.page {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(2rem + var(--safe-top)) 1.5rem calc(2rem + var(--safe-bottom));
    max-width: 40rem;
}

.brand {
    font-family: var(--font-brand);
    font-size: clamp(0.95rem, 2.4vw, 1.1rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    animation: riseIn 0.8s var(--ease) both;
}

.title {
    font-family: var(--font-display);
    font-weight: 800;
    font-stretch: 125%;
    font-size: clamp(3.2rem, 14vw, 5.5rem);
    line-height: 0.92;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    animation: riseIn 0.8s var(--ease) 0.08s both;
}

.sub {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--muted);
    margin-bottom: 1.75rem;
    animation: riseIn 0.8s var(--ease) 0.16s both;
}

.links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-brand);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    animation: riseIn 0.8s var(--ease) 0.24s both;
}

.links a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid rgba(243, 241, 234, 0.35);
    padding-bottom: 0.12rem;
}

.links a:hover {
    border-bottom-color: var(--accent);
    color: var(--accent);
}

@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(0.85rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand,
    .title,
    .sub,
    .links,
    .atmosphere__glow {
        animation: none !important;
    }
}