/* Quivv landing page — Deep Arctic. Tokens trace to DESIGN.md §2.1. */

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

html {
    height: 100%;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;

    /* Ground + the standardized hero lighting shared with the marketing site */
    background:
        radial-gradient(ellipse 60% 50% at 15% 0%, rgba(215, 226, 255, 0.14), transparent 70%),
        radial-gradient(ellipse 50% 60% at 100% 100%, rgba(99, 128, 191, 0.1), transparent 70%),
        #051125;
    background-attachment: fixed;

    font-family: Inter, system-ui, -apple-system, sans-serif;
    color: #ffffff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Signal network sits behind everything and never takes a click. */
#signal-network {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.masthead {
    position: relative;
    z-index: 1;
    padding: 2rem 2.5rem;
}

.logo {
    display: block;
    height: 30px;
    width: auto;
}

.stage {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem 1.5rem;
}

.content {
    width: 100%;
    max-width: 640px;
    text-align: center;
}

/* Manrope is display only — DESIGN.md §3.1 */
.headline {
    font-family: Manrope, system-ui, sans-serif;
    font-size: clamp(1.75rem, 4.5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #ffffff;
}

/* The canvas reads this box to place the convergence point. */
.core-anchor {
    display: block;
    width: 1px;
    height: 1px;
    margin: 2.25rem auto;
}

/* ---- Building → Launch ---------------------------------------------- */

.launch {
    max-width: 420px;
    margin: 0 auto;
}

.launch__labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.launch__label {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(139, 156, 192, 0.65);
}

/* Brighter, because it is the destination. */
.launch__label--end {
    color: rgba(215, 226, 255, 0.85);
}

.launch__track {
    position: relative;
    height: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.launch__fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 1px;
    background: linear-gradient(90deg, rgba(215, 226, 255, 0.15), rgba(215, 226, 255, 0.85));
    transition: width 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.launch__dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d7e2ff;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 0 4px rgba(215, 226, 255, 0.12),
        0 0 14px 2px rgba(215, 226, 255, 0.45);
    transition: left 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.launch__dot::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(215, 226, 255, 0.45), rgba(215, 226, 255, 0) 70%);
    animation: breathe 3500ms ease-in-out infinite alternate;
}

/* The dot rides the line as it builds. */
.launch.is-live .launch__fill {
    width: 70%;
}

.launch.is-live .launch__dot {
    left: 70%;
}

@keyframes breathe {
    from {
        opacity: 0.7;
    }
    to {
        opacity: 1;
    }
}

/* ---- CTA ------------------------------------------------------------- */

/* Sits in the lower third rather than on the floor. The bottom offset is
   proportional, so the gap above and below the button stay in step as the
   viewport grows instead of the button pinning itself to the bottom edge. */
.cta-bar {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 0 1.5rem clamp(2.5rem, 19vh, 15rem);
}

/* Inverse variant: the gradient primary would vanish on this ground.
   Mirrors quivv-marketing src/components/ui/Button.tsx. */
.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    background: #ffffff;
    color: #051125;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 150ms ease-out;
}

.cta:hover {
    background: #d7e2ff;
}

/* #545e76 is the light-surface focus token; on this ground it is invisible. */
:focus-visible {
    outline: 2px solid #d7e2ff;
    outline-offset: 2px;
}

/* ---- Responsive ------------------------------------------------------ */

@media (max-width: 767px) {
    .masthead {
        padding: 1.5rem;
    }

    .logo {
        height: 24px;
    }

    .stage {
        padding: 0 1.25rem 1.25rem;
    }

    .core-anchor {
        margin: 1.75rem auto;
    }

    .launch {
        max-width: 300px;
    }

    .launch__label {
        font-size: 0.625rem;
        letter-spacing: 0.12em;
    }

    .cta-bar {
        padding: 0 1.25rem clamp(2rem, 18vh, 10rem);
    }

    /* Sized to its label, not stretched across the viewport. */
    .cta {
        padding: 0.8125rem 1.75rem;
        font-size: 0.9375rem;
    }
}

/* ---- Reduced motion --------------------------------------------------
   The canvas still paints one static frame; only the motion is dropped. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}