/* ═══════════════════════════════════════════════════════════════════
   Umbra Network — public front door (/)

   Sections:
     1. Shell
     2. Brand
     3. Responsive

   Borrows the login's language rather than inventing one: the fragmented
   grid lives in umbra.css and is shared by selector. What is local here is
   the ambient glow and the size of the mark.

   Loaded without components.css -- this is the page a stranger downloads
   first, and nothing on it comes from that file.
   ─────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   1. SHELL
   ─────────────────────────────────────────────────────────────────── */

.landing-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-5);
    position: relative;
    overflow: hidden;

    /* Ambient glow */
    &::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: var(--z-deco);
        pointer-events: none;
        background:
            radial-gradient(circle at 20% 30%, var(--umbra-ambient-strong) 0%, transparent 50%),
            radial-gradient(circle at 80% 70%, var(--umbra-ambient-soft) 0%, transparent 50%);
    }
}

.landing-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════
   2. BRAND
   ─────────────────────────────────────────────────────────────────── */

/* The artwork comes from --umbra-logo, so the theme swaps it here and in the
   settings card at once. aspect-ratio reserves the box before the image
   arrives, so a cold cache does not make the mark jump into place; max-height
   is what holds it inside a short window, where contain shrinks it rather
   than cropping it. */
.landing-brand {
    position: relative;
    z-index: var(--z-base);
    width: min(86vw, 1040px);
    aspect-ratio: 2172 / 724;
    max-height: 62vh;
    background-image: var(--umbra-logo);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* ═══════════════════════════════════════════════════════════════════
   3. RESPONSIVE
   ─────────────────────────────────────────────────────────────────── */

/* The wordmark is three times wider than tall, so on a phone the limit is the
   screen's width and the padding is what it costs. */
@media (max-width: 768px) {
    .landing-page {
        padding: var(--space-6) var(--space-4);
    }

    .landing-brand {
        width: 92vw;
    }
}