/* FrostMath's coming-soon page: Home's column (Pages/Home) in Polar night, the app's default theme, on the design
   system's tokens (copied from tokens.css: this page ships without the app). Replaced by the game itself on the first
   deploy from main. */

@font-face {
    font-family: "Orbitron";
    src: url("/fonts/orbitron-latin-var.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Sora";
    src: url("/fonts/sora-latin-var.woff2") format("woff2");
    font-weight: 300 700;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --surface-0: #02080f;
    --surface-1: #050e1a;
    --surface-2: #091525;
    --ink-strong: #ffffff;
    --ink: #e8f4fd;
    --ink-muted: #b0c4d8;
    --ink-subtle: #7f9fb7;
    --ink-faint: #3a556b;
    --accent: #00e5ff;
    --accent-text: #00e5ff;
    --accent-soft: rgba(0, 229, 255, 0.08);
    --border: rgba(0, 229, 255, 0.16);
    --border-strong: rgba(0, 229, 255, 0.34);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-10: 40px;
    --touch-target: 44px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --ease-out: cubic-bezier(0.2, 0, 0, 1);
    --font-display: "Orbitron", monospace;
    --font-body: "Sora", sans-serif;
    color-scheme: dark;
}

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

html { background: var(--surface-0); }
body {
    margin: 0;
    min-height: 100dvh;
    background: radial-gradient(80% 40% at 50% 0%, var(--accent-soft), transparent 70%), var(--surface-0);
    color: var(--ink-muted);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

/* One language shows at a time; lang.js sets <html lang> before the first paint. */
html:lang(pt) [data-lang="en"],
html:not(:lang(pt)) [data-lang="pt"] { display: none; }

.snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

/* The language switch, top right, out of the column's flow. */
.lang {
    position: fixed;
    top: max(var(--space-2), env(safe-area-inset-top));
    right: max(var(--space-2), env(safe-area-inset-right));
    z-index: 2;
    display: flex;
    align-items: center;
}
.lang button {
    min-height: var(--touch-target);
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-subtle);
    font: 600 13px/1 var(--font-body);
    cursor: pointer;
}
.lang button:hover { color: var(--ink); }
.lang button[aria-pressed="true"] { color: var(--accent-text); }
.lang__dot { color: var(--ink-faint); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hero {
    position: relative;
    z-index: 1;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: calc(var(--space-10) + var(--touch-target)) var(--space-4) var(--space-10);
    text-align: center;
    animation: fade-up 220ms var(--ease-out) both;
}

.hero__mark { width: clamp(88px, 22vw, 140px); height: auto; animation: mark-breathe 3s ease-in-out infinite; }
/* A small phone (an SE, 568 px tall) keeps the column on one screen: a smaller mark, and none on a phone on its side. */
@media (max-height: 700px) { .hero__mark { width: 64px; } }
@media (max-height: 500px) { .hero__mark { display: none; } }

.hero__eyebrow { margin: 0; font: 700 12px/1.4 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--accent-text); }

/* The wordmark is text, "Frost" and "Math" in the accent, in the display face. */
.hero__wordmark {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 12vw, 96px);
    line-height: 1;
    letter-spacing: clamp(2px, 1vw, 8px);
    color: var(--ink-strong);
}
.hero__wordmark b { color: var(--accent); font-weight: 700; }

.hero__tagline { margin: 0; font: 600 16px/1.4 var(--font-body); letter-spacing: 0.5px; color: var(--ink-subtle); text-wrap: balance; }
.hero__lede { margin: 0; max-width: 60ch; font: 400 15px/1.55 var(--font-body); color: var(--ink-muted); text-wrap: balance; }

/* What is coming: a badge over the two steps, where Home has PLAY NOW. */
.soon {
    margin-top: var(--space-4);
    width: min(100%, 360px);
    padding: var(--space-4) var(--space-4) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface-1) 85%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}
.soon__badge {
    margin: 0;
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--space-2);
    border: 1px solid currentColor;
    border-radius: 4px;
    background: var(--surface-2);
    color: var(--accent-text);
    font: 700 12px/1 var(--font-body);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
}
.soon__steps { margin: 0; padding: 0; list-style: none; width: 100%; }
.soon__step {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-2);
    text-align: left;
}
.soon__step + .soon__step { border-top: 1px solid var(--border); }
.soon__month {
    flex: none;
    width: 3.2em;
    font: 700 18px/1 var(--font-display);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent);
}
.soon__what { display: flex; flex-direction: column; gap: 2px; }
.soon__name { font: 600 15px/1.3 var(--font-body); color: var(--ink); }
.soon__note { font: 500 12px/1.45 var(--font-body); color: var(--ink-subtle); }

@keyframes fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes mark-breathe {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }
    50%      { transform: scale(1.04); filter: drop-shadow(0 0 14px var(--accent-soft)); }
}

/* Short screens: less padding, so the column fits without a scroll. */
@media (max-height: 600px) {
    .hero { gap: var(--space-3); padding-block: var(--touch-target) var(--space-4); }
    .soon { margin-top: 0; }
    .soon__step { padding-block: var(--space-2); }
}
@media (max-height: 430px) {
    .hero { gap: var(--space-2); }
    .hero__wordmark { font-size: 48px; }
}

/* Reduced motion: nothing moves (the snow is stopped in snow.js). */
@media (prefers-reduced-motion: reduce) {
    .hero, .hero__mark { animation: none; }
}