/* assets/styles/front/20-cosmos-foundation.css */

.front-cosmos-page {
    --codex-ink: #080514;
    --codex-ink-soft: #120a26;
    --codex-panel: #17102f;
    --codex-cyan: #42f5e6;
    --codex-magenta: #f23bd2;
    --codex-gold: #f4c95d;
    --codex-paper: #f7f4ff;
    --codex-muted: #a79dbf;
    --codex-line: rgb(167 157 191 / 20%);

    --cosmos-solar: #e8604c;
    --cosmos-lunar: #d8b45b;
    --cosmos-stellar: #62bce8;
    --cosmos-legendary: #b477ff;

    --codex-font-body:
        "Space Grotesk",
        Arial,
        sans-serif;

    --codex-font-display:
        "Barlow Condensed",
        Impact,
        sans-serif;

    min-width: 320px;
    overflow-x: hidden;
    background:
        radial-gradient(
            circle at 76% 4%,
            rgb(66 245 230 / 8%),
            transparent 25rem
        ),
        radial-gradient(
            circle at 12% 28%,
            rgb(242 59 210 / 8%),
            transparent 28rem
        ),
        var(--codex-ink);
    color: var(--codex-paper);
    font-family: var(--codex-font-body);
}

.front-cosmos-page .app-shell {
    min-height: 100svh;
}

.front-cosmos-page .site-main {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    background-image:
        linear-gradient(
            rgb(66 245 230 / 2.5%) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgb(66 245 230 / 2.5%) 1px,
            transparent 1px
        );
    background-size: 72px 72px;
}

.cosmos-page {
    min-width: 0;
    flex: 1;
}

/* Page hero */

.cosmos-hero {
    position: relative;
    width: 100%;
    border-bottom:
        1px solid
        rgb(66 245 230 / 18%);
    overflow: hidden;
    background:
        radial-gradient(
            circle at 8% 38%,
            rgb(242 59 210 / 11%),
            transparent 29rem
        ),
        radial-gradient(
            circle at 86% 4%,
            rgb(66 245 230 / 10%),
            transparent 32rem
        ),
        linear-gradient(
            105deg,
            var(--codex-ink) 0%,
            var(--codex-ink-soft) 100%
        );
    isolation: isolate;
}

.cosmos-hero::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--codex-cyan) 46%,
            var(--codex-magenta) 72%,
            transparent
        );
    content: "";
    opacity: 0.45;
}

.cosmos-hero__frame {
    position: relative;
    display: flex;
    width: min(100%, 1920px);
    min-height: 20rem;
    margin: 0 auto;
    overflow: hidden;
    align-items: center;
    isolation: isolate;
}

.cosmos-hero__orbit {
    position: absolute;
    z-index: -1;
    top: -8rem;
    right: -9rem;
    width: 22rem;
    height: 22rem;
    border:
        1px solid
        rgb(66 245 230 / 12%);
    border-radius: 50%;
    pointer-events: none;
    box-shadow:
        0 0 0 3rem
        rgb(66 245 230 / 2.5%),
        0 0 0 6.5rem
        rgb(242 59 210 / 2.5%);
}

.cosmos-hero__orbit::before {
    position: absolute;
    inset: 3.5rem;
    border:
        1px solid
        rgb(242 59 210 / 9%);
    border-radius: 50%;
    content: "";
}

.cosmos-hero__content {
    position: relative;
    z-index: 1;
    width: min(
        calc(100% - 2.25rem),
        108rem
    );
    margin: 0 auto;
    padding:
        3.75rem
        0
        4rem;
}

.cosmos-hero__eyebrow {
    display: inline-flex;
    margin:
        0
        0
        1.1rem;
    align-items: center;
    gap: 0.55rem;
    color: var(--codex-magenta);
    font-family: var(--codex-font-display);
    font-size: 0.82rem;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.2;
    text-transform: uppercase;
}

.cosmos-hero__eyebrow::after {
    width: 2.9rem;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            var(--codex-magenta),
            transparent
        );
    content: "";
}

.cosmos-hero__eyebrow > span:first-child {
    color: var(--codex-magenta);
    font-size: 0.95rem;
}

.cosmos-hero h1 {
    max-width: 46rem;
    margin: 0;
    color: var(--codex-paper);
    font-family: var(--codex-font-display);
    font-size:
        clamp(
            3.75rem,
            18vw,
            5.75rem
        );
    font-style: italic;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 0.84;
    text-transform: uppercase;
}

.cosmos-hero__introduction {
    max-width: 42rem;
    margin:
        1.4rem
        0
        0;
    color: var(--codex-muted);
    font-size: 0.82rem;
    line-height: 1.75;
}

@media (min-width: 48rem) {
    .cosmos-hero__frame {
        min-height: 23rem;
    }

    .cosmos-hero__orbit {
        top: -11rem;
        right: -7rem;
        width: 29rem;
        height: 29rem;
        box-shadow:
            0 0 0 4rem
            rgb(66 245 230 / 2.5%),
            0 0 0 8rem
            rgb(242 59 210 / 2%);
    }

    .cosmos-hero__content {
        width: min(
            calc(100% - 8vw),
            108rem
        );
        padding:
            5rem
            0;
    }

    .cosmos-hero__eyebrow {
        font-size: 0.9rem;
    }

    .cosmos-hero h1 {
        font-size:
            clamp(
                5.5rem,
                10vw,
                7.5rem
            );
    }

    .cosmos-hero__introduction {
        font-size: 0.9rem;
    }
}

@media (min-width: 75rem) {
    .cosmos-hero__frame {
        min-height: 25rem;
    }

    .cosmos-hero__orbit {
        top: -13rem;
        right: -5rem;
        width: 34rem;
        height: 34rem;
    }

    .cosmos-hero__content {
        padding:
            5.5rem
            0
            5.75rem;
    }

    .cosmos-hero h1 {
        font-size: 7.75rem;
    }

    .cosmos-hero__introduction {
        max-width: 46rem;
        font-size: 0.94rem;
    }
}