/* =========================================================
   RESPONSIVE — CELANYA LINKS
========================================================= */


/* =========================================================
   VERY LARGE DESKTOP
========================================================= */

@media (
    min-width:
        1600px
) {

    .page {
        padding:
            80px
            48px
            100px;
    }


    .linktree {
        width:
            min(
                100%,
                620px
            );

        margin-right:
            500px;
    }


    .character {
        right:
            5vw;

        width:
            min(
                38vw,
                620px
            );

        height:
            760px;
    }


    .character__image {
        max-height:
            700px;
    }


    .character__halo {
        width:
            330px;

        height:
            330px;
    }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (
    max-width:
        1500px
) {

    .page {
        padding:
            70px
            32px
            90px;
    }


    .linktree {
        width:
            min(
                100%,
                590px
            );

        margin-right:
            430px;
    }


    .character {
        right:
            2vw;

        width:
            min(
                39vw,
                610px
            );

        height:
            740px;
    }


    .character__image {
        max-height:
            690px;
    }


    .character__halo {
        width:
            310px;

        height:
            310px;
    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (
    max-width:
        1300px
) {

    .page {
        padding:
            64px
            28px
            86px;
    }


    .linktree {
        width:
            min(
                100%,
                560px
            );

        margin-right:
            330px;
    }


    .character {
        right:
            -10px;

        width:
            520px;

        height:
            700px;
    }


    .character__image {
        max-height:
            650px;
    }


    .character__halo {
        width:
            280px;

        height:
            280px;
    }

}


/* =========================================================
   SMALL DESKTOP / LARGE TABLET
========================================================= */

@media (
    max-width:
        1100px
) {

    .page {
        padding:
            58px
            24px
            82px;
    }


    .linktree {
        width:
            min(
                100%,
                530px
            );

        margin-right:
            230px;
    }


    .character {
        right:
            -60px;

        width:
            450px;

        height:
            650px;

        opacity:
            0.90;
    }


    .character__image {
        max-height:
            600px;
    }


    .character__halo {
        width:
            250px;

        height:
            250px;
    }


    .profile__name {
        font-size:
            clamp(
                2.6rem,
                7vw,
                4.1rem
            );
    }

}


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

@media (
    max-width:
        900px
) {

    .page {
        display: block;

        padding:
            48px
            20px
            76px;
    }


    .linktree {
        width:
            min(
                100%,
                620px
            );

        margin:
            0
            auto;
    }


    /* -----------------------------------------------------
       CHARACTER
    ------------------------------------------------------ */

    .character {
        position: absolute;

        top: 420px;
        right: -160px;

        width:
            430px;

        height:
            620px;

        transform: none;

        opacity:
            0.16;
    }


    .character__image {
        top: 0;
        right: 0;

        max-height:
            600px;

        transform: none;

        object-position:
            right top;
    }


    .character__halo {
        top:
            35%;

        left:
            50%;

        width:
            240px;

        height:
            240px;

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

        opacity:
            0.45;
    }


    /* -----------------------------------------------------
       PROFILE
    ------------------------------------------------------ */

    .profile {
        margin-bottom:
            30px;
    }


    .profile__avatar-wrapper {
        width:
            146px;

        height:
            146px;
    }


    .profile__avatar {
        width:
            130px;

        height:
            130px;
    }


    .profile__description {
        max-width:
            500px;
    }


    /* -----------------------------------------------------
       LINKS
    ------------------------------------------------------ */

    .link-card {
        min-height:
            74px;

        padding:
            12px
            16px;
    }


    .link-card__icon {
        width:
            46px;

        height:
            46px;
    }


    /* -----------------------------------------------------
       MOON
    ------------------------------------------------------ */

    .moon {
        top:
            -135px;

        width:
            470px;

        height:
            470px;
    }


    .moon__disc {
        width:
            220px;

        height:
            220px;
    }


    /* -----------------------------------------------------
       MOUNTAINS
    ------------------------------------------------------ */

    .mountains {
        height:
            150px;
    }


    /* -----------------------------------------------------
       STAR RAIN
    ------------------------------------------------------ */

    .rain-star::before {
        opacity:
            0.35;
    }

}


/* =========================================================
   MOBILE / TABLET PORTRAIT
========================================================= */

@media (
    max-width:
        700px
) {

    .page {
        padding:
            38px
            16px
            66px;
    }


    .linktree {
        width:
            100%;

        margin: 0;
    }


    /* -----------------------------------------------------
       CHARACTER
    ------------------------------------------------------ */

    .character {
        display: none;
    }


    /* -----------------------------------------------------
       BACKGROUND
    ------------------------------------------------------ */

    .celanya-background {
        background:
            radial-gradient(
                circle at 50% 10%,
                rgba(244, 247, 223, 0.08),
                transparent 30%
            ),
            radial-gradient(
                circle at 50% 55%,
                rgba(62, 74, 97, 0.18),
                transparent 44%
            ),
            radial-gradient(
                circle at 50% 100%,
                rgba(115, 64, 71, 0.18),
                transparent 40%
            ),
            linear-gradient(
                180deg,
                #080B13 0%,
                #0A0E17 45%,
                #11151E 100%
            );
    }


    .celanya-background-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(9, 12, 20, 0.08),
                rgba(9, 12, 20, 0.22)
            );
    }


    /* -----------------------------------------------------
       MOON
    ------------------------------------------------------ */

    .moon {
        top:
            -125px;

        width:
            400px;

        height:
            400px;
    }


    .moon__disc {
        width:
            190px;

        height:
            190px;

        opacity:
            0.085;
    }


    /* -----------------------------------------------------
       PROFILE
    ------------------------------------------------------ */

    .profile {
        margin-bottom:
            28px;
    }


    .profile__celestial {
        margin-bottom:
            14px;
    }


    .profile__avatar-wrapper {
        width:
            136px;

        height:
            136px;

        margin-bottom:
            16px;
    }


    .profile__avatar {
        width:
            120px;

        height:
            120px;
    }


    .profile__avatar-halo {
        inset:
            -8px;
    }


    .profile__eyebrow {
        font-size:
            0.66rem;

        letter-spacing:
            0.18em;
    }


    .profile__name {
        font-size:
            clamp(
                2.5rem,
                14vw,
                3.7rem
            );
    }


    .profile__title {
        font-size:
            0.98rem;
    }


    .profile__separator {
        width:
            min(
                100%,
                290px
            );

        margin:
            16px
            auto;
    }


    .profile__description {
        max-width:
            420px;

        font-size:
            0.92rem;

        line-height:
            1.65;
    }


    /* -----------------------------------------------------
       LINKS
    ------------------------------------------------------ */

    .links {
        gap:
            12px;
    }


    .link-card {
        min-height:
            70px;

        gap:
            12px;

        padding:
            11px
            14px;

        border-radius:
            16px;
    }


    .link-card:hover,
    .link-card:focus-visible {
        transform:
            translateY(-2px);
    }


    .link-card__icon {
        width:
            44px;

        height:
            44px;

        border-radius:
            13px;

        font-size:
            1.12rem;
    }


    .link-card__label {
        font-size:
            1rem;
    }


    .link-card__subtitle {
        font-size:
            0.74rem;
    }


    .link-card__arrow {
        width:
            30px;

        height:
            30px;

        font-size:
            0.74rem;
    }


    /* -----------------------------------------------------
       SUPPORT
    ------------------------------------------------------ */

    .support {
        margin-top:
            32px;
    }


    .support__heading {
        gap:
            10px;

        margin-bottom:
            14px;
    }


    .support__eyebrow {
        font-size:
            0.52rem;

        letter-spacing:
            0.10em;
    }


    .support__title {
        font-size:
            1rem;
    }


    /* -----------------------------------------------------
       FOOTER
    ------------------------------------------------------ */

    .footer {
        margin-top:
            38px;

        padding:
            0
            12px;
    }


    .footer__quote {
        font-size:
            0.80rem;

        line-height:
            1.6;
    }


    .footer__credits {
        font-size:
            0.70rem;
    }


    .footer__copyright {
        font-size:
            0.64rem;
    }


    /* -----------------------------------------------------
       MOUNTAINS
    ------------------------------------------------------ */

    .mountains {
        height:
            120px;

        opacity:
            0.22;
    }


    .mountains__back {
        height:
            110px;
    }


    .mountains__front {
        height:
            90px;
    }


    /* -----------------------------------------------------
       STAR RAIN
    ------------------------------------------------------ */

    .rain-star::before {
        opacity:
            0.25;
    }

}


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

@media (
    max-width:
        480px
) {

    .page {
        padding:
            30px
            12px
            58px;
    }


    /* -----------------------------------------------------
       PROFILE
    ------------------------------------------------------ */

    .profile__avatar-wrapper {
        width:
            126px;

        height:
            126px;
    }


    .profile__avatar {
        width:
            112px;

        height:
            112px;

        border-width:
            2px;
    }


    .profile__name {
        font-size:
            clamp(
                2.3rem,
                15vw,
                3.2rem
            );
    }


    .profile__title {
        font-size:
            0.92rem;
    }


    .profile__description {
        font-size:
            0.87rem;

        line-height:
            1.6;
    }


    /* -----------------------------------------------------
       LINKS
    ------------------------------------------------------ */

    .link-card {
        min-height:
            66px;

        gap:
            10px;

        padding:
            10px
            12px;

        border-radius:
            15px;
    }


    .link-card__icon {
        width:
            40px;

        height:
            40px;

        border-radius:
            12px;

        font-size:
            1rem;
    }


    .link-card__label {
        font-size:
            0.95rem;
    }


    .link-card__subtitle {
        margin-top:
            2px;

        font-size:
            0.70rem;

        line-height:
            1.3;
    }


    .link-card__arrow {
        width:
            26px;

        height:
            26px;

        font-size:
            0.68rem;
    }


    /* -----------------------------------------------------
       SUPPORT
    ------------------------------------------------------ */

    .support {
        margin-top:
            28px;
    }


    .support__heading {
        gap:
            8px;
    }


    .support__line {
        min-width:
            24px;
    }


    .support__eyebrow {
        font-size:
            0.47rem;
    }


    .support__title {
        font-size:
            0.94rem;
    }


    /* -----------------------------------------------------
       FOOTER
    ------------------------------------------------------ */

    .footer {
        margin-top:
            34px;
    }


    .footer__stars {
        margin-bottom:
            12px;

        font-size:
            0.72rem;
    }


    .footer__quote {
        font-size:
            0.76rem;
    }


    .footer__credits {
        margin-top:
            14px;

        font-size:
            0.67rem;
    }


    .footer__copyright {
        margin-top:
            7px;

        font-size:
            0.61rem;
    }


    /* -----------------------------------------------------
       MOON
    ------------------------------------------------------ */

    .moon {
        top:
            -115px;

        width:
            340px;

        height:
            340px;
    }


    .moon__disc {
        width:
            160px;

        height:
            160px;
    }


    /* -----------------------------------------------------
       STATIC STARS
    ------------------------------------------------------ */

    .star {
        width:
            2px;

        height:
            2px;
    }


    .particle {
        width:
            4px;

        height:
            4px;
    }


    /* -----------------------------------------------------
       STAR RAIN
    ------------------------------------------------------ */

    .rain-star::before {
        opacity:
            0.18;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (
    max-width:
        360px
) {

    .page {
        padding:
            26px
            10px
            52px;
    }


    .profile__avatar-wrapper {
        width:
            116px;

        height:
            116px;
    }


    .profile__avatar {
        width:
            102px;

        height:
            102px;
    }


    .profile__name {
        font-size:
            2.3rem;
    }


    .profile__description {
        font-size:
            0.83rem;
    }


    .link-card {
        padding:
            9px
            10px;
    }


    .link-card__icon {
        width:
            38px;

        height:
            38px;
    }


    .link-card__subtitle {
        font-size:
            0.66rem;
    }


    .link-card__arrow {
        display:
            none;
    }


    .support__eyebrow {
        display:
            none;
    }

}


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

@media (
    max-height:
        600px
)
and (
    orientation:
        landscape
) {

    .page {
        padding-top:
            28px;
    }


    .character {
        display:
            none;
    }


    .profile__avatar-wrapper {
        width:
            112px;

        height:
            112px;
    }


    .profile__avatar {
        width:
            100px;

        height:
            100px;
    }


    .profile__name {
        font-size:
            2.5rem;
    }


    .moon {
        top:
            -180px;
    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (
    hover:
        none
)
and (
    pointer:
        coarse
) {

    .link-card:hover {
        transform:
            none;

        border-color:
            var(--celanya-border);
    }


    .link-card:hover::before {
        left:
            -130%;
    }


    .link-card:hover
    .link-card__icon {
        transform:
            none;
    }


    .link-card:hover
    .link-card__arrow {
        transform:
            none;
    }


    .link-card:active {
        transform:
            scale(0.985);

        border-color:
            rgba(
                244,
                247,
                223,
                0.65
            );
    }

}


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

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

    .star,
    .particle,
    .moon__glow,
    .character__halo,
    .profile__avatar-halo {
        animation-duration:
            12s !important;
    }

}

/* =========================================================
   INTRO ÉCLIPSE — RESPONSIVE
========================================================= */

@media (
    max-width:
        700px
) {

    .eclipse-intro__eclipse {
        width:
            210px;

        height:
            210px;
    }


    .eclipse-intro__shadow {
        top:
            -3px;

        left:
            -250px;

        width:
            216px;

        height:
            216px;
    }


    @keyframes eclipseIntroShadow {

        0% {
            transform:
                translateX(0);
        }

        68%,
        100% {
            transform:
                translateX(250px);
        }

    }


    .eclipse-intro__separator {
        width:
            190px;

        margin-top:
            32px;
    }


    .eclipse-intro__text {
        font-size:
            0.80rem;

        letter-spacing:
            0.11em;
    }


    .eclipse-intro__star--1 {
        left:
            14%;
    }


    .eclipse-intro__star--2 {
        right:
            13%;
    }


    .eclipse-intro__star--3 {
        left:
            12%;
    }


    .eclipse-intro__star--4 {
        right:
            14%;
    }

}


@media (
    max-width:
        480px
) {

    .eclipse-intro__eclipse {
        width:
            175px;

        height:
            175px;
    }


    .eclipse-intro__shadow {
        left:
            -215px;

        width:
            181px;

        height:
            181px;
    }


    @keyframes eclipseIntroShadow {

        0% {
            transform:
                translateX(0);
        }

        68%,
        100% {
            transform:
                translateX(215px);
        }

    }


    .eclipse-intro__separator {
        width:
            160px;

        margin-top:
            28px;
    }


    .eclipse-intro__text {
        font-size:
            0.72rem;

        letter-spacing:
            0.09em;
    }

}


/* =========================================================
   INTRO ÉCLIPSE — ACCESSIBILITÉ
========================================================= */

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

    .eclipse-intro {
        animation-duration:
            0.6s;

        animation-delay:
            1.2s;
    }


    .eclipse-intro__shadow {
        animation:
            none;

        transform:
            translateX(315px);
    }


    .eclipse-intro__corona,
    .eclipse-intro__star,
    .eclipse-intro__separator,
    .eclipse-intro__text {
        animation:
            none;

        opacity:
            0.85;
    }

}



/* =========================================================
   INTRO ÉCLIPSE SOLAIRE — MOBILE
========================================================= */

@media (
    max-width:
        700px
) {

    .eclipse-intro__fire {
        inset:
            -20px;
    }


    .eclipse-intro__fire--2 {
        inset:
            -29px;
    }


    .eclipse-intro__fire--3 {
        inset:
            -40px;
    }

}


@media (
    max-width:
        480px
) {

    .eclipse-intro__fire {
        inset:
            -17px;
    }


    .eclipse-intro__fire--2 {
        inset:
            -25px;
    }


    .eclipse-intro__fire--3 {
        inset:
            -34px;
    }

}


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

    .eclipse-intro__fire,
    .eclipse-intro__fire--2,
    .eclipse-intro__fire--3 {
        animation:
            none;

        opacity:
            0.42;
    }


    .eclipse-intro__corona {
        animation:
            none;

        opacity:
            0.90;
    }

}