/* =========================================
   GLOBAL
========================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
}

body {
    background: #050505;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

button,
a {
    font-family: inherit;
}


/* =========================================
   NAV
========================================= */

.top-bar {
    width: 100%;
    height: 92px;
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    z-index: 100;
}

.menu-button {
    position: absolute;
    left: 48px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    z-index: 110;
}

.menu-button span {
    display: block;
    width: 32px;
    height: 2px;
    margin: 8px 0;
    background: #222;
}

.dropdown-menu {
    position: absolute;
    top: 68px;
    left: 48px;
    width: 185px;
    display: flex;
    flex-direction: column;
    padding: 9px 0;
    background: white;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s;
    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, 0.18);
    z-index: 120;
}

.dropdown-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    padding: 12px 17px;
    color: black;
    text-decoration: none;
    font-size: 15px;
}

.dropdown-menu a:hover {
    background: #f2f2f2;
}

.nav-fiend {
    position: absolute;
    width: 112px;
    left: 50%;
    transform: translateX(-50%);
    animation:
        ride-in
        0.65s
        ease-out
        forwards;
}

@keyframes ride-in {

    from {
        left: 110%;
    }

    to {
        left: 50%;
    }

}


/* =========================================
   PAGE
========================================= */

.retreat-page {
    position: relative;

    min-height:
        calc(
            100vh - 92px
        );

    overflow: hidden;

    background:
        radial-gradient(
            circle at 70% 35%,
            rgba(145, 42, 181, 0.3),
            transparent 31%
        ),
        radial-gradient(
            circle at 94% 82%,
            rgba(30, 160, 110, 0.24),
            transparent 34%
        ),
        radial-gradient(
            circle at 20% 92%,
            rgba(71, 35, 108, 0.12),
            transparent 27%
        ),
        #050505;
}


/* =========================================
   PAGE AMBIENCE
========================================= */

.ambient-orb {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter:
        blur(95px);

    opacity: 0.3;

    animation:
        ambient-drift
        11s
        ease-in-out
        infinite
        alternate;
}

.ambient-orb-one {
    width: 380px;
    height: 380px;

    right: 9%;
    top: 7%;

    background:
        rgba(
            217,
            62,
            217,
            0.42
        );
}

.ambient-orb-two {
    width: 340px;
    height: 340px;

    right: -2%;
    bottom: -8%;

    background:
        rgba(
            43,
            208,
            141,
            0.31
        );

    animation-delay:
        -4s;
}

@keyframes ambient-drift {

    from {
        transform:
            translate(
                -25px,
                -15px
            )
            scale(0.92);
    }

    to {
        transform:
            translate(
                30px,
                28px
            )
            scale(1.15);
    }

}


/* =========================================
   MAIN SHELL
========================================= */

.retreat-shell {
    position: relative;

    width:
        min(
            1300px,
            calc(
                100% - 110px
            )
        );

    margin:
        0 auto;

    min-height:
        535px;

    padding:
        48px 0
        32px;

    display: grid;

    grid-template-columns:
        minmax(
            480px,
            1fr
        )
        minmax(
            360px,
            0.72fr
        );

    gap:
        clamp(
            60px,
            9vw,
            150px
        );

    align-items:
        center;

    z-index: 2;
}


/* =========================================
   TYPOGRAPHY
========================================= */

.eyebrow {
    margin:
        0 0 13px;

    color: #888;

    font-size: 11px;
    font-weight: 500;

    letter-spacing:
        0.24em;

    text-transform:
        uppercase;
}

.retreat-content h1 {
    margin: 0;

    max-width: 560px;

    font-size:
        clamp(
            56px,
            6vw,
            86px
        );

    line-height: 0.8;

    font-weight: 650;

    letter-spacing:
        -0.055em;
}

.retreat-content h1 span {
    display: block;
}

.tagline {
    margin:
        25px 0 0;

    font-size: 18px;

    font-weight: 500;

    color: #eeeeee;
}

.retreat-description {
    max-width:
        620px;

    margin:
        17px 0 0;

    color: #b0b0b0;

    font-size: 16px;

    line-height: 1.6;
}


/* =========================================
   JOURNEY STEPS
========================================= */

.journey-steps {
    max-width:
        620px;

    margin-top:
        22px;

    display: grid;

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

    border-top:
        1px solid #242424;

    border-bottom:
        1px solid #242424;
}

.journey-step {
    min-height:
        102px;

    padding:
        17px 13px;

    display: grid;

    grid-template-columns:
        24px
        1fr;

    gap: 8px;

    border-right:
        1px solid #242424;
}

.journey-step:last-child {
    border-right: none;
}

.step-number {
    color: #777;

    font-size: 10px;

    padding-top: 2px;
}

.journey-step strong {
    display: block;

    color: #ededed;

    font-size: 13px;

    font-weight: 700;

    letter-spacing:
        0.06em;
}

.journey-step p {
    margin:
        8px 0 0;

    color: #929292;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================
   PRIMARY ACTION
========================================= */

.primary-actions {
    margin-top:
        20px;

    display: flex;

    align-items:
        center;

    gap: 22px;
}


/* =========================================
   ENTER BUTTON
========================================= */

.enter-button {
    position: relative;

    min-width:
        235px;

    padding:
        17px 21px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap: 25px;

    overflow:
        hidden;

    background:
        linear-gradient(
            110deg,
            #fff 15%,
            #f9e8ff 45%,
            #e7fbf7 78%,
            #fff 100%
        );

    background-size:
        220% 220%;

    color: black;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing:
        0.11em;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.92
        );

    isolation:
        isolate;

    animation:
        button-surface
        5s
        ease-in-out
        infinite;

    transition:
        transform
        0.25s
        ease,
        box-shadow
        0.25s
        ease,
        letter-spacing
        0.25s
        ease;
}

.enter-button::before {
    content: "";

    position:
        absolute;

    inset:
        -10px;

    z-index:
        -2;

    background:
        linear-gradient(
            110deg,
            #7f50ff,
            #f446c9,
            #35e1b1,
            #7f50ff
        );

    background-size:
        300% 300%;

    opacity:
        0.35;

    filter:
        blur(10px);

    animation:
        retreat-button-energy
        4s
        linear
        infinite;

    transition:
        opacity
        0.25s
        ease,
        filter
        0.25s
        ease;
}

.enter-button::after {
    content: "";

    position:
        absolute;

    top: -45%;
    left: -48%;

    width:
        38%;

    height:
        190%;

    z-index:
        2;

    pointer-events:
        none;

    transform:
        rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                0.95
            ),
            transparent
        );

    opacity:
        0;

    animation:
        retreat-button-sweep
        4.5s
        ease-in-out
        infinite;
}

.enter-button-text,
.enter-arrow {
    position: relative;

    z-index: 3;
}

.enter-arrow {
    font-size:
        19px;

    font-weight:
        400;

    transition:
        transform
        0.25s
        ease;
}

.enter-button:hover {
    transform:
        translateY(-3px)
        scale(1.025);

    letter-spacing:
        0.135em;

    box-shadow:
        0 0 20px
        rgba(
            219,
            70,
            255,
            0.32
        ),
        0 0 46px
        rgba(
            50,
            225,
            174,
            0.18
        ),
        0 15px 40px
        rgba(
            0,
            0,
            0,
            0.38
        );
}

.enter-button:hover::before {
    opacity:
        0.95;

    filter:
        blur(8px);
}

.enter-button:hover
.enter-arrow {
    transform:
        translateX(6px);
}

.enter-button:active {
    transform:
        translateY(0)
        scale(0.985);
}

@keyframes button-surface {

    0%,
    100% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }

}

@keyframes retreat-button-energy {

    0% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }

    100% {
        background-position:
            0% 50%;
    }

}

@keyframes retreat-button-sweep {

    0%,
    52% {
        left: -48%;
        opacity: 0;
    }

    58% {
        opacity:
            0.55;
    }

    76% {
        left: 118%;

        opacity:
            0.45;
    }

    82%,
    100% {
        left: 118%;
        opacity: 0;
    }

}


/* =========================================
   STATUS
========================================= */

.retreat-status {
    display: flex;

    align-items:
        center;

    gap: 10px;

    color: #888;

    font-size: 11px;

    letter-spacing:
        0.13em;
}

.status-light {
    width: 7px;
    height: 7px;

    border-radius:
        50%;

    background:
        #5cff74;

    box-shadow:
        0 0 12px
        rgba(
            92,
            255,
            116,
            0.8
        );

    animation:
        status-pulse
        2.4s
        ease-in-out
        infinite;
}

@keyframes status-pulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

}


/* =========================================
   PORTAL
========================================= */

.portal-column {
    width: 100%;

    max-width:
        430px;

    justify-self:
        center;
}

.retreat-art {
    --retreat-image:
        url(
            "/assets/images/Fiend Fusion.webp"
        );

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        1 / 1;

    overflow:
        visible;

    isolation:
        isolate;

    perspective:
        1000px;
}


/* =========================================
   MAIN ART
========================================= */

.retreat-art > img {
    position:
        relative;

    width: 100%;
    height: 100%;

    display:
        block;

    object-fit:
        cover;

    z-index:
        8;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    box-shadow:
        25px 25px 0
        rgba(
            255,
            255,
            255,
            0.045
        );

    transform-origin:
        center;

    animation:
        retreat-breathe
        6s
        ease-in-out
        infinite;

    transition:
        filter
        0.35s
        ease;
}

@keyframes retreat-breathe {

    0%,
    70%,
    100% {
        transform:
            scale(1)
            rotate(0deg);

        filter:
            saturate(1)
            contrast(1);
    }

    80% {
        transform:
            scale(1.018)
            rotate(0.15deg);

        filter:
            saturate(1.18)
            contrast(1.05)
            brightness(1.04);
    }

    86% {
        transform:
            scale(1.006)
            rotate(-0.1deg);
    }

}


/* =========================================
   SMOKE
========================================= */

.smoke-field {
    position:
        absolute;

    inset:
        -38%;

    z-index:
        2;

    pointer-events:
        none;

    filter:
        blur(8px);
}

.smoke-cloud {
    position:
        absolute;

    display:
        block;

    border-radius:
        45% 55%
        52% 48% /
        55% 42%
        58% 45%;

    filter:
        blur(28px);

    opacity:
        0.58;

    mix-blend-mode:
        screen;
}

.smoke-cloud-one {
    width: 65%;
    height: 48%;

    left: -2%;
    top: 9%;

    background:
        radial-gradient(
            circle at 45% 50%,
            rgba(
                224,
                62,
                240,
                0.78
            ),
            rgba(
                138,
                40,
                182,
                0.45
            )
            45%,
            transparent
            75%
        );

    animation:
        smoke-one
        10s
        ease-in-out
        infinite
        alternate;
}

.smoke-cloud-two {
    width: 62%;
    height: 52%;

    right: -7%;
    top: 7%;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(
                115,
                71,
                255,
                0.68
            ),
            rgba(
                187,
                53,
                204,
                0.38
            )
            48%,
            transparent
            75%
        );

    animation:
        smoke-two
        13s
        ease-in-out
        infinite
        alternate;
}

.smoke-cloud-three {
    width: 67%;
    height: 53%;

    right: -10%;
    bottom: 5%;

    background:
        radial-gradient(
            circle at 48% 50%,
            rgba(
                32,
                225,
                174,
                0.7
            ),
            rgba(
                35,
                133,
                118,
                0.4
            )
            50%,
            transparent
            76%
        );

    animation:
        smoke-three
        11s
        ease-in-out
        infinite
        alternate;
}

.smoke-cloud-four {
    width: 58%;
    height: 49%;

    left: -7%;
    bottom: -1%;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(
                112,
                53,
                190,
                0.48
            ),
            rgba(
                52,
                26,
                85,
                0.28
            )
            55%,
            transparent
            78%
        );

    animation:
        smoke-four
        14s
        ease-in-out
        infinite
        alternate;
}

@keyframes smoke-one {

    from {
        transform:
            translate(
                -8%,
                5%
            )
            scale(0.95)
            rotate(-9deg);
    }

    to {
        transform:
            translate(
                13%,
                -9%
            )
            scale(1.22)
            rotate(11deg);
    }

}

@keyframes smoke-two {

    from {
        transform:
            translate(
                8%,
                -6%
            )
            scale(1.05)
            rotate(7deg);
    }

    to {
        transform:
            translate(
                -12%,
                10%
            )
            scale(1.22)
            rotate(-9deg);
    }

}

@keyframes smoke-three {

    from {
        transform:
            translate(
                10%,
                8%
            )
            scale(0.96)
            rotate(-6deg);
    }

    to {
        transform:
            translate(
                -11%,
                -7%
            )
            scale(1.2)
            rotate(10deg);
    }

}

@keyframes smoke-four {

    from {
        transform:
            translate(
                -5%,
                8%
            )
            scale(1.05)
            rotate(5deg);
    }

    to {
        transform:
            translate(
                12%,
                -10%
            )
            scale(1.24)
            rotate(-8deg);
    }

}


/* =========================================
   AURA
========================================= */

.portal-aura {
    position:
        absolute;

    inset:
        -24%;

    z-index:
        3;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 34% 35%,
            rgba(
                255,
                44,
                187,
                0.34
            ),
            transparent
            38%
        ),
        radial-gradient(
            circle at 73% 67%,
            rgba(
                20,
                255,
                192,
                0.28
            ),
            transparent
            38%
        ),
        radial-gradient(
            circle at 55% 20%,
            rgba(
                134,
                81,
                255,
                0.32
            ),
            transparent
            33%
        );

    filter:
        blur(28px);

    animation:
        aura-shift
        7s
        ease-in-out
        infinite
        alternate;
}

@keyframes aura-shift {

    from {
        transform:
            translate(
                -3%,
                -2%
            )
            scale(0.95)
            rotate(-2deg);

        opacity:
            0.7;
    }

    to {
        transform:
            translate(
                4%,
                4%
            )
            scale(1.14)
            rotate(3deg);

        opacity:
            1;
    }

}


/* =========================================
   IDENTITY ECHO
========================================= */

.identity-echo {
    position:
        absolute;

    inset:
        0;

    z-index:
        6;

    background-image:
        var(
            --retreat-image
        );

    background-position:
        center;

    background-size:
        cover;

    pointer-events:
        none;

    opacity:
        0;

    mix-blend-mode:
        screen;
}

.echo-one {
    filter:
        hue-rotate(65deg)
        saturate(1.6);

    animation:
        echo-one
        6.5s
        infinite;
}

.echo-two {
    filter:
        hue-rotate(-90deg)
        saturate(1.6);

    animation:
        echo-two
        6.5s
        infinite;
}

@keyframes echo-one {

    0%,
    71%,
    100% {
        opacity:
            0;

        transform:
            translate(
                0,
                0
            )
            scale(1);
    }

    75% {
        opacity:
            0.34;

        transform:
            translate(
                -13px,
                -2px
            )
            scale(1.015);
    }

    78% {
        opacity:
            0.18;

        transform:
            translate(
                7px,
                2px
            )
            scale(1.005);
    }

    81% {
        opacity: 0;
    }

}

@keyframes echo-two {

    0%,
    73%,
    100% {
        opacity: 0;

        transform:
            translate(
                0,
                0
            )
            scale(1);
    }

    76% {
        opacity:
            0.28;

        transform:
            translate(
                12px,
                3px
            )
            scale(1.012);
    }

    79% {
        opacity:
            0.13;

        transform:
            translate(
                -6px,
                -1px
            )
            scale(1.006);
    }

    82% {
        opacity:
            0;
    }

}


/* =========================================
   FOREGROUND SMOKE
========================================= */

.foreground-smoke {
    position:
        absolute;

    inset:
        -8%;

    z-index:
        10;

    pointer-events:
        none;

    overflow:
        visible;
}

.smoke-wisp {
    position:
        absolute;

    display:
        block;

    border-radius:
        50%;

    filter:
        blur(18px);

    opacity:
        0.34;

    mix-blend-mode:
        screen;
}

.wisp-one {
    width: 50%;
    height: 22%;

    left: -13%;
    bottom: 4%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(
                194,
                64,
                232,
                0.68
            ),
            transparent
            70%
        );

    animation:
        wisp-one
        7s
        ease-in-out
        infinite
        alternate;
}

.wisp-two {
    width: 48%;
    height: 19%;

    right: -16%;
    bottom: 18%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(
                33,
                235,
                171,
                0.62
            ),
            transparent
            70%
        );

    animation:
        wisp-two
        8.5s
        ease-in-out
        infinite
        alternate;
}

.wisp-three {
    width: 36%;
    height: 14%;

    left: 35%;
    top: -10%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(
                144,
                77,
                255,
                0.5
            ),
            transparent
            73%
        );

    animation:
        wisp-three
        9s
        ease-in-out
        infinite
        alternate;
}

@keyframes wisp-one {

    from {
        transform:
            translate(
                -6%,
                8%
            )
            rotate(-6deg)
            scale(0.9);
    }

    to {
        transform:
            translate(
                35%,
                -25%
            )
            rotate(15deg)
            scale(1.2);
    }

}

@keyframes wisp-two {

    from {
        transform:
            translate(
                8%,
                10%
            )
            rotate(5deg)
            scale(1);
    }

    to {
        transform:
            translate(
                -33%,
                -22%
            )
            rotate(-14deg)
            scale(1.18);
    }

}

@keyframes wisp-three {

    from {
        transform:
            translate(
                -15%,
                0
            )
            scale(0.9);
    }

    to {
        transform:
            translate(
                20%,
                35%
            )
            scale(1.15);
    }

}


/* =========================================
   PARTICLES
========================================= */

.particles {
    position:
        absolute;

    inset:
        -18%;

    z-index:
        12;

    pointer-events:
        none;
}

.particle {
    position:
        absolute;

    width: 4px;
    height: 4px;

    border-radius:
        50%;

    background:
        white;

    box-shadow:
        0 0 8px
        rgba(
            255,
            255,
            255,
            0.75
        );

    opacity:
        0;

    animation:
        particle-drift
        7s
        linear
        infinite;
}

.p1 {
    left: 8%;
    top: 70%;
    animation-delay: 0s;
}

.p2 {
    left: 25%;
    top: 85%;
    animation-delay: -1.5s;
}

.p3 {
    left: 44%;
    top: 90%;
    animation-delay: -3s;
}

.p4 {
    left: 65%;
    top: 82%;
    animation-delay: -4.5s;
}

.p5 {
    left: 84%;
    top: 68%;
    animation-delay: -2s;
}

.p6 {
    left: 16%;
    top: 45%;
    animation-delay: -5s;
}

.p7 {
    left: 73%;
    top: 46%;
    animation-delay: -0.8s;
}

.p8 {
    left: 91%;
    top: 40%;
    animation-delay: -3.7s;
}

@keyframes particle-drift {

    0% {
        opacity: 0;

        transform:
            translateY(
                18px
            )
            scale(0.5);
    }

    20% {
        opacity: 0.8;
    }

    70% {
        opacity: 0.45;
    }

    100% {
        opacity: 0;

        transform:
            translateY(
                -90px
            )
            translateX(
                15px
            )
            scale(1.2);
    }

}


/* =========================================
   SYMBOLS
========================================= */

.fragment {
    position:
        absolute;

    z-index:
        13;

    color:
        rgba(
            255,
            255,
            255,
            0.6
        );

    font-size:
        14px;

    pointer-events:
        none;

    text-shadow:
        0 0 10px
        rgba(
            255,
            255,
            255,
            0.25
        );

    animation:
        fragment-float
        5.5s
        ease-in-out
        infinite;
}

.fragment-one {
    left: -27px;
    top: 16%;
    animation-delay: 0s;
}

.fragment-two {
    right: -24px;
    top: 32%;
    animation-delay: -2s;
}

.fragment-three {
    left: 8%;
    bottom: -22px;
    animation-delay: -4s;
}

.fragment-four {
    right: 11%;
    top: -22px;
    animation-delay: -1s;
}

@keyframes fragment-float {

    0%,
    100% {
        transform:
            translateY(
                0
            )
            rotate(
                0deg
            );

        opacity:
            0.25;
    }

    50% {
        transform:
            translateY(
                -13px
            )
            rotate(
                55deg
            )
            scale(
                1.2
            );

        opacity:
            0.8;
    }

}


/* =========================================
   NOISE
========================================= */

.portal-noise {
    position:
        absolute;

    inset:
        0;

    z-index:
        14;

    pointer-events:
        none;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 3px,
            rgba(
                255,
                255,
                255,
                0.03
            )
            4px
        );

    opacity:
        0.1;

    animation:
        noise-pulse
        6.5s
        steps(2)
        infinite;
}

@keyframes noise-pulse {

    0%,
    70%,
    100% {
        opacity: 0.07;
    }

    75% {
        opacity: 0.18;
    }

    77% {
        opacity: 0.3;
    }

    80% {
        opacity: 0.08;
    }

}


/* =========================================
   PORTAL HOVER
========================================= */

.retreat-art:hover > img {
    filter:
        saturate(1.27)
        contrast(1.06)
        brightness(1.04);
}

.retreat-art:hover
.smoke-cloud {
    opacity:
        0.72;
}

.retreat-art:hover
.portal-aura {
    filter:
        blur(20px);

    opacity:
        1;
}


/* =========================================
   IDENTITY READOUT
========================================= */

.identity-readout {
    margin-top:
        11px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        #777;

    font-size:
        11px;

    letter-spacing:
        0.16em;
}

.identity-readout strong {
    color:
        #c0c0c0;

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        0.16em;
}


/* =========================================
   RESOURCE BAR
========================================= */

.resource-bar {
    position:
        relative;

    width:
        min(
            1300px,
            calc(
                100% - 110px
            )
        );

    margin:
        0 auto;

    min-height:
        86px;

    display:
        grid;

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

    border-top:
        1px solid #242424;

    border-bottom:
        1px solid #242424;

    z-index:
        4;
}

.resource-link {
    min-height:
        86px;

    padding:
        18px 16px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        white;

    text-decoration:
        none;

    border-right:
        1px solid #242424;

    transition:
        background
        0.2s
        ease,
        padding
        0.2s
        ease;
}

.resource-link:last-child {
    border-right:
        none;
}

.resource-link:hover {
    background:
        #0c0c0c;

    padding-left:
        20px;
}

.resource-link strong {
    display:
        block;

    color:
        #ededed;

    font-size:
        14px;

    letter-spacing:
        0.055em;
}

.resource-link div > span {
    display:
        block;

    margin-top:
        6px;

    color:
        #888;

    font-size:
        13px;
}

.resource-arrow {
    color:
        #777;

    font-size:
        20px;

    transition:
        color
        0.2s
        ease,
        transform
        0.2s
        ease;
}

.resource-link:hover
.resource-arrow {
    color:
        white;

    transform:
        translate(
            2px,
            -2px
        );
}


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

@media (max-width: 1000px) {

    .retreat-shell {
        grid-template-columns:
            minmax(
                400px,
                1fr
            )
            minmax(
                300px,
                0.75fr
            );

        gap:
            45px;
    }

}


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

@media (max-width: 760px) {

    .top-bar {
        height:
            82px;
    }

    .menu-button {
        left:
            24px;
    }

    .dropdown-menu {
        left:
            24px;

        top:
            62px;
    }

    .nav-fiend {
        width:
            100px;
    }

    .retreat-page {
        min-height:
            calc(
                100svh - 82px
            );

        overflow:
            hidden;
    }

    .retreat-shell {
        width:
            calc(
                100% - 36px
            );

        padding:
            40px 0
            45px;

        grid-template-columns:
            1fr;

        gap:
            52px;

        min-width:
            0;
    }

    .retreat-content,
    .portal-column {
        min-width:
            0;
    }

    .retreat-content h1 {
        font-size:
            clamp(
                52px,
                16vw,
                72px
            );
    }

    .tagline {
        font-size:
            17px;
    }

    .retreat-description {
        font-size:
            15px;
    }

    .journey-steps {
        grid-template-columns:
            1fr;
    }

    .journey-step {
        min-height:
            auto;

        grid-template-columns:
            30px
            1fr;

        border-right:
            none;

        border-bottom:
            1px solid #242424;
    }

    .journey-step:last-child {
        border-bottom:
            none;
    }

    .primary-actions {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .enter-button {
        width:
            100%;

        max-width:
            330px;
    }

    .portal-column {
        max-width:
            380px;
    }

    .smoke-field {
        inset:
            -25%;
    }

    .resource-bar {
        width:
            calc(
                100% - 36px
            );

        grid-template-columns:
            1fr;
    }

    .resource-link {
        border-right:
            none;

        border-bottom:
            1px solid #242424;
    }

    .resource-link:last-child {
        border-bottom:
            none;
    }


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

    .ambient-orb {
        animation:
            none;

        filter:
            blur(72px);

        opacity:
            0.22;
    }

    .smoke-cloud {
        animation:
            none;

        opacity:
            0.42;

        filter:
            blur(24px);
    }

    .portal-aura {
        animation:
            none;

        opacity:
            0.8;

        filter:
            blur(24px);
    }

    .foreground-smoke {
        opacity:
            0.72;
    }

    .smoke-wisp {
        animation:
            none;
    }

    .identity-echo,
    .particles,
    .fragment,
    .portal-noise {
        display:
            none;
    }

    .retreat-art > img {
        animation:
            none;

        box-shadow:
            14px
            14px
            0
            rgba(
                255,
                255,
                255,
                0.035
            );

        transform:
            translateZ(0);

        backface-visibility:
            hidden;
    }

    .retreat-art:hover > img,
    .retreat-art:hover
    .smoke-cloud,
    .retreat-art:hover
    .portal-aura {
        filter:
            none;
    }

    .resource-link:hover {
        padding-left:
            16px;
    }

    .enter-button:hover {
        transform:
            none;
    }

    .identity-readout {
        padding:
            0 2px;
    }

}


/* =========================================
   EXTRA SMALL PHONES
========================================= */

@media (max-width: 390px) {

    .retreat-shell {
        width:
            calc(
                100% - 28px
            );
    }

    .retreat-content h1 {
        font-size:
            clamp(
                46px,
                15vw,
                62px
            );
    }

    .resource-bar {
        width:
            calc(
                100% - 28px
            );
    }

}


/* =========================================
   REDUCED MOTION
========================================= */

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

    .ambient-orb,
    .retreat-art > img,
    .smoke-cloud,
    .portal-aura,
    .identity-echo,
    .smoke-wisp,
    .particle,
    .fragment,
    .portal-noise,
    .status-light,
    .nav-fiend,
    .enter-button,
    .enter-button::before,
    .enter-button::after {
        animation:
            none !important;
    }

}