/*
========================================================

    GENESIS CODEX
    GCAβ — Gigachad Alpha (Still Beta)

    Production Stylesheet
    Pure CSS3

========================================================
*/


/* ======================================================
   ROOT SYSTEM
====================================================== */


:root {

    --obsidian:
        #05070c;

    --void:
        #020308;

    --surface:
        rgba(255, 255, 255, 0.035);

    --surface-light:
        rgba(255, 255, 255, 0.06);

    --line:
        rgba(255, 255, 255, 0.09);

    --text:
        #f4f7ff;

    --text-soft:
        rgba(244, 247, 255, 0.68);

    --text-muted:
        rgba(244, 247, 255, 0.42);

    --blue:
        #67b8ff;

    --blue-soft:
        rgba(103, 184, 255, 0.25);

    --gold:
        #d6b36a;

    --beta-glow:
        rgba(103, 184, 255, 0.65);

    --max-width:
        1280px;

    --section-padding:
        clamp(5rem, 12vw, 12rem);

    --radius:
        24px;

    --transition:
        500ms cubic-bezier(.22, 1, .36, 1);

}





/* ======================================================
   RESET
====================================================== */


*,
*::before,
*::after {

    box-sizing:
        border-box;

}



html {

    scroll-behavior:
        smooth;

    background:
        var(--obsidian);

}



body {

    margin:
        0;

    min-height:
        100vh;

    background:
        var(--obsidian);

    color:
        var(--text);

    font-family:

        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        Helvetica,
        Arial,
        sans-serif;

    overflow-x:
        hidden;

    text-rendering:
        optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

}





img,
svg {

    max-width:
        100%;

    display:
        block;

}



a {

    color:
        inherit;

    text-decoration:
        none;

}



button {

    font:
        inherit;

}





/* ======================================================
   LOADING CHAMBER
====================================================== */


.genesis-loader {

    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--void);

    transition:
        opacity 900ms ease,
        visibility 900ms ease;

}



.genesis-loader.hidden {

    opacity:
        0;

    visibility:
        hidden;

}



.loader-symbol {

    font-size:
        clamp(5rem, 12vw, 10rem);

    font-weight:
        300;

    color:
        var(--blue);

    text-shadow:

        0 0 40px var(--beta-glow),
        0 0 100px rgba(103,184,255,.25);

    animation:

        loaderPulse 2.8s infinite ease-in-out;

}



.loader-line {

    width:
        180px;

    height:
        1px;

    margin-top:
        2rem;

    background:

        linear-gradient(

            90deg,

            transparent,

            var(--blue),

            transparent

        );

    animation:

        loaderScan 2s infinite ease;

}



.genesis-loader p {

    margin-top:
        1.5rem;

    color:
        var(--text-muted);

    font-size:
        .75rem;

    letter-spacing:
        .35em;

    text-transform:
        uppercase;

}





@keyframes loaderPulse {


    0%,
    100% {

        transform:
            scale(.95);

        opacity:
            .65;

    }


    50% {

        transform:
            scale(1.05);

        opacity:
            1;

    }


}



@keyframes loaderScan {


    0% {

        transform:
            scaleX(.2);

        opacity:
            .3;

    }


    50% {

        transform:
            scaleX(1);

        opacity:
            1;

    }


    100% {

        transform:
            scaleX(.2);

        opacity:
            .3;

    }


}





/* ======================================================
   HEADER
====================================================== */


.site-header {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

    z-index:
        100;

    padding:
        1.5rem clamp(1.5rem, 5vw, 4rem);

    transition:
        background var(--transition),
        backdrop-filter var(--transition);

}



.site-header.scrolled {

    background:
        rgba(5,7,12,.65);

    backdrop-filter:
        blur(20px);

    border-bottom:
        1px solid var(--line);

}



.navigation {

    max-width:
        var(--max-width);

    margin:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}



.brand {

    font-size:
        1.4rem;

    font-weight:
        600;

    letter-spacing:
        -.04em;

}



.brand span {

    color:
        var(--blue);

    text-shadow:
        0 0 18px var(--beta-glow);

}



.nav-links {

    display:
        flex;

    gap:
        2.5rem;

}



.nav-links a {

    position:
        relative;

    color:
        var(--text-soft);

    font-size:
        .9rem;

    transition:
        color var(--transition);

}



.nav-links a:hover {

    color:
        var(--text);

}



.nav-links a::after {

    content:
        "";

    position:
        absolute;

    bottom:
        -.5rem;

    left:
        0;

    width:
        100%;

    height:
        1px;

    background:
        var(--blue);

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform var(--transition);

}



.nav-links a:hover::after {

    transform:
        scaleX(1);

}

/* ======================================================
   MOBILE NAVIGATION
====================================================== */


.menu-toggle {

    display:
        none;

    width:
        42px;

    height:
        42px;

    border:
        1px solid var(--line);

    background:
        transparent;

    border-radius:
        50%;

    cursor:
        pointer;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        6px;

}



.menu-toggle span {

    width:
        16px;

    height:
        1px;

    background:
        var(--text);

    transition:
        transform var(--transition);

}





/* ======================================================
   GLOBAL CHAPTER SYSTEM
====================================================== */


.chapter {

    position:
        relative;

    min-height:
        100vh;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    padding:
        var(--section-padding) clamp(1.5rem, 5vw, 4rem);

}



.section-container {

    position:
        relative;

    width:
        min(100%, var(--max-width));

    margin:
        auto;

}



.section-header {

    max-width:
        900px;

    margin-bottom:
        clamp(3rem, 8vw, 7rem);

}



.eyebrow {

    margin:
        0 0 1.5rem;

    color:
        var(--blue);

    font-size:
        .72rem;

    font-weight:
        500;

    letter-spacing:
        .45em;

    text-transform:
        uppercase;

}



.section-header h2 {

    margin:
        0;

    font-size:
        clamp(3rem, 7vw, 7rem);

    line-height:
        .95;

    letter-spacing:
        -.07em;

    font-weight:
        500;

}


#particle-field {

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:0;

}


main,
.site-header,
.site-footer {

    position:relative;

    z-index:2;

}


/* ======================================================
   ARRIVAL / HERO
====================================================== */

.genesis-opening {

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

}


.opening-beta {

    font-size:
        clamp(15rem,35vw,35rem);

    font-weight:200;

    color:#67b8ff;

    opacity:.9;

    text-shadow:
        0 0 80px rgba(103,184,255,.7);

    animation:
        breathe 8s infinite ease-in-out;

}


.opening-core p {

    text-align:center;

    letter-spacing:.5em;

    text-transform:uppercase;

    color:
        rgba(255,255,255,.5);

}



@keyframes breathe {

    0%,100% {

        transform:scale(.96);

    }


    50% {

        transform:scale(1.04);

    }

}


.chapter-arrival {

    min-height:
        100svh;

    justify-content:
        center;

}



.ambient-grid {

    position:
        absolute;

    inset:
        0;

    opacity:
        .35;

    background-image:

        linear-gradient(
            rgba(103,184,255,.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(103,184,255,.06) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 70%
        );

}



.energy-core {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        min(75vw, 850px);

    aspect-ratio:
        1;

    transform:
        translate(-50%, -50%);

    pointer-events:
        none;

}



.beta-ring {

    position:
        absolute;

    inset:
        10%;

    border-radius:
        50%;

    border:

        1px solid
        rgba(103,184,255,.15);

    animation:

        rotateSlow 40s linear infinite;

}



.beta-ring::before {

    content:
        "";

    position:
        absolute;

    inset:
        15%;

    border-radius:
        inherit;

    border:

        1px solid
        rgba(103,184,255,.1);

}



.beta-symbol {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        clamp(18rem, 40vw, 35rem);

    font-weight:
        200;

    color:
        rgba(103,184,255,.08);

    text-shadow:

        0 0 80px rgba(103,184,255,.2);

}



.hero-content {

    position:
        relative;

    z-index:
        2;

    text-align:
        center;

    max-width:
        900px;

}



.hero-content h1 {

    margin:
        0;

    font-size:
        clamp(7rem, 22vw, 18rem);

    line-height:
        .8;

    font-weight:
        500;

    letter-spacing:
        -.1em;

}



.hero-content h1 .symbol {

    color:
        var(--blue);

    text-shadow:

        0 0 40px var(--beta-glow),
        0 0 120px rgba(103,184,255,.35);

}



.hero-content h2 {

    margin:
        2rem 0;

    font-size:
        clamp(1.8rem, 4vw, 3rem);

    line-height:
        1.1;

    font-weight:
        400;

    letter-spacing:
        -.04em;

}



.hero-content h2 span {

    color:
        var(--text-muted);

}



.hero-description {

    max-width:
        620px;

    margin:
        0 auto;

    color:
        var(--text-soft);

    font-size:
        clamp(1rem, 1.5vw, 1.25rem);

    line-height:
        1.8;

}





/* ======================================================
   BUTTON SYSTEM
====================================================== */


.hero-actions,
.join-actions {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        1rem;

    margin-top:
        3rem;

}



.primary-button,
.secondary-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        56px;

    padding:
        0 2rem;

    border-radius:
        999px;

    font-size:
        .9rem;

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition);

}



.primary-button {

    background:
        var(--text);

    color:
        var(--obsidian);

}



.primary-button:hover {

    transform:
        translateY(-3px);

}



.secondary-button {

    border:
        1px solid var(--line);

    color:
        var(--text);

    background:
        rgba(255,255,255,.02);

}



.secondary-button:hover {

    border-color:
        rgba(103,184,255,.5);

    background:
        rgba(103,184,255,.08);

}



.scroll-indicator {

    position:
        absolute;

    bottom:
        3rem;

    left:
        50%;

    transform:
        translateX(-50%);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        1rem;

}



.scroll-indicator span {

    width:
        1px;

    height:
        60px;

    background:
        linear-gradient(
            transparent,
            var(--blue)
        );

}



.scroll-indicator p {

    margin:
        0;

    font-size:
        .65rem;

    letter-spacing:
        .4em;

    text-transform:
        uppercase;

    color:
        var(--text-muted);

}





@keyframes rotateSlow {

    from {

        transform:
            rotate(0deg);

    }


    to {

        transform:
            rotate(360deg);

    }

}

/* ======================================================
   DISCOVERY SECTION
====================================================== */


.chapter-discovery {

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(103,184,255,.025),
            transparent
        );

}



.manifesto-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        1.5rem;

}



.manifesto-card {

    position:
        relative;

    padding:
        clamp(2rem, 4vw, 3.5rem);

    min-height:
        360px;

    border:
        1px solid var(--line);

    border-radius:
        var(--radius);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.015)
        );

    backdrop-filter:
        blur(20px);

    transition:
        transform var(--transition),
        border-color var(--transition);

}



.manifesto-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(103,184,255,.35);

}



.card-index {

    display:
        block;

    margin-bottom:
        3rem;

    color:
        var(--blue);

    font-size:
        .75rem;

    letter-spacing:
        .3em;

}



.manifesto-card h3 {

    margin:
        0 0 1.5rem;

    font-size:
        clamp(1.4rem, 2vw, 2rem);

    letter-spacing:
        -.04em;

}



.manifesto-card p {

    margin:
        0;

    color:
        var(--text-soft);

    line-height:
        1.8;

}





/* ======================================================
   ACCUMULATION SECTION
====================================================== */


.chapter-accumulation {

    background:
        radial-gradient(
            circle at center,
            rgba(103,184,255,.08),
            transparent 45%
        );

}



.accumulation-layout {

    display:
        grid;

    grid-template-columns:
        .8fr 1fr;

    align-items:
        center;

    gap:
        clamp(3rem, 8vw, 8rem);

}



.accumulation-symbol {

    position:
        relative;

    aspect-ratio:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}



.orbit {

    position:
        absolute;

    border-radius:
        50%;

    border:
        1px solid rgba(103,184,255,.2);

}



.orbit-one {

    inset:
        5%;

    animation:
        rotateSlow 35s linear infinite;

}



.orbit-two {

    inset:
        20%;

    border-color:
        rgba(214,179,106,.25);

    animation:
        rotateSlow 20s linear reverse infinite;

}



.core-symbol {

    font-size:
        clamp(8rem, 18vw, 14rem);

    font-weight:
        200;

    color:
        var(--blue);

    text-shadow:

        0 0 50px var(--beta-glow),
        0 0 120px rgba(103,184,255,.3);

}



.accumulation-text {

    color:
        var(--text-soft);

    font-size:
        1.1rem;

    line-height:
        1.9;

}



.accumulation-text .large-text {

    font-size:
        clamp(1.5rem, 3vw, 2.5rem);

    line-height:
        1.4;

    color:
        var(--text);

    letter-spacing:
        -.04em;

}



.accumulation-text strong {

    color:
        var(--blue);

    font-weight:
        500;

}





/* ======================================================
   PRINCIPLES
====================================================== */


.principles {

    display:
        flex;

    flex-direction:
        column;

}



.principle {

    display:
        grid;

    grid-template-columns:
        120px 1fr;

    gap:
        2rem;

    padding:
        3rem 0;

    border-bottom:
        1px solid var(--line);

}



.principle-number {

    font-size:
        2rem;

    color:
        var(--gold);

    font-weight:
        300;

}



.principle h3 {

    margin:
        0 0 1rem;

    font-size:
        clamp(1.5rem, 3vw, 2.5rem);

    font-weight:
        400;

    letter-spacing:
        -.05em;

}



.principle p {

    max-width:
        650px;

    margin:
        0;

    color:
        var(--text-soft);

    line-height:
        1.8;

}





/* ======================================================
   TIMELINE
====================================================== */


.chapter-timeline {

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,255,255,.015)
        );

}



.timeline-track {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    gap:
        4rem;

}



.timeline-track::before {

    content:
        "";

    position:
        absolute;

    left:
        23px;

    top:
        20px;

    bottom:
        20px;

    width:
        1px;

    background:
        linear-gradient(
            transparent,
            rgba(103,184,255,.5),
            transparent
        );

}



.timeline-entry {

    display:
        grid;

    grid-template-columns:
        48px 1fr;

    gap:
        2rem;

}



.timeline-marker {

    width:
        48px;

    height:
        48px;

    border-radius:
        50%;

    border:
        1px solid rgba(103,184,255,.4);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--obsidian);

    color:
        var(--blue);

    position:
        relative;

    z-index:
        2;

}



.timeline-stage {

    margin:
        0 0 .8rem;

    color:
        var(--blue);

    font-size:
        .75rem;

    letter-spacing:
        .3em;

    text-transform:
        uppercase;

}



.timeline-content h3 {

    margin:
        0 0 1rem;

    font-size:
        clamp(1.5rem, 3vw, 2.4rem);

    font-weight:
        400;

    letter-spacing:
        -.04em;

}



.timeline-content p:last-child {

    color:
        var(--text-soft);

    line-height:
        1.8;

}

/* ======================================================
   JOIN SECTION
====================================================== */


.chapter-join {

    background:
        radial-gradient(
            circle at center,
            rgba(103,184,255,.08),
            transparent 50%
        );

}



.join-panel {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        .8fr 1fr;

    align-items:
        center;

    gap:
        clamp(3rem, 8vw, 8rem);

    padding:
        clamp(2rem, 5vw, 5rem);

    border:
        1px solid var(--line);

    border-radius:
        calc(var(--radius) * 1.5);

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.015)
        );

    overflow:
        hidden;

}



.join-panel::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    top:
        50%;

    left:
        10%;

    transform:
        translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(103,184,255,.18),
            transparent 65%
        );

    pointer-events:
        none;

}



.join-emblem {

    position:
        relative;

    aspect-ratio:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}



.join-ring {

    position:
        absolute;

    inset:
        8%;

    border-radius:
        50%;

    border:

        1px solid
        rgba(103,184,255,.25);

    animation:

        rotateSlow 30s linear infinite;

}



.join-ring::after {

    content:
        "";

    position:
        absolute;

    inset:
        20%;

    border-radius:
        inherit;

    border:

        1px solid
        rgba(214,179,106,.25);

}



.join-beta {

    position:
        relative;

    font-size:
        clamp(8rem, 18vw, 14rem);

    font-weight:
        200;

    color:
        var(--blue);

    text-shadow:

        0 0 60px var(--beta-glow),
        0 0 140px rgba(103,184,255,.35);

}



.join-content h3 {

    margin:
        0 0 2rem;

    font-size:
        clamp(2.5rem, 6vw, 5rem);

    line-height:
        .95;

    font-weight:
        400;

    letter-spacing:
        -.07em;

}



.join-content p {

    max-width:
        600px;

    color:
        var(--text-soft);

    font-size:
        1.1rem;

    line-height:
        1.9;

}





/* ======================================================
   FINAL CHAMBER
====================================================== */


.chapter-beginning {

    min-height:
        90vh;

    justify-content:
        center;

    text-align:
        center;

}



.final-chamber {

    max-width:
        900px;

}



.final-symbol {

    margin-bottom:
        3rem;

    font-size:
        clamp(8rem, 20vw, 16rem);

    font-weight:
        200;

    color:
        rgba(103,184,255,.15);

    text-shadow:

        0 0 80px rgba(103,184,255,.3);

}



.final-chamber h2 {

    margin:
        0 0 2rem;

    font-size:
        clamp(3rem, 8vw, 8rem);

    line-height:
        .9;

    letter-spacing:
        -.08em;

    font-weight:
        500;

}



.final-chamber p:not(.eyebrow) {

    max-width:
        600px;

    margin:
        0 auto;

    color:
        var(--text-soft);

    font-size:
        1.15rem;

    line-height:
        1.8;

}





/* ======================================================
   FOOTER
====================================================== */


.site-footer {

    border-top:
        1px solid var(--line);

    padding:
        4rem clamp(1.5rem, 5vw, 4rem);

}



.footer-inner {

    max-width:
        var(--max-width);

    margin:
        auto;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

    gap:
        1.5rem;

}



.footer-brand {

    font-size:
        2rem;

    font-weight:
        500;

    letter-spacing:
        -.05em;

}



.footer-brand span {

    color:
        var(--blue);

}



.footer-inner p {

    margin:
        0;

    color:
        var(--text-muted);

    line-height:
        1.8;

}



.footer-links {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        2rem;

}



.footer-links a {

    color:
        var(--text-soft);

    font-size:
        .9rem;

    transition:
        color var(--transition);

}



.footer-links a:hover {

    color:
        var(--blue);

}



.copyright {

    font-size:
        .8rem;

}





/* ======================================================
   REVEAL ANIMATIONS
====================================================== */


.reveal {

    opacity:
        0;

    transform:
        translateY(40px);

    transition:

        opacity 900ms cubic-bezier(.22,1,.36,1),
        transform 900ms cubic-bezier(.22,1,.36,1);

}



.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);

}





/* ======================================================
   PERFORMANCE
====================================================== */


.energy-core,
.beta-ring,
.orbit,
.join-ring {

    will-change:
        transform;

}





/* ======================================================
   RESPONSIVE TABLET
====================================================== */


@media (max-width: 900px) {


    .manifesto-grid {

        grid-template-columns:
            1fr;

    }



    .accumulation-layout,
    .join-panel {

        grid-template-columns:
            1fr;

    }



    .accumulation-symbol,
    .join-emblem {

        max-width:
            420px;

        margin:
            auto;

    }



    .principle {

        grid-template-columns:
            70px 1fr;

    }


}

/* ======================================================
   RESPONSIVE MOBILE SYSTEM
====================================================== */


@media (max-width: 700px) {



    :root {

        --section-padding:
            5rem;

    }



    .site-header {

        padding:
            1.25rem 1.25rem;

    }



    .menu-toggle {

        display:
            flex;

    }



    .nav-links {

        position:
            fixed;

        top:
            0;

        right:
            0;

        width:
            min(85vw, 360px);

        height:
            100svh;

        padding:
            7rem 2rem 2rem;

        flex-direction:
            column;

        gap:
            1.8rem;

        background:

            rgba(5,7,12,.92);

        backdrop-filter:
            blur(30px);

        border-left:
            1px solid var(--line);

        transform:
            translateX(100%);

        transition:
            transform var(--transition);

    }



    .nav-links.active {

        transform:
            translateX(0);

    }



    .nav-links a {

        font-size:
            1.2rem;

    }



    .menu-toggle.active span:first-child {

        transform:
            translateY(3.5px)
            rotate(45deg);

    }



    .menu-toggle.active span:last-child {

        transform:
            translateY(-3.5px)
            rotate(-45deg);

    }





    .chapter {

        padding:
            5rem 1.25rem;

    }



    .hero-content h1 {

        font-size:
            clamp(5rem, 28vw, 9rem);

    }



    .hero-content h2 {

        margin-top:
            1.5rem;

    }



    .hero-actions,
    .join-actions {

        flex-direction:
            column;

        width:
            100%;

    }



    .primary-button,
    .secondary-button {

        width:
            100%;

    }



    .beta-symbol {

        font-size:
            15rem;

    }



    .energy-core {

        width:
            130vw;

    }



    .section-header h2 {

        font-size:
            clamp(2.8rem, 14vw, 4.5rem);

    }



    .manifesto-card {

        min-height:
            auto;

        padding:
            2rem;

    }



    .card-index {

        margin-bottom:
            2rem;

    }



    .accumulation-symbol {

        margin-bottom:
            2rem;

    }



    .accumulation-text {

        font-size:
            1rem;

    }



    .principle {

        grid-template-columns:
            1fr;

        gap:
            1rem;

        padding:
            2rem 0;

    }



    .principle-number {

        font-size:
            1.5rem;

    }



    .timeline-entry {

        grid-template-columns:
            40px 1fr;

        gap:
            1rem;

    }



    .timeline-track::before {

        left:
            19px;

    }



    .timeline-marker {

        width:
            40px;

        height:
            40px;

        font-size:
            .85rem;

    }



    .join-panel {

        padding:
            2rem 1.5rem;

    }



    .join-content h3 {

        font-size:
            clamp(2.5rem, 13vw, 4rem);

    }



    .join-content p {

        font-size:
            1rem;

    }



    .final-chamber h2 {

        font-size:
            clamp(3rem, 15vw, 5rem);

    }



    .footer-links {

        flex-direction:
            column;

        gap:
            1rem;

    }



}







/* ======================================================
   SMALL DEVICE OPTIMIZATION
====================================================== */


@media (max-width: 420px) {



    .hero-content h1 {

        font-size:
            5rem;

    }



    .hero-description {

        font-size:
            .95rem;

    }



    .loader-symbol {

        font-size:
            5rem;

    }



    .timeline-content h3 {

        font-size:
            1.5rem;

    }



}







/* ======================================================
   ACCESSIBILITY
====================================================== */


@media (prefers-reduced-motion: reduce) {



    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

    }



}





/* ======================================================
   FOCUS STATES
====================================================== */


a:focus-visible,
button:focus-visible {

    outline:

        2px solid var(--blue);

    outline-offset:

        6px;

}







/* ======================================================
   SELECTION
====================================================== */


::selection {

    background:
        rgba(103,184,255,.25);

    color:
        var(--text);

}







/* ======================================================
   FINAL ATMOSPHERIC LAYERS
====================================================== */


body::before {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    z-index:
        999;

    background:

        radial-gradient(
            circle at center,
            transparent 40%,
            rgba(0,0,0,.45)
            100%
        );

}



body::after {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    z-index:
        998;

    opacity:
        .025;

    background-image:

        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");

}







/* ======================================================
   END OF GENESIS STYLESHEET
====================================================== */