/* =====================================================
   SORINE — STYLE PRINCIPAL
   Site de liens interactif
   Mystique / Céleste
===================================================== */

/* =====================================================
   VARIABLES GLOBALES
===================================================== */

:root {
    --pink: #f4b5ce;
    --cyan: #a5e9f8;
    --gold: #ebcb83;
    --ivory: #fff6f1;

    --font-main: "Nunito", sans-serif;
    --font-title: "Cormorant Garamond", serif;

    --container-width: 680px;
    --transition-theme: 0.8s ease;

    /* BANNIÈRES SUPÉRIEURES */

    --banner-mystique-position: center 0%;
    --banner-celeste-position: center 0%;

    /* BANNIÈRES INFÉRIEURES */

    --bottom-mystique-position: center 20%;
    --bottom-celeste-position: center 20%;

    /* AILES CÉLESTES */

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

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

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

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: clip;

    background: var(--bg-primary);
    color: var(--text-primary);

    font-family: var(--font-main);

    transition:
        background var(--transition-theme),
        color var(--transition-theme);
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    font: inherit;
    cursor: pointer;
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--accent-secondary);
    outline-offset: 4px;
}

img {
    max-width: 100%;
}

/* =====================================================
   FONDS DYNAMIQUES
===================================================== */

.background {
    position: fixed;
    inset: 0;
    z-index: 0;

    overflow: hidden;
    pointer-events: none;
}

.background-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    opacity: 0;

    transition: opacity 1.2s ease-in-out;
}

/* FOND MYSTIQUE */

.background-mystique {
    background-image:
        url("../images/mystique/mystique_bg.jpg");
}

/* FOND CÉLESTE */

.background-celeste {
    background-image:
        url("../images/celeste/celeste_bg.png");
}

/* CHANGEMENT DE FOND */

.theme-mystique .background-mystique,
.theme-celeste .background-celeste {
    opacity: 1;
}

/* =====================================================
   VOILE DU FOND
===================================================== */

.background-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: var(--background-overlay);

    pointer-events: none;

    transition: background 1.2s ease;
}

/* =====================================================
   PARTICULES MAGIQUES
   Feux follets mystiques / Poussières célestes
===================================================== */

.particles {
    position: absolute;
    inset: 0;

    z-index: 3;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;

    isolation: isolate;
}
/* =====================================================
   CONTENEUR PRINCIPAL
===================================================== */

.site-container {
    position: relative;
    z-index: 1;

    width: min(
        calc(100% - 32px),
        var(--container-width)
    );

    margin: 0 auto;
    padding: 35px 0 20px;
}

/* =====================================================
   EN-TÊTE
===================================================== */

.site-header {
    margin-bottom: 32px;

    color: var(--accent-primary);
    text-align: center;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;

    text-shadow:
        0 0 12px var(--glow-color);
}

/* =====================================================
   BANNIÈRE SUPÉRIEURE
===================================================== */

.sorine-banner {
    position: relative;
    isolation: isolate;

    width: 100%;
    height: 220px;

    margin-bottom: 42px;
    overflow: hidden;

    border: 2px solid var(--accent-secondary);
    border-radius: 28px;

    background: var(--card-bg);

    box-shadow:
        0 12px 40px var(--card-shadow),
        0 0 24px var(--glow-color);

    transition:
        border-color 0.8s ease,
        box-shadow 0.8s ease;
}

/* IMAGES DES BANNIÈRES */

.banner-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0;

    transition:
        opacity 1.2s ease,
        transform 1s ease;
}

/* BANNIÈRE MYSTIQUE */

.banner-mystique {
    background-image:
        url("../images/banners/banner_mystique.png");

    background-position:
        var(--banner-mystique-position);
}

/* BANNIÈRE CÉLESTE */

.banner-celeste {
    background-image:
        url("../images/banners/banner_celeste.png");

    background-position:
        var(--banner-celeste-position);
}

/* AFFICHAGE SELON LE THÈME */

.theme-mystique .banner-mystique,
.theme-celeste .banner-celeste {
    opacity: 1;
}

/* VOILE DE LA BANNIÈRE */

.banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;

    background: var(--banner-overlay);

    pointer-events: none;

    transition: background 1s ease;
}

/* CONTENU DE LA BANNIÈRE */

.banner-content {
    position: absolute;
    inset: 0;
    z-index: 2;

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

    padding: 35px;
    text-align: right;

    pointer-events: none;
}

.banner-symbol {
    color: var(--accent-secondary);
    font-size: 22px;
}

.banner-content h1 {
    margin: 0;

    color: var(--banner-title);

    font-family: var(--font-title);
    font-size: 65px;
    font-weight: 700;

    text-shadow:
        0 0 20px var(--glow-color);
}

.banner-content p {
    margin: 0;

    color: var(--banner-title);
    font-size: 13px;
    font-weight: 700;
}

/* ZOOM AU SURVOL */

.sorine-banner:hover .banner-image {
    transform: scale(1.04);
}

/* =====================================================
   SCÈNE PRINCIPALE
===================================================== */

.profile-scene {
    position: relative;
    isolation: isolate;

    width: 100%;
    overflow: visible;
}

/* =====================================================
   DÉCORATIONS DES DEUX FORMES
===================================================== */

.sorine-decorations {
    position: absolute;
    inset: 0;
    z-index: 0;

    pointer-events: none;
    overflow: visible;
}

.form-decoration {
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}

/* DÉCORATIONS ACTIVES */

.theme-mystique .mystique-decoration,
.theme-celeste .celeste-decoration {
    opacity: 1;
    visibility: visible;
}

/* IMAGES DÉCORATIVES */

.form-decoration img {
    position: absolute;
    display: block;

    height: auto;
    max-width: none;

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

/* =====================================================
   OREILLES MYSTIQUES
===================================================== */

.decor-ears {
    width: var(--ears-width, 640px);

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

    z-index: 0;

    transform: translateX(-50%);
    transform-origin: center bottom;
}

/* =====================================================
   QUEUE MYSTIQUE
===================================================== */

.decor-tail {
    width: var(--tail-width, 510px);

    top: var(--tail-top, 120px);
    left: var(--tail-left, -225px);

    z-index: 0;

    transform-origin: 75% 65%;
}

/* =====================================================
   AILES CÉLESTES
===================================================== */

/* AILES SUPÉRIEURES */

.decor-wings-top {
    position: absolute;

    width: var(--wings-top-width, 1650px);

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

    z-index: 0;

    transform: translateX(-50%);
    transform-origin: center 40%;

    pointer-events: none;
}

/* AILES INFÉRIEURES */

.decor-wings-bottom {
    position: absolute;

    width: var(--wings-bottom-width, 1700px);

    top: auto;
    bottom: var(--wings-bottom-offset, -100px);

    left: 50%;

    z-index: 0;

    transform: translateX(-50%);
    transform-origin: center 20%;

    pointer-events: none;
}

/* =====================================================
   CARTE PRINCIPALE
===================================================== */

.profile-card {
    position: relative;
    isolation: isolate;
    z-index: 1;

    width: 100%;

    padding: 30px 45px 32px;

    border: 1px solid var(--card-border);
    border-radius: 30px;

    background: var(--card-bg);

    box-shadow:
        0 20px 60px var(--card-shadow),
        0 0 25px var(--glow-color);

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

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

/* ÉTOILES */

.card-star {
    position: absolute;
    top: 30px;

    color: var(--accent-secondary);
    font-size: 32px;

    text-shadow:
        0 0 12px var(--glow-color);
}

.star-left {
    left: 28px;
}

.star-right {
    right: 28px;
}

/* =====================================================
   PERSONNAGE
===================================================== */

.character-container {
    position: relative;

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

    width: 100%;
    height: 420px;

    margin-bottom: 12px;
}

/* HALO */

.character-glow {
    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    background: radial-gradient(
        circle,
        var(--glow-color),
        transparent 72%
    );

    filter: blur(20px);
}

/* IMAGE DU PERSONNAGE */

.character-image {
    position: relative;
    z-index: 2;

    display: block;

    height: 100%;
    max-width: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 12px 18px var(--character-shadow)
        );
}

/* =====================================================
   INFORMATIONS DE SORINE
===================================================== */

.profile-information {
    position: relative;
    z-index: 2;

    text-align: center;
}

.profile-subtitle {
    margin: 0 0 5px;

    color: var(--accent-secondary);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 4px;
}

.profile-title {
    margin: 0;

    color: var(--accent-primary);

    font-family: var(--font-title);
    font-size: 70px;
    font-weight: 700;
    line-height: 1.1;

    text-shadow:
        0 0 22px var(--glow-color);
}

.profile-description {
    max-width: 380px;
    margin: 10px auto 0;

    color: var(--text-secondary);

    font-size: 14px;
    line-height: 1.7;
}

/* =====================================================
   MÉTAMORPHOSE
===================================================== */

.transformation-section {
    position: relative;
    z-index: 2;

    margin-top: 26px;
    text-align: center;
}

.transform-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;
    min-width: 270px;

    padding: 13px 24px;

    border: 2px solid var(--accent-secondary);
    border-radius: 50px;

    background: var(--button-bg);
    color: var(--text-primary);

    font-family: var(--font-title);
    font-size: 22px;
    font-style: italic;

    box-shadow:
        0 0 15px var(--glow-color);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.transform-button:hover:not(:disabled) {
    transform: translateY(-4px);

    box-shadow:
        0 0 30px var(--glow-color);
}

.transform-button:disabled {
    cursor: wait;
}

.transformation-hint {
    margin: 13px 0 0;

    color: var(--text-secondary);
    font-size: 12px;
}

/* SÉPARATEUR */

.ornamental-divider {
    margin: 30px 0;

    color: var(--accent-secondary);
    text-align: center;
    letter-spacing: 4px;
}

/* =====================================================
   LIENS OFFICIELS
===================================================== */

.social-links {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 12px;
    width: 100%;
}

.social-link {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 15px;
    min-height: 62px;

    padding: 12px 18px;

    border: 1px solid var(--card-border);
    border-radius: 14px;

    background: var(--link-bg);
    color: var(--text-primary);

    text-decoration: none;

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

.social-link:hover {
    transform: translateY(-4px) scale(1.01);

    border-color: var(--accent-secondary);
    background: var(--button-bg);

    box-shadow:
        0 8px 25px var(--glow-color);
}

/* ICÔNES */

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

    flex: 0 0 42px;
    height: 42px;

    color: var(--accent-secondary);
    font-size: 25px;
}

.social-name {
    flex: 1;

    text-align: center;
    font-size: 14px;
    font-weight: 800;
}

.social-arrow {
    color: var(--accent-secondary);
    font-size: 22px;
}

/* COULEURS DES PLATEFORMES */

.social-link:has(.fa-discord):hover .social-icon {
    color: #5865f2;
}

.social-link:has(.fa-twitch):hover .social-icon {
    color: #9146ff;
}

.social-link:has(.fa-tiktok):hover .social-icon {
    color: #ff4b78;
}

.social-link:has(.fa-instagram):hover .social-icon {
    color: #e1306c;
}

.social-link:has(.fa-youtube):hover .social-icon {
    color: #ff4444;
}

/* =====================================================
   PIED DE CARTE
===================================================== */

.profile-footer {
    position: relative;
    z-index: 2;

    margin: 32px 0 0;

    color: var(--accent-secondary);
    text-align: center;

    font-family: var(--font-title);
    font-size: 17px;
    font-style: italic;
}

/* =====================================================
   BANNIÈRE INFÉRIEURE
===================================================== */

.bottom-banner {
    position: relative;
    isolation: isolate;

    width: 100%;
    height: 250px;

    margin-top: 35px;
    overflow: hidden;

    border: 2px solid var(--accent-secondary);
    border-radius: 25px;

    background: var(--card-bg);

    box-shadow:
        0 12px 40px var(--card-shadow),
        0 0 25px var(--glow-color);

    transition:
        border-color 0.8s ease,
        box-shadow 0.8s ease;
}

.bottom-banner-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-size: cover;
    background-repeat: no-repeat;

    transition: transform 0.8s ease;
}

/* IMAGE INFÉRIEURE MYSTIQUE */

.theme-mystique .bottom-banner-image {
    background-image:
        url("../images/banners/bottom_mystique.jpg");

    background-position:
        var(--bottom-mystique-position);
}

/* IMAGE INFÉRIEURE CÉLESTE */

.theme-celeste .bottom-banner-image {
    background-image:
        url("../images/banners/bottom_celeste.png");

    background-position:
        var(--bottom-celeste-position);
}

/* ZOOM AU SURVOL */

.bottom-banner:hover .bottom-banner-image {
    transform: scale(1.05);
}

/* =====================================================
   FOOTER — CRÉDITS
===================================================== */

.site-footer {
    position: relative;
    z-index: 2;

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

    gap: 15px;
    padding: 28px 5px;

    color: var(--text-secondary);
    font-size: 12px;
}

.site-footer a {
    color: var(--accent-secondary);
    font-weight: 800;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}



/* =====================================================
   SORINE — SCROLLBAR MAGIQUE
   Dégradés Mystique / Céleste
===================================================== */

/* =====================================================
   VARIABLES PAR DÉFAUT — MYSTIQUE
===================================================== */

html {
    --scroll-track: #251e31;

    --scroll-gradient: linear-gradient(
        180deg,
        #a5e9f8 0%,
        #35c7eb 40%,
        #f4b5ce 100%
    );

    --scroll-gradient-hover: linear-gradient(
        180deg,
        #f4b5ce 0%,
        #64dfff 55%,
        #a5e9f8 100%
    );
}

/* =====================================================
   FORME MYSTIQUE
===================================================== */

html:has(body.theme-mystique) {

    --scroll-track: #251e31;

    --scroll-gradient: linear-gradient(
        180deg,
        #a5e9f8 0%,
        #35c7eb 40%,
        #f4b5ce 100%
    );

    --scroll-gradient-hover: linear-gradient(
        180deg,
        #f4b5ce 0%,
        #64dfff 55%,
        #a5e9f8 100%
    );
}

/* =====================================================
   FORME CÉLESTE
===================================================== */

html:has(body.theme-celeste) {

    --scroll-track: #f5d9e2;

    --scroll-gradient: linear-gradient(
        180deg,
        #eacb83 0%,
        #f4c9d1 45%,
        #9e283e 100%
    );

    --scroll-gradient-hover: linear-gradient(
        180deg,
        #9e283e 0%,
        #f4c9d1 50%,
        #eacb83 100%
    );
}

/* =====================================================
   CHROME / EDGE / SAFARI
===================================================== */

html::-webkit-scrollbar {
    width: 14px;
}

html::-webkit-scrollbar-track {
    background: var(--scroll-track);
    border-radius: 20px;
}

html::-webkit-scrollbar-thumb {

    background: var(--scroll-gradient);

    border-radius: 20px;

    border: 3px solid var(--scroll-track);
}

html::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-gradient-hover);
}

html::-webkit-scrollbar-corner {
    background: var(--scroll-track);
}

/* =====================================================
   FIREFOX
   Dégradé non pris en charge nativement
===================================================== */

@supports not selector(::-webkit-scrollbar) {

    html {
        scrollbar-width: thin;
        scrollbar-color: #a5e9f8 #251e31;
    }

    html:has(body.theme-celeste) {
        scrollbar-color: #b48a42 #f5d9e2;
    }
}