/* ── Slidia generate page ──────────────────────────────────────────────────
 *
 * Écran d'attente de la génération, calqué sur celui de Scormia
 * (templates/scormia/configure.html.twig, bloc `loader`) : emblème animé — glow
 * qui respire, anneau conique qui tourne, couches qui se construisent — puis
 * titre, étape, barre de progression et pourcentage.
 *
 * Les animations sont ICI et non en style en ligne dans le gabarit, contrairement
 * à Scormia : une `@keyframes` ne peut pas s'écrire dans un attribut `style`, et
 * ce fichier est déjà importé par assets/styles/app.css.
 *
 * Les couleurs viennent toutes de --color-primary / --color-primary-rgb /
 * --color-secondary, posées par le gabarit depuis tool_color_details : rien n'est
 * codé en dur, une couleur changée en base se propage jusqu'ici.
 *
 * L'ancien décor (orbes flottants, cartes squelettes, pastilles d'étapes) a été
 * retiré avec la refonte : ces classes n'existent plus, ne pas les recréer sans
 * remettre le JS qui les peuplait.
 */

.sdg-emblem {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 44px;
}

/* Halo ambiant qui respire. */
.sdg-emblem__glow {
    position: absolute;
    inset: 24px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-primary-rgb), .20), rgba(var(--color-primary-rgb), 0) 70%);
    animation: sdg-breathe 3.2s ease-in-out infinite;
}

/* Anneau conique tournant. Le masque radial n'en garde que le liseré extérieur :
   sans lui, le dégradé remplirait tout le disque. */
.sdg-emblem__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(var(--color-primary-rgb), 0) 0%,
        rgba(var(--color-primary-rgb), 0) 45%,
        color-mix(in srgb, var(--color-primary) 55%, white) 78%,
        var(--color-primary) 100%
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
    animation: sdg-spin 1.5s linear infinite;
}

/* Disque intérieur : fond blanc sur lequel les couches se construisent. */
.sdg-emblem__disc {
    position: absolute;
    inset: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 18px 40px -22px rgba(var(--color-primary-rgb), .35);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/*
 * Le contenu de l'emblème : une pile de trois diapositives miniatures qui se relaient.
 *
 * Portage direct de la maquette de référence (`Slidia-loading.html`, keyframes `sl-stack`).
 * Chaque carte est complète en permanence — elle ne change que de rang, d'échelle et
 * d'opacité —, là où la version précédente faisait apparaître les pièces d'une icône une à
 * une : pendant l'essentiel du cycle, on ne voyait qu'un dessin inachevé.
 *
 * Les décalages sont NÉGATIFS (0, -1.4s, -2.8s, soit un tiers de cycle chacun) : l'animation
 * est donc déjà entamée au premier rendu, avec toujours une carte devant, une au milieu et
 * une au fond. Des décalages positifs laisseraient le disque vide les premières secondes.
 */
.sdg-emblem__stack {
    position: relative;
    width: 84px;
    height: 50px;
}

.sdg-deck__card {
    position: absolute;
    inset: 0;
    padding: 8px 9px;
    background: #fff;
    border: 1.5px solid rgba(var(--color-primary-rgb), .18);
    border-radius: 7px;
    box-shadow: 0 8px 18px -10px rgba(var(--color-primary-rgb), .45);
    animation: sdg-stack 4.2s cubic-bezier(.45, .05, .35, 1) infinite;
    will-change: transform, opacity;
}

.sdg-deck__card--1 { animation-delay: 0s; }
.sdg-deck__card--2 { animation-delay: -1.4s; }
.sdg-deck__card--3 { animation-delay: -2.8s; }

/* Le titre de la diapositive miniature : le seul trait à pleine couleur. */
.sdg-deck__title {
    display: block;
    height: 5px;
    border-radius: 2px;
    background: var(--color-primary);
}

/* Carte 1 — un histogramme. */
.sdg-deck__bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 19px;
    margin-top: 8px;
}

.sdg-deck__bars > span {
    flex: 1;
    border-radius: 2px;
    background: rgba(var(--color-primary-rgb), .17);
}

.sdg-deck__bars > span:nth-child(1) { height: 42%; }
.sdg-deck__bars > span:nth-child(2) { height: 76%; background: color-mix(in srgb, var(--color-primary) 72%, white); }
.sdg-deck__bars > span:nth-child(3) { height: 58%; }
.sdg-deck__bars > span:nth-child(4) { height: 100%; background: var(--color-primary); }

/* Cartes 2 et 3 — des lignes de texte. */
.sdg-deck__line {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: rgba(var(--color-primary-rgb), .17);
    margin-top: 5px;
}

.sdg-deck__title + .sdg-deck__line { margin-top: 8px; }

.sdg-deck__row {
    display: flex;
    gap: 7px;
    margin-top: 8px;
}

.sdg-deck__col { flex: 1; }
.sdg-deck__col .sdg-deck__line:first-child { margin-top: 0; }

/* La vignette de la carte 3 : ce qui la distingue des deux autres au premier coup d'œil. */
.sdg-deck__thumb {
    flex: 0 0 26px;
    height: 23px;
    border-radius: 4px;
    background: linear-gradient(140deg, color-mix(in srgb, var(--color-primary) 40%, white), rgba(var(--color-primary-rgb), .4));
    border: 1px solid rgba(var(--color-primary-rgb), .34);
}

@keyframes sdg-spin    { to { transform: rotate(360deg); } }
@keyframes sdg-breathe { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.12); opacity: .9; } }

/* Le cycle de la pile : fond → milieu → devant → sortie par la gauche → fond. Les paliers
   doublés (30/33.33 %, 63/66.66 %) marquent une pause à chaque rang : sans eux, les cartes
   glisseraient sans jamais paraître posées. */
@keyframes sdg-stack {
    0%     { transform: translate(0, -13px) scale(.86); opacity: .26; z-index: 1; }
    30%    { transform: translate(0, -7px)  scale(.93); opacity: .62; z-index: 2; }
    33.33% { transform: translate(0, -7px)  scale(.93); opacity: .62; z-index: 2; }
    63%    { transform: translate(0, 0)     scale(1);   opacity: 1;   z-index: 3; }
    66.66% { transform: translate(0, 0)     scale(1);   opacity: 1;   z-index: 3; }
    86%    { transform: translate(-30px, 3px) scale(.92) rotate(-4deg); opacity: 0; z-index: 3; }
    100%   { transform: translate(0, -13px) scale(.86); opacity: .26; z-index: 1; }
}

@keyframes sdg-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Respect de `prefers-reduced-motion` : l'écran reste lisible et informatif sans
   aucun mouvement — la barre de progression suffit à dire que ça avance. */
@media (prefers-reduced-motion: reduce) {
    .sdg-emblem__glow,
    .sdg-emblem__ring,
    .sdg-deck__card { animation: none; }

    /* Sans mouvement, les trois cartes se superposeraient exactement : seule celle du
       dessus reste visible, à sa place de fin de cycle. */
    .sdg-deck__card { opacity: 0; transform: none; }
    .sdg-deck__card--3 { opacity: 1; }
}