/**
 * Modulo Core — Animations CSS
 * Effets permanents en boucle — intensité via --mst-anim-intensity (1-10)
 */

/* ── Keyframes ────────────────────────────────────────────────────────────── */

@keyframes mst-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(calc(1 + var(--mst-anim-intensity, 5) * 0.008)); }
}

@keyframes mst-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

@keyframes mst-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(calc(var(--mst-anim-intensity, 5) * -2px)); }
}

@keyframes mst-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(calc(var(--mst-anim-intensity, 5) * -0.8px)); }
    40%       { transform: translateX(calc(var(--mst-anim-intensity, 5) *  0.8px)); }
    60%       { transform: translateX(calc(var(--mst-anim-intensity, 5) * -0.5px)); }
    80%       { transform: translateX(calc(var(--mst-anim-intensity, 5) *  0.5px)); }
}

@keyframes mst-glow {
    0%, 100% { filter: brightness(1); }
    50%       { filter: brightness(calc(1 + var(--mst-anim-intensity, 5) * 0.04)); }
}

/* ── Classes d'effets ─────────────────────────────────────────────────────── */

/* Pulse — battement régulier */
.mst-loop--pulse {
    animation: mst-pulse
        calc(1.2s + (10 - var(--mst-anim-intensity, 5)) * 0.15s)
        ease-in-out infinite;
    transform-origin: center;
}

/* Shimmer — reflet lumineux */
.mst-loop--shimmer {
    position: relative;
    overflow: hidden;
}
.mst-loop--shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,255,255, calc(var(--mst-anim-intensity, 5) * 0.04)) 50%,
        transparent 70%
    );
    background-size: 200% 100%;
    animation: mst-shimmer
        calc(2.5s - var(--mst-anim-intensity, 5) * 0.15s)
        linear infinite;
    pointer-events: none;
}

/* Flottement — oscillation verticale douce */
.mst-loop--float {
    animation: mst-float
        calc(2.5s - var(--mst-anim-intensity, 5) * 0.1s)
        ease-in-out infinite;
}

/* Vibration — micro-tremblement */
.mst-loop--shake {
    animation: mst-shake
        calc(0.8s - var(--mst-anim-intensity, 5) * 0.04s)
        ease-in-out infinite;
}

/* Lueur — variation de luminosité */
.mst-loop--glow {
    animation: mst-glow
        calc(2s - var(--mst-anim-intensity, 5) * 0.1s)
        ease-in-out infinite;
}

/* ── Nouveaux effets permanents ─────────────────────────────────────────── */

@keyframes mst-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes mst-swing {
    0%, 100% { transform: rotate(0deg); }
    25%       { transform: rotate(calc(var(--mst-anim-intensity, 5) * 1.6deg)); }
    75%       { transform: rotate(calc(var(--mst-anim-intensity, 5) * -1.6deg)); }
}
@keyframes mst-sway {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(calc(var(--mst-anim-intensity, 5) * 1.6px)); }
    75%       { transform: translateX(calc(var(--mst-anim-intensity, 5) * -1.6px)); }
}
@keyframes mst-heartbeat {
    0%, 40%, 100% { transform: scale(1); }
    10%, 30%       { transform: scale(calc(1 + var(--mst-anim-intensity, 5) * 0.014)); }
    20%            { transform: scale(calc(1 + var(--mst-anim-intensity, 5) * 0.006)); }
}
@keyframes mst-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40%                       { transform: translateY(calc(var(--mst-anim-intensity, 5) * -3px)); }
    60%                       { transform: translateY(calc(var(--mst-anim-intensity, 5) * -1.5px)); }
}

/* Rotation complète — plus l'intensité est forte, plus elle tourne vite */
.mst-loop--spin {
    animation: mst-spin calc(12s - var(--mst-anim-intensity, 5) * 1s) linear infinite;
    transform-origin: center;
}
/* Balancement gauche-droite, en pendule (accroché en haut) */
.mst-loop--swing {
    animation: mst-swing calc(2.6s - var(--mst-anim-intensity, 5) * 0.1s) ease-in-out infinite;
    transform-origin: top center;
}
/* Va-et-vient horizontal */
.mst-loop--sway {
    animation: mst-sway calc(3s - var(--mst-anim-intensity, 5) * 0.12s) ease-in-out infinite;
}
/* Battement de cœur (double pulsation) */
.mst-loop--heartbeat {
    animation: mst-heartbeat calc(1.8s - var(--mst-anim-intensity, 5) * 0.06s) ease-in-out infinite;
    transform-origin: center;
}
/* Rebond */
.mst-loop--bounce {
    animation: mst-bounce calc(2.2s - var(--mst-anim-intensity, 5) * 0.08s) ease-in-out infinite;
}

/* ── Effets au survol ([data-modulo-hover]) ───────────────────────────────────
   CSS seul. .mst-hover-preview : aperçu demandé dans l'éditeur (bouton « Voir l'effet »). */

[data-modulo-hover] {
    transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
[data-modulo-hover="lift"]:hover, [data-modulo-hover="lift"].mst-hover-preview {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .16);
}
[data-modulo-hover="grow"]:hover, [data-modulo-hover="grow"].mst-hover-preview {
    transform: scale(1.04);
}
[data-modulo-hover="shrink"]:hover, [data-modulo-hover="shrink"].mst-hover-preview {
    transform: scale(.97);
}
[data-modulo-hover="shadow"]:hover, [data-modulo-hover="shadow"].mst-hover-preview {
    box-shadow: 0 18px 40px rgba(15, 23, 42, .2);
}
[data-modulo-hover="tilt"]:hover, [data-modulo-hover="tilt"].mst-hover-preview {
    transform: rotate(-1.5deg) scale(1.02);
}
[data-modulo-hover="brighten"]:hover, [data-modulo-hover="brighten"].mst-hover-preview {
    filter: brightness(1.08) saturate(1.08);
}
/* Effets sur l'image contenue dans le bloc */
[data-modulo-hover="img-zoom"] { overflow: hidden; }
[data-modulo-hover="img-zoom"] img,
[data-modulo-hover="img-darken"] img,
[data-modulo-hover="img-color"] img {
    transition: transform .5s ease, filter .4s ease;
}
[data-modulo-hover="img-zoom"]:hover img, [data-modulo-hover="img-zoom"].mst-hover-preview img {
    transform: scale(1.08);
}
[data-modulo-hover="img-darken"]:hover img, [data-modulo-hover="img-darken"].mst-hover-preview img {
    filter: brightness(.8);
}
[data-modulo-hover="img-color"] img {
    filter: grayscale(1);
}
[data-modulo-hover="img-color"]:hover img, [data-modulo-hover="img-color"].mst-hover-preview img {
    filter: grayscale(0);
}

/* Accessibilité : rien ne bouge si le visiteur a demandé moins d'animations
   (la lueur et le reflet, qui ne déplacent rien, restent actifs). */
@media (prefers-reduced-motion: reduce) {
    .mst-loop--pulse,
    .mst-loop--float,
    .mst-loop--shake,
    .mst-loop--spin,
    .mst-loop--swing,
    .mst-loop--sway,
    .mst-loop--heartbeat,
    .mst-loop--bounce {
        animation: none;
    }
    [data-modulo-hover],
    [data-modulo-hover] img {
        transition: none;
    }
    [data-modulo-hover]:hover {
        transform: none;
    }
}

/* ── Apparition au défilement : état de départ dès l'affichage (1.0.3) ──────
   La classe modulo-anim-js est posée en tête de page (JavaScript actif) ; front.js
   pose mst-anim-init en prenant la main sur l'élément. Sans cette règle, l'élément
   était visible, masqué par le script, puis animé (clignotement). Filet de sécurité :
   visible au bout de 3 s si le script ne s'exécute pas (bloqué, erreur). */
@media (prefers-reduced-motion: no-preference) {
    .modulo-anim-js [data-modulo-anim]:not(.mst-anim-init) {
        opacity: 0;
        animation: mst-anim-failsafe 0s linear 3s forwards;
    }
}
@keyframes mst-anim-failsafe {
    to { opacity: 1; }
}