/* ============================================================
   dedication-feu.css
   Effet « lettres qui prennent feu + cendres qui s'envolent »
   pour la section Dédicace. Remplace dedication-starwars.css.

   Ne touche pas à la mise en page de base (gérée par exodus-styles.css) :
   ajoute seulement la couche de feu, le canvas des cendres et les
   états d'embrasement / d'effacement.
   ============================================================ */

/* Le canvas des cendres est créé par le JS et couvre toute la section.
   La section est déjà en position: relative dans exodus-styles.css. */
.ember-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

/* Chaque ligne devient le repère de sa couche de feu, et reçoit
   un fondu d'effacement (sur l'opacité uniquement, pour rester lisse). */
.dedication-content p {
    position: relative;
    transition: opacity 3.5s ease-in-out;
}

/* ===== Couche de feu superposée (créée par le JS) =====
   Copie des mêmes lettres, en dégradé de flammes, posée pile par-dessus
   le texte blanc. Son opacité monte de 0 à 1 : les lettres changent
   donc de couleur EN FONDU, du blanc vers le feu, sans claquement. */
.fire-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    pointer-events: none;
    /* hérite police / taille / interligne / alignement pour se
       superposer exactement aux mêmes lettres */
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-align: inherit;
    white-space: inherit;
    /* couleur = dégradé de flammes découpé sur le texte */
    color: transparent;
    background-image: linear-gradient(
        0deg,
        #fff4c2 0%,
        #ffd23f 14%,
        #ff7b00 38%,
        #ff3a00 62%,
        #9e1500 82%,
        #3a0d05 100%
    );
    background-size: 100% 260%;
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0;
}

/* Phase 1 : apparition du feu en fondu (opacité 0 -> 1,
   flamme qui s'élève, halo qui naît) */
.burning .fire-overlay {
    animation: fireFadeIn 2.6s ease-out forwards;
}

@keyframes fireFadeIn {
    0% {
        opacity: 0;
        background-position: 50% 100%;
        text-shadow: 0 0 0 rgba(255, 90, 0, 0);
    }
    100% {
        opacity: 1;
        background-position: 50% 0%;
        text-shadow:
            0 0 7px rgba(255, 195, 75, 0.88),
            0 0 18px rgba(255, 100, 0, 0.7),
            0 0 38px rgba(255, 45, 0, 0.48);
    }
}

/* Phase 2 : flamme vivante perpétuelle (prend le relais après le fondu) */
.burning-loop .fire-overlay {
    opacity: 1;
    animation:
        flameShift 2.4s linear infinite,
        flicker 0.34s ease-in-out infinite alternate,
        emberGlow 2.6s ease-in-out infinite alternate;
}

@keyframes flameShift {
    0%   { background-position: 50% 100%; }
    100% { background-position: 50% 0%; }
}

@keyframes flicker {
    0%   { filter: brightness(1.0); }
    100% { filter: brightness(1.22); }
}

@keyframes emberGlow {
    0% {
        text-shadow:
            0 0 5px rgba(255, 180, 60, 0.8),
            0 0 14px rgba(255, 90, 0, 0.6),
            0 0 30px rgba(255, 40, 0, 0.4);
    }
    100% {
        text-shadow:
            0 0 9px rgba(255, 210, 90, 0.95),
            0 0 22px rgba(255, 110, 0, 0.8),
            0 0 46px rgba(255, 50, 0, 0.55);
    }
}

/* Texte consumé : simple fondu d'opacité (toute la ligne, base + feu). */
.dedication-content p.consumed {
    opacity: 0;
}

/* Respecte la préférence « moins d'animations » : pas d'effet de feu */
@media (prefers-reduced-motion: reduce) {
    .burning .fire-overlay,
    .burning-loop .fire-overlay {
        animation: none;
        opacity: 0;
    }
    .dedication-content p.consumed {
        opacity: 1;
    }
}