/* =====================================================
   SORINE — FORME CÉLESTE
   Rose • Ivoire • Or • Rouge rubis
===================================================== */

/* =====================================================
   VARIABLES DU THÈME
===================================================== */

body.theme-celeste {

    /* FOND */

    --bg-primary: #fce8ef;

    /* CARTE */

    --card-bg: rgba(255, 250, 247, 0.94);
    --card-border: rgba(214, 169, 90, 0.65);
    --card-shadow: rgba(158, 40, 62, 0.15);

    /* TEXTES ROUGE RUBIS */

    --text-primary: #722034;
    --text-secondary: #9e283e;

    /* COULEURS PRINCIPALES */

    --accent-primary: #9e283e;
    --accent-secondary: #b48a42;

    /* PALETTE CÉLESTE */

    --ruby-primary: #9e283e;
    --ruby-dark: #722034;
    --ruby-light: #b94759;
    --ruby-soft: #f4c9d1;

    /* BOUTONS : DÉGRADÉ CONSERVÉ */

    --button-bg: linear-gradient(
        135deg,
        rgba(255, 239, 210, 0.95),
        rgba(249, 205, 225, 0.95)
    );

    /* LIENS */

    --link-bg: rgba(255, 242, 246, 0.8);

    /* LUEURS */

    --glow-color: rgba(235, 203, 131, 0.4);
    --character-shadow: rgba(158, 40, 62, 0.2);

    /* VOILE DU FOND */

    --background-overlay: linear-gradient(
        180deg,
        rgba(255, 235, 245, 0.1),
        rgba(255, 231, 242, 0.35)
    );

    /* VOILE BANNIÈRE */

    --banner-overlay: linear-gradient(
        90deg,
        rgba(255, 240, 245, 0.05),
        rgba(255, 244, 235, 0.8)
    );

    --banner-title: #9e283e;

    --bottom-banner-image:
        url("../images/celeste/celeste_bg.png");

    /* AILES SUPÉRIEURES */

    --wings-top-width: 1650px;
    --wings-top-top: -230px;

    /* AILES INFÉRIEURES */

    --wings-bottom-width: 1700px;
    --wings-bottom-offset: -100px;
}

/* =====================================================
   CARTE CÉLESTE
===================================================== */

body.theme-celeste .profile-card {

    background: linear-gradient(
        145deg,
        rgba(255, 252, 248, 0.96),
        rgba(255, 236, 245, 0.94)
    );

    border-color: rgba(214, 169, 90, 0.7);
}

/* =====================================================
   HALO DU PERSONNAGE
===================================================== */

body.theme-celeste .character-glow {

    background: radial-gradient(
        circle,
        rgba(255, 232, 163, 0.65),
        rgba(244, 181, 206, 0.2) 55%,
        transparent 75%
    );
}

/* =====================================================
   LUMIÈRE DES AILES
===================================================== */

body.theme-celeste .decor-wings-top,
body.theme-celeste .decor-wings-bottom {

    filter:
        drop-shadow(
            0 0 18px rgba(255, 215, 170, 0.25)
        )
        drop-shadow(
            0 0 35px rgba(255, 185, 220, 0.15)
        );
}

/* =====================================================
   TITRE SUPÉRIEUR
   ✦ L'UNIVERS DE SORINE ✦
===================================================== */

body.theme-celeste .site-header {
    position: relative;
    z-index: 10;
}

body.theme-celeste .site-header h1,
body.theme-celeste .site-header .site-title,
body.theme-celeste .header-title,
body.theme-celeste .universe-title {

    color: #9e283e !important;

    text-shadow:
        0 1px 2px rgba(255, 250, 240, 1),
        0 0 8px rgba(255, 245, 225, 0.85),
        0 0 16px rgba(158, 40, 62, 0.15);
}

/* =====================================================
   BANNIÈRE SUPÉRIEURE
   Sorine
   Multiples formes, une seule âme
===================================================== */

body.theme-celeste .banner-content,
body.theme-celeste .banner-content *,
body.theme-celeste .banner-title,
body.theme-celeste .banner-subtitle {

    color: #9e283e !important;
}

/* =====================================================
   TITRE PRINCIPAL
   Sorine
===================================================== */

body.theme-celeste .profile-title {

    color: #9e283e !important;

    text-shadow:
        0 0 12px rgba(158, 40, 62, 0.15),
        0 0 20px rgba(255, 232, 163, 0.2);
}

/* =====================================================
   DESCRIPTION DU PROFIL
===================================================== */

body.theme-celeste .profile-description,
body.theme-celeste .profile-card .profile-description {

    color: #9e283e !important;
}

/* =====================================================
   BOUTON MÉTAMORPHOSE
   Forme mystique
===================================================== */

body.theme-celeste .transform-button,
body.theme-celeste .transform-button * {

    color: #9e283e !important;
}

/* =====================================================
   TEXTE SOUS LE BOUTON
===================================================== */

body.theme-celeste .transform-hint,
body.theme-celeste .transform-description,
body.theme-celeste .transform-text {

    color: #9e283e !important;
}

/* =====================================================
   LIENS SOCIAUX
   TEXTE ROUGE RUBIS
===================================================== */

body.theme-celeste .social-link {

    color: #9e283e !important;
}

/* TITRES DES LIENS */

body.theme-celeste .social-link span,
body.theme-celeste .social-link .link-title,
body.theme-celeste .social-link .social-name {

    color: #9e283e !important;
}

/* =====================================================
   SURVOL DES LIENS
   UNIQUEMENT LA COULEUR DU TEXTE
   LE DÉGRADÉ RESTE INCHANGÉ
===================================================== */

body.theme-celeste .social-link:hover {

    color: #722034 !important;
}

body.theme-celeste .social-link:hover span,
body.theme-celeste .social-link:hover .link-title,
body.theme-celeste .social-link:hover .social-name {

    color: #722034 !important;
}

/* =====================================================
   PARTICULES CLASSIQUES
===================================================== */

body.theme-celeste .particle {

    background: #ebcb83;

    box-shadow:
        0 0 12px #ebcb83;
}

/* =====================================================
   MASQUER LES FEUX FOLLETS MYSTIQUES
===================================================== */

body.theme-celeste .mystique-wisp {
    display: none;
}

/* =====================================================
   PLUMES CÉLESTES — VISIBILITÉ
===================================================== */

body:not(.theme-celeste) .celeste-feather {
    display: none;
}

/* =====================================================
   CONTENEUR DES PLUMES
===================================================== */

body.theme-celeste .celeste-feather {

    position: absolute;
    display: block;

    left: var(--left, 50%);
    top: -80px;

    width: var(--feather-size, 45px);

    height: calc(
        var(--feather-size, 45px) * 2.3
    );

    pointer-events: none;

    opacity: 0;

    background: transparent;
    border: none;
    box-shadow: none;
    filter: none;

    animation:
        celestialFeatherFall
        var(--duration, 25s)
        linear
        var(--delay, 0s)
        infinite;

    will-change: transform, opacity;
}

/* =====================================================
   FORME PRINCIPALE DE LA PLUME
===================================================== */

body.theme-celeste .feather-shape {

    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    background: transparent;
    border: none;
    border-radius: 0;

    box-shadow: none;
    filter: none;

    transform-origin: center 35%;

    animation:
        celestialFeatherSway
        4.5s
        ease-in-out
        infinite alternate;

    will-change: transform;
}

/* =====================================================
   IMAGE PNG DE LA PLUME
===================================================== */

body.theme-celeste .feather-image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    background: transparent;
    border: none;
    box-shadow: none;
    filter: none;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* =====================================================
   CHUTE NATURELLE DES PLUMES
===================================================== */

@keyframes celestialFeatherFall {

    0% {
        transform:
            translate3d(0, -30px, 0)
            rotate(-12deg);

        opacity: 0;
    }

    8% {
        opacity: 0.9;
    }

    15% {
        transform:
            translate3d(
                calc(var(--sway, 50px) * 0.45),
                15vh,
                0
            )
            rotate(12deg);
    }

    30% {
        transform:
            translate3d(
                var(--sway, 50px),
                32vh,
                0
            )
            rotate(28deg);

        opacity: 1;
    }

    45% {
        transform:
            translate3d(
                calc(var(--sway, 50px) * -0.35),
                49vh,
                0
            )
            rotate(-18deg);
    }

    60% {
        transform:
            translate3d(
                calc(var(--sway, 50px) * -0.75),
                67vh,
                0
            )
            rotate(-32deg);

        opacity: 0.95;
    }

    75% {
        transform:
            translate3d(
                calc(var(--sway, 50px) * 0.5),
                85vh,
                0
            )
            rotate(20deg);
    }

    90% {
        transform:
            translate3d(
                var(--drift, 80px),
                103vh,
                0
            )
            rotate(35deg);

        opacity: 0.8;
    }

    100% {
        transform:
            translate3d(
                var(--drift, 80px),
                calc(115vh + 150px),
                0
            )
            rotate(45deg);

        opacity: 0;
    }
}

/* =====================================================
   BALANCEMENT AÉRIEN DES PLUMES
===================================================== */

@keyframes celestialFeatherSway {

    0% {
        transform:
            rotate(-18deg)
            scaleX(0.85)
            rotateY(-12deg);
    }

    25% {
        transform:
            rotate(-5deg)
            scaleX(0.95)
            rotateY(0deg);
    }

    50% {
        transform:
            rotate(12deg)
            scaleX(1)
            rotateY(15deg);
    }

    75% {
        transform:
            rotate(20deg)
            scaleX(0.9)
            rotateY(5deg);
    }

    100% {
        transform:
            rotate(-10deg)
            scaleX(0.85)
            rotateY(-12deg);
    }
}

/* =====================================================
   SUPPRESSION DES ANCIENS HALOS
===================================================== */

body.theme-celeste .celeste-feather,
body.theme-celeste .feather-shape,
body.theme-celeste .feather-image {

    background: transparent;
    box-shadow: none !important;
    filter: none !important;
    backdrop-filter: none !important;
}

/* =====================================================
   SUPPRESSION DES ANCIENS PSEUDO-ÉLÉMENTS
===================================================== */

body.theme-celeste .feather-shape::before,
body.theme-celeste .feather-shape::after {

    content: none !important;
    display: none !important;
}

/* =====================================================
   ANIMATION DES PLUMES
   CORRECTION VALIDÉE CONSERVÉE
===================================================== */

body.theme-celeste .particles .celeste-feather {

    position: absolute;

    left: var(--left, 50%);
    top: -100px;

    width: var(--feather-size, 42px);
    height: calc(var(--feather-size, 42px) * 2.3);

    max-width: 65px;

    opacity: 0;

    pointer-events: none;

    animation:
        celestialFeatherFall
        var(--duration, 25s)
        linear
        var(--delay, 0s)
        infinite !important;

    animation-play-state: running !important;
}

body.theme-celeste .particles .feather-shape {

    width: 100%;
    height: 100%;

    animation:
        celestialFeatherSway
        4.5s
        ease-in-out
        infinite alternate !important;

    animation-play-state: running !important;
}

body.theme-celeste .particles .feather-image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

/* =====================================================
   PIED DE PAGE
===================================================== */

body.theme-celeste .site-footer a {

    color: #9e283e;
}