/* =========================================================
   ROOT / COLORS
========================================================= */

:root {

    /* Lunar */
    --celanya-moon: #E9E8E8;
    --celanya-moon-soft: #F4F7DF;
    --celanya-moon-warm: #B08F88;

    /* Night blue */
    --celanya-night: #11151E;
    --celanya-blue: #292D38;
    --celanya-blue-light: #3E4A61;

    /* Twilight */
    --celanya-twilight: #D18877;
    --celanya-twilight-light: #E2A77F;
    --celanya-twilight-dark: #734047;

    /* Gold */
    --celanya-gold: #D6B76A;
    --celanya-gold-soft: #E8D39B;

    /* Background */
    --celanya-background: #090C14;
    --celanya-background-soft: #0D111B;

    /* Cards */
    --celanya-card: rgba(17, 21, 30, 0.82);
    --celanya-card-light: rgba(41, 45, 56, 0.70);

    /* Text */
    --celanya-white: #FFFFFF;
    --celanya-text: rgba(255, 255, 255, 0.88);
    --celanya-text-soft: rgba(255, 255, 255, 0.62);

    /* Borders */
    --celanya-border: rgba(214, 183, 106, 0.34);
}


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

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    min-height: 100vh;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    color: var(--celanya-text);

    background: var(--celanya-background);

    overflow-x: hidden;
}


img {
    display: block;
    max-width: 100%;

    -webkit-user-drag: none;

    user-select: none;
    -webkit-user-select: none;
}


a {
    color: inherit;
    text-decoration: none;
}


::selection {
    color: var(--celanya-night);

    background:
        var(--celanya-gold-soft);
}




/* =========================================================
   INTRO ÉCLIPSE
========================================================= */

.eclipse-intro {
    position: fixed;
    inset: 0;

    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(62, 74, 97, 0.22),
            transparent 30%
        ),
        radial-gradient(
            circle at 18% 20%,
            rgba(226, 167, 127, 0.05),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #05070D 0%,
            #080B13 48%,
            #0D111B 100%
        );

    overflow: hidden;
}


/* ---------------------------------------------------------
   ÉTOILES DE L'INTRO
--------------------------------------------------------- */

.eclipse-intro__sky {
    position: absolute;
    inset: 0;

    pointer-events: none;
}


.eclipse-intro__star {
    position: absolute;

    color:
        var(--celanya-gold-soft);

    opacity: 0;

    text-shadow:
        0 0 12px rgba(214, 183, 106, 0.75);

    animation:
        eclipseIntroStar
        1.5s
        ease
        2.7s
        forwards;
}


.eclipse-intro__star--1 {
    top: 18%;
    left: 24%;

    font-size: 0.85rem;
}


.eclipse-intro__star--2 {
    top: 29%;
    right: 22%;

    font-size: 1rem;

    animation-delay: 3s;
}


.eclipse-intro__star--3 {
    top: 66%;
    left: 20%;

    font-size: 0.7rem;

    animation-delay: 3.15s;
}


.eclipse-intro__star--4 {
    right: 25%;
    bottom: 22%;

    font-size: 0.8rem;

    animation-delay: 3.3s;
}


.eclipse-intro__star--5 {
    top: 14%;
    right: 38%;

    font-size: 0.6rem;

    animation-delay: 3.45s;
}


.eclipse-intro__star--6 {
    bottom: 17%;
    left: 38%;

    font-size: 0.65rem;

    animation-delay: 3.6s;
}


/* ---------------------------------------------------------
   LUNE / ÉCLIPSE
--------------------------------------------------------- */

.eclipse-intro__eclipse {
    position: relative;

    width: 270px;
    height: 270px;

    border-radius: 50%;

    filter:
        drop-shadow(
            0
            0
            28px
            rgba(244, 247, 223, 0.12)
        );
}


.eclipse-intro__moon {
    position: absolute;
    inset: 0;

    z-index: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 34% 28%,
            #FFFFFF 0%,
            #F4F7DF 27%,
            #E9E8E8 62%,
            #B08F88 100%
        );

    box-shadow:
        0 0 28px rgba(244, 247, 223, 0.28),
        0 0 75px rgba(244, 247, 223, 0.13);
}


.eclipse-intro__shadow {
    position: absolute;

    top: -3px;
    left: -315px;

    z-index: 3;

    width: 276px;
    height: 276px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 64% 38%,
            #111722 0%,
            #080B12 58%,
            #03050A 100%
        );

    box-shadow:
        inset -5px 0 12px rgba(244, 247, 223, 0.03);

    animation:
        eclipseIntroShadow
        3.55s
        cubic-bezier(.68, 0, .32, 1)
        0.55s
        forwards;
}


.eclipse-intro__corona {
    position: absolute;

    inset: -12px;

    z-index: 2;

    border-radius: 50%;

    opacity: 0;

    box-shadow:
        0 0 15px rgba(244, 247, 223, 0.95),
        0 0 36px rgba(232, 211, 155, 0.70),
        0 0 72px rgba(214, 183, 106, 0.42),
        0 0 130px rgba(244, 247, 223, 0.18);

    animation:
        eclipseIntroCorona
        1.45s
        ease
        2.65s
        forwards;
}


/* ---------------------------------------------------------
   SÉPARATEUR / TEXTE
--------------------------------------------------------- */

.eclipse-intro__separator {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    width: 230px;

    margin-top: 38px;

    opacity: 0;

    animation:
        eclipseIntroTextAppear
        1.1s
        ease
        3.15s
        forwards;
}


.eclipse-intro__separator span {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214, 183, 106, 0.55)
        );
}


.eclipse-intro__separator span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(214, 183, 106, 0.55),
            transparent
        );
}


.eclipse-intro__separator i {
    color:
        var(--celanya-gold);

    font-size: 0.72rem;

    text-shadow:
        0 0 12px rgba(214, 183, 106, 0.45);
}


.eclipse-intro__text {
    margin:
        14px
        0
        0;

    color:
        var(--celanya-moon-soft);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 0.92rem;

    font-style: italic;

    letter-spacing: 0.14em;

    opacity: 0;

    text-shadow:
        0 0 18px rgba(244, 247, 223, 0.25);

    animation:
        eclipseIntroTextAppear
        1.15s
        ease
        3.35s
        forwards;
}


/* ---------------------------------------------------------
   ANIMATIONS INTRO
--------------------------------------------------------- */

@keyframes eclipseIntroShadow {

    0% {
        transform:
            translateX(0);
    }

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

}


@keyframes eclipseIntroCorona {

    0% {
        opacity: 0;

        transform:
            scale(0.94);
    }

    55% {
        opacity: 1;

        transform:
            scale(1.04);
    }

    100% {
        opacity: 0.88;

        transform:
            scale(1);
    }

}


@keyframes eclipseIntroStar {

    from {
        opacity: 0;

        transform:
            scale(0.4)
            rotate(0deg);
    }

    to {
        opacity: 0.9;

        transform:
            scale(1)
            rotate(45deg);
    }

}


@keyframes eclipseIntroTextAppear {

    from {
        opacity: 0;

        transform:
            translateY(10px);
    }

    to {
        opacity: 0.78;

        transform:
            translateY(0);
    }

}


@keyframes eclipseIntroDisappear {

    0% {
        opacity: 1;

        visibility: visible;
    }

    100% {
        opacity: 0;

        visibility: hidden;

        pointer-events: none;
    }

}


/* =========================================================
   BACKGROUND
========================================================= */

.celanya-background {
    position: fixed;

    inset: 0;

    z-index: -10;

    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(226, 167, 127, 0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 78% 26%,
            rgba(62, 74, 97, 0.22),
            transparent 34%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(115, 64, 71, 0.14),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #080B13 0%,
            #0A0E17 42%,
            #11151E 100%
        );
}


/* =========================================================
   BACKGROUND OVERLAY
========================================================= */

.celanya-background-overlay {
    position: fixed;

    inset: 0;

    z-index: -9;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(9, 12, 20, 0.24),
            transparent 28%,
            transparent 72%,
            rgba(9, 12, 20, 0.32)
        );
}


/* =========================================================
   STATIC STARS
========================================================= */

.stars {
    position: fixed;

    inset: 0;

    z-index: -5;

    overflow: hidden;

    pointer-events: none;
}


.star {
    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        var(--celanya-moon);

    box-shadow:
        0 0 8px
        rgba(233, 232, 232, 0.8);

    animation:
        starTwinkle
        4s
        ease-in-out
        infinite;
}


.star--1 {
    top: 8%;
    left: 8%;
}


.star--2 {
    top: 16%;
    left: 27%;

    animation-delay: 0.7s;
}


.star--3 {
    top: 12%;
    right: 13%;

    animation-delay: 1.2s;
}


.star--4 {
    top: 33%;
    left: 11%;

    animation-delay: 2s;
}


.star--5 {
    top: 42%;
    right: 18%;

    animation-delay: 1.5s;
}


.star--6 {
    top: 58%;
    left: 21%;

    animation-delay: 0.3s;
}


.star--7 {
    top: 67%;
    right: 8%;

    animation-delay: 1s;
}


.star--8 {
    top: 78%;
    left: 9%;

    animation-delay: 1.8s;
}


.star--9 {
    top: 84%;
    right: 26%;

    animation-delay: 0.4s;
}


.star--10 {
    top: 51%;
    left: 48%;

    animation-delay: 2.3s;
}


.star--11 {
    top: 24%;
    right: 42%;

    animation-delay: 1.1s;
}


.star--12 {
    top: 91%;
    left: 44%;

    animation-delay: 1.6s;
}


@keyframes starTwinkle {

    0%,
    100% {
        opacity: 0.28;

        transform:
            scale(0.85);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.35);
    }

}


/* =========================================================
   STAR RAIN
========================================================= */

.star-rain {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 1;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    pointer-events: none;
}


.rain-star {
    position: absolute;

    top: -100px;

    display: block;

    width:
        var(--star-size);

    height:
        var(--star-size);

    border-radius:
        50%;

    background:
        #F4F7DF;

    opacity:
        var(--star-opacity);

    box-shadow:
        0 0 6px
        rgba(244, 247, 223, 0.95),
        0 0 14px
        rgba(214, 183, 106, 0.55),
        0 0 20px
        rgba(244, 247, 223, 0.22);

    animation-name:
        starRainFall;

    animation-duration:
        var(--star-duration);

    animation-delay:
        var(--star-delay);

    animation-timing-function:
        linear;

    animation-iteration-count:
        infinite;

    will-change:
        transform,
        opacity;
}


/* =========================================================
   STAR TRAIL
========================================================= */

.rain-star::before {
    content: "";

    position: absolute;

    bottom: 0;
    left: 50%;

    width: 1px;

    height:
        calc(
            var(--star-size) * 10
        );

    transform:
        translateX(-50%);

    transform-origin:
        bottom;

    background:
        linear-gradient(
            to top,
            rgba(244, 247, 223, 0.80),
            rgba(214, 183, 106, 0.30),
            transparent
        );

    opacity: 0.65;
}


/* =========================================================
   STAR RAIN ANIMATION
========================================================= */

@keyframes starRainFall {

    0% {
        transform:
            translate3d(
                0,
                -120px,
                0
            );

        opacity: 0;
    }


    5% {
        opacity:
            var(--star-opacity);
    }


    90% {
        opacity:
            var(--star-opacity);
    }


    100% {
        transform:
            translate3d(
                130px,
                calc(100vh + 180px),
                0
            );

        opacity: 0;
    }

}

/* =========================================================
   SHOOTING STARS
========================================================= */

.shooting-stars {
    position: fixed;

    inset: 0;

    z-index: -4;

    overflow: hidden;

    pointer-events: none;
}


.shooting-star {
    position: absolute;

    width: 120px;
    height: 1px;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            rgba(233, 232, 232, 0),
            rgba(233, 232, 232, 0.95)
        );

    transform:
        rotate(-30deg);

    animation:
        shootingStar
        10s
        linear
        infinite;
}


.shooting-star--1 {
    top: 16%;
    right: -140px;
}


.shooting-star--2 {
    top: 38%;
    right: -180px;

    animation-delay: 5.4s;
}


@keyframes shootingStar {

    0%,
    82% {
        opacity: 0;

        transform:
            translate3d(
                0,
                0,
                0
            )
            rotate(-30deg);
    }

    84% {
        opacity: 1;
    }

    90% {
        opacity: 0;

        transform:
            translate3d(
                -700px,
                420px,
                0
            )
            rotate(-30deg);
    }

    100% {
        opacity: 0;
    }

}


/* =========================================================
   MOON
========================================================= */

.moon {
    position: fixed;

    top: -110px;
    left: 50%;

    z-index: -3;

    width: 520px;
    height: 520px;

    transform:
        translateX(-50%);

    pointer-events: none;
}


.moon__glow {
    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(244, 247, 223, 0.20) 0%,
            rgba(244, 247, 223, 0.09) 38%,
            transparent 70%
        );

    filter: blur(8px);

    animation:
        moonGlow
        6s
        ease-in-out
        infinite;
}


.moon__disc {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 250px;
    height: 250px;

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle at 35% 30%,
            #FFFFFF 0%,
            #F4F7DF 30%,
            #E9E8E8 66%,
            #B08F88 100%
        );

    box-shadow:
        0 0 80px
        rgba(244, 247, 223, 0.25);

    opacity: 0.10;
}


@keyframes moonGlow {

    0%,
    100% {
        opacity: 0.76;

        transform:
            scale(1);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.05);
    }

}


/* =========================================================
   MOUNTAINS
========================================================= */

.mountains {
    position: fixed;

    right: 0;
    bottom: 0;
    left: 0;

    z-index: -2;

    height: 190px;

    pointer-events: none;

    opacity: 0.28;
}


.mountains__back {
    position: absolute;

    inset:
        auto
        0
        0;

    height: 160px;

    background:
        linear-gradient(
            135deg,
            transparent 20%,
            rgba(62, 74, 97, 0.68) 20% 34%,
            transparent 34% 44%,
            rgba(62, 74, 97, 0.50) 44% 60%,
            transparent 60%
        );

    clip-path:
        polygon(
            0 100%,
            0 70%,
            14% 36%,
            26% 68%,
            41% 22%,
            56% 70%,
            70% 42%,
            83% 72%,
            100% 30%,
            100% 100%
        );
}


.mountains__front {
    position: absolute;

    inset:
        auto
        0
        0;

    height: 130px;

    background:
        rgba(17, 21, 30, 0.80);

    clip-path:
        polygon(
            0 100%,
            0 74%,
            17% 46%,
            30% 80%,
            46% 38%,
            61% 78%,
            77% 48%,
            91% 80%,
            100% 63%,
            100% 100%
        );
}


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

.particles {
    position: fixed;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;
}


.particle {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--celanya-gold);

    box-shadow:
        0 0 12px
        rgba(214, 183, 106, 0.65);

    opacity: 0.45;

    animation:
        particleFloat
        9s
        ease-in-out
        infinite;
}


.particle--1 {
    top: 21%;
    left: 14%;
}


.particle--2 {
    top: 31%;
    right: 12%;

    animation-delay: 1.8s;
}


.particle--3 {
    top: 50%;
    left: 7%;

    animation-delay: 3.2s;
}


.particle--4 {
    top: 64%;
    right: 17%;

    animation-delay: 1.1s;
}


.particle--5 {
    top: 75%;
    left: 28%;

    animation-delay: 4.2s;
}


.particle--6 {
    top: 18%;
    right: 31%;

    animation-delay: 2.5s;
}


.particle--7 {
    top: 83%;
    right: 36%;

    animation-delay: 0.7s;
}


.particle--8 {
    top: 45%;
    left: 42%;

    animation-delay: 3.8s;
}


@keyframes particleFloat {

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

        opacity: 0.28;
    }

    50% {
        transform:
            translateY(-22px);

        opacity: 0.82;
    }

}


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

.page {
    position: relative;

    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    min-height: 100vh;

    padding:
        70px
        32px
        90px;
}


/* =========================================================
   CHARACTER
========================================================= */

.character {
    position: absolute;

    top: 50%;
    right: 3vw;

    z-index: 2;

    width:
        min(
            40vw,
            650px
        );

    height: 760px;

    transform:
        translateY(-50%);

    pointer-events: none;
}


.character__image {
    position: absolute;

    top: 50%;
    right: 0;

    z-index: 2;

    width: 100%;
    height: auto;

    max-height: 720px;

    object-fit: contain;

    object-position: center;

    transform:
        translateY(-50%);

    filter:
        drop-shadow(
            0
            28px
            55px
            rgba(0, 0, 0, 0.35)
        );

    pointer-events: none;
}


/* =========================================================
   CHARACTER HALO
========================================================= */

.character__halo {
    position: absolute;

    top: 50%;
    left: 50%;

    z-index: 1;

    width: 320px;
    height: 320px;

    border:
        1px solid
        rgba(214, 183, 106, 0.52);

    border-radius: 50%;

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

    box-shadow:
        0 0 50px
        rgba(214, 183, 106, 0.16),
        inset 0 0 34px
        rgba(214, 183, 106, 0.08);

    animation:
        haloPulse
        6s
        ease-in-out
        infinite;
}


.character__halo::before {
    content: "";

    position: absolute;

    inset: 24px;

    border:
        1px solid
        rgba(214, 183, 106, 0.25);

    border-radius: 50%;
}


@keyframes haloPulse {

    0%,
    100% {
        box-shadow:
            0 0 44px
            rgba(214, 183, 106, 0.14),
            inset 0 0 30px
            rgba(214, 183, 106, 0.07);
    }

    50% {
        box-shadow:
            0 0 74px
            rgba(214, 183, 106, 0.28),
            inset 0 0 48px
            rgba(214, 183, 106, 0.10);
    }

}


/* =========================================================
   HALO STARS
========================================================= */

.halo-star {
    position: absolute;

    color:
        var(--celanya-gold-soft);

    font-size: 1.25rem;

    text-shadow:
        0 0 10px
        rgba(214, 183, 106, 0.65);
}


.halo-star--1 {
    top: -10px;
    left: 50%;

    transform:
        translateX(-50%);
}


.halo-star--2 {
    top: 12%;
    right: 7%;
}


.halo-star--3 {
    top: 50%;
    right: -10px;

    transform:
        translateY(-50%);
}


.halo-star--4 {
    right: 8%;
    bottom: 11%;
}


.halo-star--5 {
    bottom: -10px;
    left: 50%;

    transform:
        translateX(-50%);
}


.halo-star--6 {
    bottom: 10%;
    left: 7%;
}


.halo-star--7 {
    top: 50%;
    left: -10px;

    transform:
        translateY(-50%);
}


.halo-star--8 {
    top: 11%;
    left: 7%;
}


/* =========================================================
   LINKTREE WRAPPER
========================================================= */

.linktree {
    position: relative;

    z-index: 3;

    width:
        min(
            100%,
            590px
        );

    margin-right:
        min(
            34vw,
            470px
        );
}


/* =========================================================
   PROFILE
========================================================= */

.profile {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-bottom: 34px;

    text-align: center;
}


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

.profile__celestial {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-bottom: 16px;

    color:
        var(--celanya-gold-soft);

    font-size: 1rem;
}


.profile__moon {
    color:
        var(--celanya-moon-soft);

    font-size: 1.5rem;

    text-shadow:
        0 0 14px
        rgba(244, 247, 223, 0.35);
}


/* =========================================================
   AVATAR
========================================================= */

.profile__avatar-wrapper {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 156px;
    height: 156px;

    margin-bottom: 18px;
}


.profile__avatar-halo {
    position: absolute;

    inset: -10px;

    border:
        1px solid
        rgba(214, 183, 106, 0.52);

    border-radius: 50%;

    box-shadow:
        0 0 26px
        rgba(214, 183, 106, 0.17);

    animation:
        avatarHalo
        5s
        ease-in-out
        infinite;
}


.profile__avatar-halo::before,
.profile__avatar-halo::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 7px;
    height: 7px;

    background:
        var(--celanya-gold-soft);

    transform:
        translate(-50%, -50%)
        rotate(45deg);

    box-shadow:
        0 0 12px
        rgba(214, 183, 106, 0.72);
}


.profile__avatar-halo::before {
    top: 0;
}


.profile__avatar-halo::after {
    top: auto;
    bottom: -7px;
}


.profile__avatar {
    width: 140px;
    height: 140px;

    border:
        3px solid
        rgba(244, 247, 223, 0.78);

    border-radius: 50%;

    object-fit: cover;
    object-position: center;

    background:
        var(--celanya-night);

    box-shadow:
        0 12px 34px
        rgba(0, 0, 0, 0.34);
}


@keyframes avatarHalo {

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

        opacity: 0.72;
    }

    50% {
        transform:
            scale(1.035);

        opacity: 1;
    }

}


/* =========================================================
   PROFILE TEXT
========================================================= */

.profile__eyebrow {
    margin:
        0
        0
        4px;

    color:
        var(--celanya-gold);

    font-size: 0.72rem;

    font-weight: 800;

    letter-spacing: 0.22em;

    text-transform: uppercase;
}


.profile__name {
    margin: 0;

    color:
        var(--celanya-moon-soft);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

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

    font-weight: 500;

    line-height: 1;

    letter-spacing: 0.02em;

    text-shadow:
        0 0 28px
        rgba(244, 247, 223, 0.14);
}


.profile__title {
    margin:
        9px
        0
        0;

    color:
        var(--celanya-twilight-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.04rem;

    font-style: italic;

    letter-spacing: 0.05em;
}


/* =========================================================
   PROFILE SEPARATOR
========================================================= */

.profile__separator {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    width:
        min(
            100%,
            340px
        );

    margin:
        19px
        auto;
}


.profile__separator span {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214, 183, 106, 0.55)
        );
}


.profile__separator span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(214, 183, 106, 0.55),
            transparent
        );
}


.profile__separator i {
    color:
        var(--celanya-gold);

    font-size: 0.8rem;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.profile__description {
    max-width: 460px;

    margin: 0;

    color:
        var(--celanya-text-soft);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 0.98rem;

    line-height: 1.7;
}


/* =========================================================
   LINKS
========================================================= */

.links {
    display: flex;
    flex-direction: column;

    gap: 14px;
}


/* =========================================================
   LINK CARD
========================================================= */

.link-card {
    position: relative;

    display: flex;
    align-items: center;

    gap: 15px;

    width: 100%;

    min-height: 78px;

    padding:
        13px
        18px;

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

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(17, 21, 30, 0.88),
            rgba(41, 45, 56, 0.72)
        );

    box-shadow:
        0
        14px
        36px
        rgba(0, 0, 0, 0.18);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    overflow: hidden;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.link-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: -130%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(244, 247, 223, 0.10),
            transparent
        );

    transform:
        skewX(-18deg);

    transition:
        left 0.6s ease;
}


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

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

    background:
        linear-gradient(
            135deg,
            rgba(29, 34, 46, 0.96),
            rgba(62, 74, 97, 0.78)
        );

    box-shadow:
        0
        18px
        42px
        rgba(0, 0, 0, 0.25),
        0
        0
        26px
        rgba(214, 183, 106, 0.09);

    outline: none;
}


.link-card:hover::before,
.link-card:focus-visible::before {
    left: 145%;
}


/* =========================================================
   LINK ICON
========================================================= */

.link-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 48px;
    height: 48px;

    border:
        1px solid
        rgba(214, 183, 106, 0.34);

    border-radius: 15px;

    color:
        var(--celanya-gold-soft);

    background:
        rgba(214, 183, 106, 0.07);

    font-size: 1.25rem;

    transition:
        transform 0.25s ease,
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}


.link-card:hover
.link-card__icon {
    transform:
        scale(1.06);

    color:
        var(--celanya-moon-soft);

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

    background:
        rgba(244, 247, 223, 0.07);
}


/* =========================================================
   LINK CONTENT
========================================================= */

.link-card__content {
    display: flex;
    flex: 1;
    flex-direction: column;

    min-width: 0;
}


.link-card__label {
    color:
        var(--celanya-moon-soft);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.06rem;

    font-weight: 600;
}


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

    color:
        var(--celanya-text-soft);

    font-size: 0.78rem;

    line-height: 1.35;
}


/* =========================================================
   LINK ARROW
========================================================= */

.link-card__arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 34px;
    height: 34px;

    color:
        rgba(214, 183, 106, 0.65);

    font-size: 0.82rem;

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


.link-card:hover
.link-card__arrow {
    transform:
        translate(
            2px,
            -2px
        );

    color:
        var(--celanya-moon-soft);
}


/* =========================================================
   SUPPORT
========================================================= */

.support {
    margin-top: 38px;
}


.support__heading {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 16px;

    text-align: center;
}


.support__line {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(209, 136, 119, 0.48)
        );
}


.support__line:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(209, 136, 119, 0.48),
            transparent
        );
}


.support__eyebrow {
    margin:
        0
        0
        2px;

    color:
        var(--celanya-twilight-light);

    font-size: 0.58rem;

    font-weight: 800;

    letter-spacing: 0.14em;
}


.support__title {
    margin: 0;

    color:
        var(--celanya-moon-soft);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.06rem;

    font-weight: 500;
}


/* =========================================================
   SUPPORT CARD
========================================================= */

.link-card--support {
    border-color:
        rgba(209, 136, 119, 0.48);

    background:
        linear-gradient(
            135deg,
            rgba(115, 64, 71, 0.78),
            rgba(209, 136, 119, 0.40),
            rgba(17, 21, 30, 0.88)
        );
}


.link-card--support
.link-card__icon {
    border-color:
        rgba(226, 167, 127, 0.45);

    color: #F3C0B2;

    background:
        rgba(226, 167, 127, 0.10);
}


.link-card--support:hover {
    border-color:
        rgba(226, 167, 127, 0.88);

    box-shadow:
        0
        18px
        45px
        rgba(115, 64, 71, 0.28),
        0
        0
        30px
        rgba(226, 167, 127, 0.12);
}


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

.footer {
    margin-top: 46px;

    padding:
        4px
        20px
        0;

    text-align: center;
}


.footer__stars {
    margin-bottom: 14px;

    color:
        var(--celanya-gold);

    font-size: 0.8rem;

    letter-spacing: 0.55em;
}


.footer__stars span {
    color:
        var(--celanya-moon-soft);

    font-size: 1rem;
}


.footer__quote {
    max-width: 430px;

    margin:
        0
        auto;

    color:
        var(--celanya-text-soft);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 0.84rem;

    font-style: italic;

    line-height: 1.65;
}


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

.footer__credits {
    margin:
        17px
        0
        0;

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

    font-size: 0.72rem;
}


.footer__creator {
    position: relative;

    color:
        var(--celanya-gold-soft);

    font-weight: 700;

    transition:
        color 0.2s ease,
        text-shadow 0.2s ease;
}


.footer__creator::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: -3px;
    left: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--celanya-twilight-light),
            transparent
        );

    transform:
        scaleX(0);

    transition:
        transform 0.25s ease;
}


.footer__creator:hover,
.footer__creator:focus-visible {
    color:
        var(--celanya-twilight-light);

    text-shadow:
        0 0 12px
        rgba(226, 167, 127, 0.26);

    outline: none;
}


.footer__creator:hover::after,
.footer__creator:focus-visible::after {
    transform:
        scaleX(1);
}


/* =========================================================
   COPYRIGHT
========================================================= */

.footer__copyright {
    margin:
        8px
        0
        0;

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

    font-size: 0.66rem;

    letter-spacing: 0.06em;
}


/* =========================================================
   LINK CLICK EFFECT
========================================================= */

.link-card--clicked {
    animation:
        linkCardClick
        0.42s
        ease;
}


@keyframes linkCardClick {

    0% {
        transform:
            scale(1);
    }

    35% {
        transform:
            scale(0.975);
    }

    70% {
        transform:
            scale(1.015);
    }

    100% {
        transform:
            scale(1);
    }

}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 9px;
}


::-webkit-scrollbar-track {
    background:
        var(--celanya-background);
}


::-webkit-scrollbar-thumb {
    border:
        2px solid
        var(--celanya-background);

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--celanya-blue-light),
            var(--celanya-twilight-dark)
        );
}


::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            var(--celanya-gold),
            var(--celanya-twilight)
        );
}

/* =========================================================
   INTRO ÉCLIPSE — VERSION SOLAIRE ROUGE / CLIQUABLE
========================================================= */

.eclipse-intro {
    background:
        radial-gradient(
            circle at 50% 43%,
            rgba(150, 25, 18, 0.20),
            transparent 25%
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(95, 12, 12, 0.15),
            transparent 42%
        ),
        radial-gradient(
            circle at 18% 20%,
            rgba(226, 167, 127, 0.04),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #05060B 0%,
            #09070C 50%,
            #0D0A11 100%
        );
}


.eclipse-intro__eclipse {
    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    transition:
        transform 0.35s ease,
        filter 0.35s ease;

    isolation: isolate;
}


.eclipse-intro__eclipse:hover {
    transform:
        scale(1.035);

    filter:
        drop-shadow(
            0 0 34px
            rgba(255, 77, 28, 0.28)
        );
}


.eclipse-intro__eclipse:active {
    transform:
        scale(0.985);
}


.eclipse-intro__eclipse:focus-visible {
    outline:
        1px solid
        rgba(255, 180, 92, 0.90);

    outline-offset:
        18px;

    border-radius:
        50%;
}


.eclipse-intro__moon {
    background:
        radial-gradient(
            circle at 42% 36%,
            #17131A 0%,
            #0B0C12 52%,
            #05060A 100%
        );

    box-shadow:
        inset -10px -6px 26px rgba(124, 24, 18, 0.20),
        0 0 24px rgba(255, 99, 36, 0.15),
        0 0 70px rgba(157, 26, 18, 0.12);
}


.eclipse-intro__shadow {
    background:
        radial-gradient(
            circle at 64% 38%,
            #101118 0%,
            #07080D 62%,
            #020307 100%
        );
}


.eclipse-intro__corona {
    inset:
        -10px;

    opacity:
        0;

    background:
        conic-gradient(
            from 0deg,
            rgba(255, 203, 109, 0.92),
            rgba(255, 80, 20, 0.88),
            rgba(164, 17, 14, 0.72),
            rgba(255, 147, 47, 0.92),
            rgba(255, 219, 137, 0.95),
            rgba(226, 47, 15, 0.82),
            rgba(255, 203, 109, 0.92)
        );

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 45%,
            #000 49% 55%,
            transparent 61%
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 45%,
            #000 49% 55%,
            transparent 61%
        );

    filter:
        blur(3px);

    box-shadow:
        0 0 16px rgba(255, 217, 133, 0.95),
        0 0 38px rgba(255, 112, 36, 0.78),
        0 0 75px rgba(196, 31, 17, 0.56),
        0 0 130px rgba(113, 12, 15, 0.32);

    animation:
        eclipseIntroCoronaFire
        1.5s
        ease
        2.65s
        forwards;
}


.eclipse-intro__fire {
    position: absolute;

    inset:
        -24px;

    z-index:
        0;

    border-radius:
        50%;

    pointer-events:
        none;

    opacity:
        0;

    background:
        conic-gradient(
            from 15deg,
            transparent 0deg 13deg,
            rgba(255, 67, 20, 0.76) 17deg,
            transparent 24deg 48deg,
            rgba(255, 169, 55, 0.68) 54deg,
            transparent 63deg 91deg,
            rgba(202, 34, 16, 0.74) 97deg,
            transparent 106deg 139deg,
            rgba(255, 104, 27, 0.72) 146deg,
            transparent 156deg 197deg,
            rgba(255, 193, 73, 0.66) 205deg,
            transparent 217deg 253deg,
            rgba(189, 24, 15, 0.70) 261deg,
            transparent 272deg 311deg,
            rgba(255, 112, 31, 0.72) 320deg,
            transparent 333deg 360deg
        );

    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 45%,
            #000 52% 58%,
            transparent 68%
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 45%,
            #000 52% 58%,
            transparent 68%
        );

    filter:
        blur(6px);

    animation:
        eclipseFireAppear
        1.2s
        ease
        2.85s
        forwards,
        eclipseFireRotate
        11s
        linear
        4s
        infinite;
}


.eclipse-intro__fire--2 {
    inset:
        -36px;

    filter:
        blur(12px);

    transform:
        rotate(90deg);

    opacity:
        0;

    animation:
        eclipseFireAppearSoft
        1.4s
        ease
        3s
        forwards,
        eclipseFireRotateReverse
        16s
        linear
        4.2s
        infinite;
}


.eclipse-intro__fire--3 {
    inset:
        -50px;

    filter:
        blur(22px);

    transform:
        rotate(180deg);

    opacity:
        0;

    animation:
        eclipseFireAppearGlow
        1.6s
        ease
        3.1s
        forwards,
        eclipseFirePulse
        3.2s
        ease-in-out
        4.4s
        infinite;
}


.eclipse-intro__star {
    color:
        #E8B36B;

    text-shadow:
        0 0 8px rgba(255, 193, 90, 0.75),
        0 0 18px rgba(194, 42, 18, 0.38);
}


.eclipse-intro__separator i {
    color:
        #E3A451;

    text-shadow:
        0 0 10px rgba(255, 112, 36, 0.42);
}


.eclipse-intro__separator span {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214, 117, 64, 0.55)
        );
}


.eclipse-intro__separator span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(214, 117, 64, 0.55),
            transparent
        );
}


.eclipse-intro__text {
    color:
        #EAD8C5;

    text-shadow:
        0 0 14px rgba(255, 115, 48, 0.18);
}


/* ---------------------------------------------------------
   SORTIE APRÈS LE CLIC
--------------------------------------------------------- */

.eclipse-intro--leaving {
    pointer-events:
        none;

    animation:
        eclipseEnterSite
        1.3s
        cubic-bezier(.65, 0, .35, 1)
        forwards;
}


.eclipse-intro--leaving
.eclipse-intro__eclipse {
    animation:
        eclipseEnterMoon
        1.15s
        ease
        forwards;
}


.eclipse-intro--leaving
.eclipse-intro__separator,
.eclipse-intro--leaving
.eclipse-intro__text {
    animation:
        eclipseEnterText
        0.42s
        ease
        forwards;
}


/* ---------------------------------------------------------
   ANIMATIONS FEU
--------------------------------------------------------- */

@keyframes eclipseIntroCoronaFire {

    0% {
        opacity:
            0;

        transform:
            scale(0.94)
            rotate(0deg);
    }

    55% {
        opacity:
            1;

        transform:
            scale(1.04)
            rotate(5deg);
    }

    100% {
        opacity:
            0.95;

        transform:
            scale(1)
            rotate(0deg);
    }

}


@keyframes eclipseFireAppear {

    from {
        opacity:
            0;

        transform:
            scale(0.88);
    }

    to {
        opacity:
            0.82;

        transform:
            scale(1);
    }

}


@keyframes eclipseFireAppearSoft {

    from {
        opacity:
            0;
    }

    to {
        opacity:
            0.48;
    }

}


@keyframes eclipseFireAppearGlow {

    from {
        opacity:
            0;
    }

    to {
        opacity:
            0.30;
    }

}


@keyframes eclipseFireRotate {

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes eclipseFireRotateReverse {

    to {
        transform:
            rotate(-270deg);
    }

}


@keyframes eclipseFirePulse {

    0%,
    100% {
        opacity:
            0.22;

        transform:
            scale(0.98)
            rotate(180deg);
    }

    50% {
        opacity:
            0.40;

        transform:
            scale(1.06)
            rotate(184deg);
    }

}


@keyframes eclipseEnterMoon {

    0% {
        transform:
            scale(1);

        opacity:
            1;
    }

    42% {
        transform:
            scale(1.10);

        opacity:
            1;

        filter:
            drop-shadow(
                0 0 55px
                rgba(255, 86, 28, 0.62)
            );
    }

    100% {
        transform:
            scale(1.55);

        opacity:
            0;

        filter:
            drop-shadow(
                0 0 120px
                rgba(255, 76, 24, 0)
            );
    }

}


@keyframes eclipseEnterText {

    to {
        opacity:
            0;

        transform:
            translateY(10px);
    }

}


@keyframes eclipseEnterSite {

    0% {
        opacity:
            1;

        visibility:
            visible;
    }

    64% {
        opacity:
            1;
    }

    100% {
        opacity:
            0;

        visibility:
            hidden;
    }

}