/* Clion Studios landing page.
   Deep-water palette: the page should feel like looking down from the surface,
   with the mascot lit as the only thing in focus. */

:root {
    --abyss: #04121c;
    --deep: #0a2233;
    --surface: #123449;
    --foam: #e8f2f5;
    --muted: #8fa9b8;
    --kelp: #f0a04b;
    --kelp-bright: #ffb865;

    --frame: min(340px, 72vw);
}

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

html {
    height: 100%;
}

body {
    margin: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 1.25rem;

    background:
        radial-gradient(ellipse 80% 60% at 50% 18%, var(--surface) 0%, transparent 65%),
        linear-gradient(180deg, var(--deep) 0%, var(--abyss) 100%);
    background-color: var(--abyss);

    color: var(--foam);
    font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

.stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
}

.wordmark {
    margin: 0;
    font-size: clamp(1.75rem, 6vw, 2.75rem);
    font-weight: 600;
    /* Wide tracking reads as a mark rather than a heading. */
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    text-transform: uppercase;
    color: var(--foam);
}

/* The mascot sits in a fixed square regardless of the source aspect ratio. */
.portrait {
    width: var(--frame);
    height: var(--frame);
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid rgba(232, 242, 245, 0.14);
    box-shadow:
        0 0 0 6px rgba(4, 18, 28, 0.55),
        0 24px 60px rgba(0, 0, 0, 0.55);
}

.portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.coming-soon {
    margin: 0;
    font-size: clamp(0.95rem, 3vw, 1.15rem);
    font-weight: 500;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    text-transform: uppercase;
    color: var(--muted);
}

.interest {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    margin-top: 0.5rem;
}

.register-btn {
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kelp-bright);

    padding: 0.85rem 2rem;
    background: transparent;
    border: 1px solid rgba(240, 160, 75, 0.5);
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.register-btn:hover:not(:disabled) {
    background: rgba(240, 160, 75, 0.12);
    border-color: var(--kelp);
}

.register-btn:focus-visible {
    outline: 2px solid var(--kelp-bright);
    outline-offset: 3px;
}

.register-btn:disabled {
    cursor: default;
    color: var(--muted);
    border-color: rgba(143, 169, 184, 0.25);
}

/* Held after a successful registration, so the state is legible at a glance. */
.register-btn.registered {
    color: var(--foam);
    border-color: rgba(232, 242, 245, 0.3);
}

.tally {
    margin: 0;
    min-height: 1.2em;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.tally strong {
    color: var(--foam);
    font-weight: 600;
}

.tally.error {
    color: var(--kelp);
}

.footer {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(143, 169, 184, 0.55);
}

.footer p {
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
    }
}