@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500&family=Geist+Mono:wght@400;500&display=swap');

@font-face {
    font-family: "Geist Pixel Square";
    src: url("https://cdn.jsdelivr.net/npm/geist@1.7.0/dist/fonts/geist-pixel/GeistPixel-Square.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

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

html, body {
    height: 100%;
    -webkit-font-smoothing: antialiased;
}

:root {
    --bg: #08261d;
    --text: #f3f7f5;
    --tagline: #d4dfda;
    --tagline-brand: #ffffff;
    --globe-card: #041a14;
    --cta-text: #000000;
    --cta-grad-start: #f8e36a;
    --cta-grad-end: #f1cd2e;
    --footer: #e0e8e4;
    --footer-link: #f7fcfa;
    --footer-underline: rgba(255, 255, 255, 0.35);
    --footer-underline-hover: #ffffff;
    --globe-sphere: #f1f4ef;
    --globe-accent: #f4d64a;
}

body.theme-midnight-lime {
    --bg: #11131d;
    --text: #edf2ff;
    --tagline: #cfd8ef;
    --tagline-brand: #ffffff;
    --globe-card: #1b1f2d;
    --cta-text: #0f172a;
    --cta-grad-start: #d9ff6e;
    --cta-grad-end: #b8ef2f;
    --footer: #dde5fa;
    --footer-link: #ffffff;
    --footer-underline: rgba(255, 255, 255, 0.4);
    --footer-underline-hover: #ffffff;
    --globe-sphere: #1f2638;
    --globe-accent: #c8f04d;
}

body.theme-forest-gold {
    --bg: #0b2017;
    --text: #f0f6f1;
    --tagline: #d2ded5;
    --tagline-brand: #ffffff;
    --globe-card: #102a1f;
    --cta-text: #15150f;
    --cta-grad-start: #ffe98a;
    --cta-grad-end: #f4cb43;
    --footer: #e3ece6;
    --footer-link: #ffffff;
    --footer-underline: rgba(255, 255, 255, 0.38);
    --footer-underline-hover: #ffffff;
    --globe-sphere: #f5f4ea;
    --globe-accent: #f4d64a;
}

body.theme-plum-amber {
    --bg: #21162a;
    --text: #f8f1fb;
    --tagline: #e0d0e8;
    --tagline-brand: #ffffff;
    --globe-card: #2b1d37;
    --cta-text: #1e1510;
    --cta-grad-start: #ffd98a;
    --cta-grad-end: #f3b33d;
    --footer: #eadff0;
    --footer-link: #fff6ff;
    --footer-underline: rgba(255, 255, 255, 0.36);
    --footer-underline-hover: #ffffff;
    --globe-sphere: #3a2950;
    --globe-accent: #f2bf4d;
}

body.theme-sunset-orange {
    --bg: #2a170f;
    --text: #fff4ec;
    --tagline: #efd8cb;
    --tagline-brand: #ffffff;
    --globe-card: #341d12;
    --cta-text: #1f140f;
    --cta-grad-start: #ffcf8b;
    --cta-grad-end: #f58f34;
    --footer: #edd4c8;
    --footer-link: #fff1e9;
    --footer-underline: rgba(255, 255, 255, 0.36);
    --footer-underline-hover: #ffffff;
    --globe-sphere: #4a2819;
    --globe-accent: #ffb24d;
}

body.theme-ocean-blue {
    --bg: #0f1d33;
    --text: #edf4ff;
    --tagline: #cfddf0;
    --tagline-brand: #ffffff;
    --globe-card: #152744;
    --cta-text: #0f1a2e;
    --cta-grad-start: #9fd1ff;
    --cta-grad-end: #4c99f2;
    --footer: #cbd8ea;
    --footer-link: #edf5ff;
    --footer-underline: rgba(255, 255, 255, 0.34);
    --footer-underline-hover: #ffffff;
    --globe-sphere: #22385c;
    --globe-accent: #7cb5ff;
}

body {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    text-align: center;
}

.globe {
    width: 280px;
    height: 280px;
    min-width: 280px;
    min-height: 280px;
    margin: -0.5rem 0;
    background-color: var(--globe-card);
    border-radius: 24%;
    position: relative;
    overflow: hidden;
    touch-action: none;
    contain: layout paint style;
    opacity: 0;
    transform: translateY(8px) scale(0.995);
    animation: fadeInUp 520ms cubic-bezier(0.22, 1, 0.36, 1) 60ms forwards;
}

.globe canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(8px);
    animation: fadeInUp 520ms cubic-bezier(0.22, 1, 0.36, 1) 140ms forwards;
}

.title {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: var(--text);
    margin: 0;
}

.tagline {
    font-size: 1rem;
    font-weight: 400;
    color: var(--tagline);
    max-width: 28rem;
    line-height: 1.5;
}

.tagline-brand {
    color: var(--tagline-brand);
}

.cta-button {
    font-family: 'Geist Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 0.95rem;
    border-radius: 50px;
    color: var(--cta-text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    background: linear-gradient(180deg, var(--cta-grad-start) 0%, var(--cta-grad-end) 100%);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    opacity: 0;
    transform: translateY(8px);
    animation: fadeInUp 520ms cubic-bezier(0.22, 1, 0.36, 1) 220ms forwards;
}

.cta-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.14);
    filter: brightness(1.02);
}

.cta-button:active {
    transform: translateY(0);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.18);
}

.footer {
    font-family: 'Geist Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
    padding: 1.5rem 2rem;
    text-align: center;
    color: var(--footer);
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    opacity: 0;
    transform: translateY(6px);
    animation: fadeInUp 560ms cubic-bezier(0.22, 1, 0.36, 1) 300ms forwards;
}

.footer a {
    color: var(--footer-link);
    text-decoration: none;
    border-bottom: 1px solid var(--footer-underline);
    transition: border-color 0.2s ease;
}

.footer a:visited {
    color: var(--footer-link);
}

.footer a:hover {
    border-bottom-color: var(--footer-underline-hover);
}

.footer-sep {
    opacity: 0.5;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 640px) {
    .globe {
        width: 220px;
        height: 220px;
    }

    .title {
        font-size: 1.75rem;
    }

    .cta-button {
        font-size: 0.85rem;
        padding: 0.6rem 0.9rem;
    }

    .footer {
        gap: 0.375rem;
        flex-wrap: wrap;
    }

}

@media (prefers-reduced-motion: reduce) {
    .globe,
    .title-block,
    .cta-button,
    .footer {
        animation: none;
        opacity: 1;
        transform: none;
    }
}