/* assets/styles/front/10-home-foundation.css */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;1,700;1,800&family=Space+Grotesk:wght@400;500;600;700&display=swap");

.front-homepage {
    --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%);
    --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 74% 4%,
            rgb(66 245 230 / 8%),
            transparent 25rem
        ),
        radial-gradient(
            circle at 14% 30%,
            rgb(242 59 210 / 8%),
            transparent 28rem
        ),
        var(--codex-ink);
    color: var(--codex-paper);
    font-family: var(--codex-font-body);
}

.front-homepage .site-main {
    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;
}

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

.front-homepage .site-main {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.home-page {
    flex: 1;
    min-height: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--codex-cyan, var(--primary-color));
    background: var(--codex-ink, var(--surface-bg));
    color: var(--codex-paper, var(--text-color));
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform 160ms ease;
}

.skip-link:focus {
    color: var(--codex-paper, var(--text-color));
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .skip-link {
        transition: none;
    }
}