/* =============================================================================
   EVEROS - Logo animé
   -----------------------------------------------------------------------------
   Balisage : shortcode {% logoAnime %} (lib/logo-anime.js), qui inline
   src/logo.svg avec ses couches d'animation. Comportements : js/logo.js.
   Catalogue et raisons de chaque animation : design/logo-animations.md.

   Les pièces se ciblent par leurs classes lg-* (lg-star-north, lg-hilt...),
   identiques d'une copie à l'autre ; les ids, préfixés par copie, ne servent
   qu'aux masques. Modes posés sur le <svg> :
     lg-signature   repos : les couleurs des dieux
     lg-invocation  ouverture, retirée par le script une fois jouée
     lg-attente     chargement : la ronde des dieux + le flux
   Posées par le script : lg-survol (impulsion de survol), lg-jeu, lg-prise et
   lg-vol (jeu de l'étoile du Nord). Sur la page d'un dieu : lg-dieu et
   lg-dieu-<slug>.

   Tout passe par @keyframes : sur ces chemins SVG, transition: transform
   n'avance pas dans Chromium.
   ============================================================================= */

/* Couleurs des dieux. Nagir / Hypathie et Eromnia : provisoires. */
:root {
    --dieu-obsidienne: #c49a3c;
    --dieu-mantha: #9ddcbc;
    --dieu-nagir-hypathie: #a98bd6;
    --dieu-hisangard: #fdcd45;
    --dieu-eromnia: #3282b8;
    --dieu-light: #c89664;
    --dieu-elzeryn: #c4a65a;

    /* rythme de la signature */
    --lg-signature-delai: 40s;   /* temps passé sur la page avant que les couleurs n'apparaissent */
    --lg-signature-montee: 20s;  /* durée de leur apparition */
    --lg-signature-pas: 40s;     /* une étoile tient sa couleur 60 % du pas, puis glisse vers la suivante */
}

/* Propriétés animables : la teinte d'une étoile et l'intensité de la signature */
@property --lg-c {
    syntax: '<color>';
    inherits: true;
    initial-value: #fff;
}
@property --lg-teinte {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

/* ---- socle ---- */
.logo-anime {
    --lg-or: #c9a96e;
    display: block;
    height: auto;
    aspect-ratio: 404.07 / 485.77;
    overflow: visible;
    color: #fff;
    touch-action: none;
}
.logo-anime path,
.logo-anime g { transform-box: fill-box; transform-origin: center; }
.logo-anime .lg-all, .logo-anime .lg-rift, .logo-anime .lg-rift-fill, .logo-anime .lg-rift-light,
.logo-anime .lg-rift-body, .logo-anime .lg-rift-highlight, .logo-anime .lg-omega,
.logo-anime .lg-stars, .logo-anime .lg-sparks, .logo-anime .lg-hilt, .logo-anime .lg-cut-hilt {
    transform-box: view-box;
    transform-origin: 50% 50%;
}
.logo-anime .lg-star-north { transform-box: view-box; transform-origin: 200.8px 57px; }
.logo-anime .lg-band, .logo-anime .lg-fill-a { transform-box: view-box; }
/* les ailes se replient vers le corps du papillon */
.logo-anime .lg-wing-left, .logo-anime .lg-curl-left { transform-origin: 100% 50%; }
.logo-anime .lg-wing-right, .logo-anime .lg-curl-right { transform-origin: 0% 50%; }
.logo-anime .lg-rift-highlight { fill: var(--lg-or); }
.logo-anime .lg-north-ring { fill: none; stroke: var(--lg-or); }
.logo-anime .lg-logo-glow { color: var(--lg-or); }

/* ---- jeu : attraper l'étoile du Nord ---- */
.logo-anime .lg-north-hit { pointer-events: all; cursor: grab; }
.logo-anime.lg-invocation .lg-north-hit { pointer-events: none; }
.logo-anime.lg-jeu { position: relative; z-index: 1000; }
body.lg-prise-page,
body.lg-prise-page * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }

/* ---- signature : les couleurs des dieux ----
   Rien au chargement : les couleurs n'apparaissent qu'après un long moment
   passé sur la page (--lg-signature-delai) et montent lentement jusqu'à 38 %.
   Chaque étoile porte alors une couleur différente, la tient, puis glisse
   lentement vers la couleur de sa voisine (--lg-signature-pas) : les sept
   couleurs font le tour du logo dans le sens horaire depuis l'étoile du Nord,
   sans que deux étoiles ne partagent jamais la même.
   Couleur seulement, aucun mouvement : jouée même en mouvement réduit. */
@keyframes lg-teinte { from { --lg-teinte: 0; } to { --lg-teinte: 38; } }
@keyframes lg-dieux {
    0%, 8.57%       { --lg-c: var(--dieu-obsidienne); }
    14.29%, 22.86%  { --lg-c: var(--dieu-mantha); }
    28.57%, 37.14%  { --lg-c: var(--dieu-nagir-hypathie); }
    42.86%, 51.43%  { --lg-c: var(--dieu-hisangard); }
    57.14%, 65.71%  { --lg-c: var(--dieu-eromnia); }
    71.43%, 80%     { --lg-c: var(--dieu-light); }
    85.71%, 94.29%  { --lg-c: var(--dieu-elzeryn); }
    100%            { --lg-c: var(--dieu-obsidienne); }
}
/* sur la page d'un dieu : les six autres couleurs tournent sur les six étincelles */
@keyframes lg-dieux-6 {
    0%, 10%         { --lg-c: var(--lg-c1); }
    16.67%, 26.67%  { --lg-c: var(--lg-c2); }
    33.33%, 43.33%  { --lg-c: var(--lg-c3); }
    50%, 60%        { --lg-c: var(--lg-c4); }
    66.67%, 76.67%  { --lg-c: var(--lg-c5); }
    83.33%, 93.33%  { --lg-c: var(--lg-c6); }
    100%            { --lg-c: var(--lg-c1); }
}

/* Rang de chaque étoile dans le tour : décale sa couleur d'un pas.
   Porté par une variable pour ne jamais être écrasé par la règle générale. */
.logo-anime .lg-star-north { --lg-rang: -7; }
.logo-anime .lg-star-right-1 { --lg-rang: -6; }
.logo-anime .lg-star-right-2 { --lg-rang: -5; }
.logo-anime .lg-star-right-3 { --lg-rang: -4; }
.logo-anime .lg-star-left-3 { --lg-rang: -3; }
.logo-anime .lg-star-left-2 { --lg-rang: -2; }
.logo-anime .lg-star-left-1 { --lg-rang: -1; }

@supports (fill: color-mix(in srgb, currentColor 50%, red)) {
    .logo-anime.lg-signature {
        animation: lg-teinte var(--lg-signature-montee) ease-in-out var(--lg-signature-delai) forwards;
    }
    .logo-anime.lg-signature .lg-star-north > path,
    .logo-anime.lg-signature .lg-sparks > g > path {
        fill: color-mix(in srgb, var(--lg-c) calc(var(--lg-force, var(--lg-teinte)) * 1%), currentColor);
        animation: lg-dieux calc(var(--lg-signature-pas) * 7) linear calc(var(--lg-signature-pas) * var(--lg-rang)) infinite;
    }

    /* Page d'un dieu : l'étoile du Nord porte sa couleur, dès l'arrivée */
    .logo-anime.lg-signature.lg-dieu .lg-star-north > path {
        animation: none;
        --lg-c: var(--lg-nord);
        --lg-force: 46;
    }
    .logo-anime.lg-signature.lg-dieu .lg-sparks > g > path {
        animation-name: lg-dieux-6;
        animation-duration: calc(var(--lg-signature-pas) * 6);
    }
}

/* ordre du tour : obsidienne, mantha, nagir-hypathie, hisangard, eromnia, light, elzeryn */
.logo-anime.lg-dieu-obsidienne {
    --lg-nord: var(--dieu-obsidienne);
    --lg-c1: var(--dieu-mantha); --lg-c2: var(--dieu-nagir-hypathie); --lg-c3: var(--dieu-hisangard);
    --lg-c4: var(--dieu-eromnia); --lg-c5: var(--dieu-light); --lg-c6: var(--dieu-elzeryn);
}
.logo-anime.lg-dieu-mantha {
    --lg-nord: var(--dieu-mantha);
    --lg-c1: var(--dieu-nagir-hypathie); --lg-c2: var(--dieu-hisangard); --lg-c3: var(--dieu-eromnia);
    --lg-c4: var(--dieu-light); --lg-c5: var(--dieu-elzeryn); --lg-c6: var(--dieu-obsidienne);
}
.logo-anime.lg-dieu-nagir-hypathie {
    --lg-nord: var(--dieu-nagir-hypathie);
    --lg-c1: var(--dieu-hisangard); --lg-c2: var(--dieu-eromnia); --lg-c3: var(--dieu-light);
    --lg-c4: var(--dieu-elzeryn); --lg-c5: var(--dieu-obsidienne); --lg-c6: var(--dieu-mantha);
}
.logo-anime.lg-dieu-hisangard {
    --lg-nord: var(--dieu-hisangard);
    --lg-c1: var(--dieu-eromnia); --lg-c2: var(--dieu-light); --lg-c3: var(--dieu-elzeryn);
    --lg-c4: var(--dieu-obsidienne); --lg-c5: var(--dieu-mantha); --lg-c6: var(--dieu-nagir-hypathie);
}
.logo-anime.lg-dieu-eromnia {
    --lg-nord: var(--dieu-eromnia);
    --lg-c1: var(--dieu-light); --lg-c2: var(--dieu-elzeryn); --lg-c3: var(--dieu-obsidienne);
    --lg-c4: var(--dieu-mantha); --lg-c5: var(--dieu-nagir-hypathie); --lg-c6: var(--dieu-hisangard);
}
.logo-anime.lg-dieu-light {
    --lg-nord: var(--dieu-light);
    --lg-c1: var(--dieu-elzeryn); --lg-c2: var(--dieu-obsidienne); --lg-c3: var(--dieu-mantha);
    --lg-c4: var(--dieu-nagir-hypathie); --lg-c5: var(--dieu-hisangard); --lg-c6: var(--dieu-eromnia);
}
.logo-anime.lg-dieu-elzeryn {
    --lg-nord: var(--dieu-elzeryn);
    --lg-c1: var(--dieu-obsidienne); --lg-c2: var(--dieu-mantha); --lg-c3: var(--dieu-nagir-hypathie);
    --lg-c4: var(--dieu-hisangard); --lg-c5: var(--dieu-eromnia); --lg-c6: var(--dieu-light);
}

@media (prefers-reduced-motion: no-preference) {

    /* ---- ouverture : l'invocation ----
       L'étoile du Nord paraît et lance son onde ; les six dieux s'allument un à
       un ; un trait se dessine du haut vers le bas puis s'ouvre d'un coup en
       faille entière ; l'anneau et la garde se posent enfin par-dessus. */
    @keyframes lg-inv-levee { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
    @keyframes lg-inv-apparition { to { opacity: 1; } }
    @keyframes lg-inv-anneau { 0% { transform: scale(.5); opacity: .95; } 100% { transform: scale(2.7); opacity: 0; } }
    @keyframes lg-inv-trait { from { transform: translateY(0); } to { transform: translateY(570px); } }
    @keyframes lg-inv-paff { from { transform: scaleX(.035); } to { transform: scaleX(1); } }
    @keyframes lg-inv-eclat { 0% { opacity: 0; } 25% { opacity: .85; } 100% { opacity: 0; } }

    .logo-anime.lg-invocation .lg-rift-body,
    .logo-anime.lg-invocation .lg-omega,
    .logo-anime.lg-invocation .lg-hilt path,
    .logo-anime.lg-invocation .lg-sparks > g { opacity: 0; }
    /* la faille reste entière tant que le monde n'est pas posé dessus */
    .logo-anime.lg-invocation .lg-rift-cuts path { opacity: 0; animation: lg-inv-apparition .45s ease forwards 2.36s; }

    .logo-anime.lg-invocation .lg-star-north { opacity: 0; animation: lg-inv-levee .45s cubic-bezier(.2,.8,.2,1) forwards; }
    .logo-anime.lg-invocation .lg-north-ring { transform-box: view-box; transform-origin: 200.8px 57px; animation: lg-inv-anneau .85s cubic-bezier(.2,.7,.3,1) .3s; }

    .logo-anime.lg-invocation .lg-star-left-1 { animation: lg-inv-levee .35s ease-out forwards .55s; }
    .logo-anime.lg-invocation .lg-star-right-1 { animation: lg-inv-levee .35s ease-out forwards .66s; }
    .logo-anime.lg-invocation .lg-star-right-2 { animation: lg-inv-levee .35s ease-out forwards .77s; }
    .logo-anime.lg-invocation .lg-star-right-3 { animation: lg-inv-levee .35s ease-out forwards .88s; }
    .logo-anime.lg-invocation .lg-star-left-3 { animation: lg-inv-levee .35s ease-out forwards .99s; }
    .logo-anime.lg-invocation .lg-star-left-2 { animation: lg-inv-levee .35s ease-out forwards 1.10s; }

    .logo-anime.lg-invocation .lg-fill-full { opacity: 0; }
    .logo-anime.lg-invocation .lg-fill-a { opacity: 1; animation: lg-inv-trait .6s cubic-bezier(.35,.1,.35,1) forwards 1.35s; }
    .logo-anime.lg-invocation .lg-rift-body {
        transform: scaleX(.035);
        animation: lg-inv-apparition .01s linear forwards 1.35s, lg-inv-paff .42s cubic-bezier(.15,1.35,.4,1) forwards 1.94s;
    }
    .logo-anime.lg-invocation .lg-logo-glow { animation: lg-inv-eclat .6s ease-out 1.96s; }

    .logo-anime.lg-invocation .lg-omega { animation: lg-inv-levee .55s cubic-bezier(.2,.8,.2,1) forwards 2.36s; }
    .logo-anime.lg-invocation .lg-hilt path { animation: lg-inv-levee .55s cubic-bezier(.2,.8,.2,1) forwards 2.48s; }

    /* ---- attente : la ronde des dieux + le flux ---- */
    @keyframes lg-clignote { 0%, 100% { opacity: .35; } 25% { opacity: 1; } }
    @keyframes lg-pouls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
    @keyframes lg-flux { from { transform: translateY(0); } to { transform: translateY(690px); } }

    .logo-anime.lg-attente:not(.lg-jeu) .lg-star-left-1 { animation: lg-clignote 1.8s ease-in-out infinite 0s; }
    .logo-anime.lg-attente:not(.lg-jeu) .lg-star-right-1 { animation: lg-clignote 1.8s ease-in-out infinite .3s; }
    .logo-anime.lg-attente:not(.lg-jeu) .lg-star-right-2 { animation: lg-clignote 1.8s ease-in-out infinite .6s; }
    .logo-anime.lg-attente:not(.lg-jeu) .lg-star-right-3 { animation: lg-clignote 1.8s ease-in-out infinite .9s; }
    .logo-anime.lg-attente:not(.lg-jeu) .lg-star-left-3 { animation: lg-clignote 1.8s ease-in-out infinite 1.2s; }
    .logo-anime.lg-attente:not(.lg-jeu) .lg-star-left-2 { animation: lg-clignote 1.8s ease-in-out infinite 1.5s; }
    .logo-anime.lg-attente:not(.lg-jeu) .lg-star-north { animation: lg-pouls 1.8s ease-in-out infinite; }
    .logo-anime.lg-attente .lg-rift-highlight { opacity: 1; }
    .logo-anime.lg-attente .lg-band { animation: lg-flux 3.4s linear infinite; }

    /* ---- survol : le frisson des dieux + le battement du papillon ---- */
    @keyframes lg-vague { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.18); } }
    @keyframes lg-battement { 0%, 100% { transform: scaleX(1); } 25%, 75% { transform: scaleX(.62); } 50% { transform: scaleX(1); } }
    @keyframes lg-corps { 0%, 100% { transform: scale(1); } 25%, 75% { transform: scale(1.1); } 50% { transform: scale(1); } }

    .logo-anime.lg-survol .lg-star-north { animation: lg-vague .5s ease-out; }
    .logo-anime.lg-survol .lg-star-left-1, .logo-anime.lg-survol .lg-star-right-1 { animation: lg-vague .5s ease-out .04s; }
    .logo-anime.lg-survol .lg-star-left-2, .logo-anime.lg-survol .lg-star-right-2 { animation: lg-vague .5s ease-out .09s; }
    .logo-anime.lg-survol .lg-star-left-3, .logo-anime.lg-survol .lg-star-right-3 { animation: lg-vague .5s ease-out .14s; }
    .logo-anime.lg-survol .lg-wing-left, .logo-anime.lg-survol .lg-wing-right { animation: lg-battement .9s cubic-bezier(.45,0,.55,1); }
    .logo-anime.lg-survol .lg-curl-left, .logo-anime.lg-survol .lg-curl-right { animation: lg-battement .9s cubic-bezier(.45,0,.55,1) .07s; }
    .logo-anime.lg-survol .lg-pommel-star { animation: lg-corps .9s cubic-bezier(.45,0,.55,1); }

    /* ---- jeu : le papillon bat des ailes en vol ---- */
    @keyframes lg-vol-g { 0%, 100% { transform: scaleX(1) rotate(0deg); } 50% { transform: scaleX(.66) rotate(-4deg); } }
    @keyframes lg-vol-d { 0%, 100% { transform: scaleX(1) rotate(0deg); } 50% { transform: scaleX(.66) rotate(4deg); } }
    .logo-anime.lg-vol .lg-wing-left { animation: lg-vol-g .4s cubic-bezier(.4,0,.6,1) infinite; }
    .logo-anime.lg-vol .lg-wing-right { animation: lg-vol-d .4s cubic-bezier(.4,0,.6,1) infinite; }
    .logo-anime.lg-vol .lg-curl-left { animation: lg-vol-g .4s cubic-bezier(.4,0,.6,1) infinite .06s; }
    .logo-anime.lg-vol .lg-curl-right { animation: lg-vol-d .4s cubic-bezier(.4,0,.6,1) infinite .06s; }
}