/**
 * BiomeBounty — Bibliothèque d'animations CSS preset.
 *
 * 4 familles d'animations :
 *
 *   1. .bb-reveal-*    → se déclenchent AU SCROLL (apparition à l'entrée
 *                        dans le viewport). Pilotées par scroll-reveal.js.
 *
 *   2. .bb-anim-*      → animations EN BOUCLE infinie (float, pulse, etc.)
 *                        ou one-shot (bounce-in, slide-in, etc.).
 *
 *   3. .bb-hover-*     → animations déclenchées AU HOVER de la souris.
 *
 *   4. .bb-text-*      → effets typographiques spéciaux (gradient, neon,
 *                        glitch, typewriter).
 *
 * Comment les utiliser dans Gutenberg :
 *   - Sélectionner un bloc → panel "Avancé" (en bas du sidebar)
 *   - Champ "Classes CSS supplémentaires"
 *   - Taper la classe voulue (séparées par des espaces si plusieurs)
 *   - Sauvegarder → l'animation est appliquée
 *
 * Exemples :
 *   bb-reveal-up               → fade in + slide depuis le bas au scroll
 *   bb-reveal-zoom bb-delay-2  → zoom + fade au scroll, avec 0.2s de délai
 *   bb-anim-float              → flottement infini
 *   bb-hover-lift              → soulève au survol
 *
 * Tout RESPECTE prefers-reduced-motion : si l'utilisateur a activé ce
 * paramètre système d'accessibilité, les animations sont désactivées.
 */

/* ═══════════════════════════════════════════════════════════════════
   0. RESPECT DE LA PRÉFÉRENCE "MOUVEMENT RÉDUIT" (a11y obligatoire)
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    [class*="bb-reveal-"],
    [class*="bb-anim-"],
    [class*="bb-hover-"] {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   1. SCROLL-REVEAL — apparition à l'entrée dans le viewport
   ═══════════════════════════════════════════════════════════════════
   Comment ça marche :
     - L'élément a une classe .bb-reveal-X au départ → invisible (opacity:0
       + transform de départ).
     - Quand il entre dans le viewport, scroll-reveal.js lui ajoute la
       classe .is-visible → transition vers l'état final (opacity:1,
       transform:none).

   Variantes de directions :
     bb-reveal-fade       → simple fade in
     bb-reveal-up         → fade + slide depuis le BAS (40px)
     bb-reveal-down       → fade + slide depuis le HAUT
     bb-reveal-left       → fade + slide depuis la GAUCHE
     bb-reveal-right      → fade + slide depuis la DROITE
     bb-reveal-zoom       → fade + zoom IN (de 0.85 à 1)
     bb-reveal-zoom-out   → fade + zoom OUT (de 1.15 à 1)
     bb-reveal-rotate     → fade + rotation -8°
     bb-reveal-flip       → flip 3D horizontal
     bb-reveal-tilt       → tilt 3D perspective
     bb-reveal-blur       → flou → net

   Modificateurs (à combiner) :
     bb-reveal-slow       → durée 1.4s (default = 0.7s)
     bb-reveal-fast       → durée 0.35s
     bb-delay-1           → délai 0.1s
     bb-delay-2           → délai 0.2s
     ... jusqu'à bb-delay-8 (0.8s) — pour effet cascade sur liste
     bb-reveal-once       → ne se rejoue pas si on re-scrolle (par défaut)
     bb-reveal-loop       → se rejoue à chaque fois qu'on entre dans le
                            viewport (utile pour démos sur landing page)
   ═══════════════════════════════════════════════════════════════════ */

[class*="bb-reveal-"] {
    /* ─── Variables CSS modifiables ─────────────────────────────────
       Chaque bloc peut les surcharger via style inline (panel Inspector
       "Animation BiomeBounty"). Les valeurs ci-dessous sont les défauts
       quand aucun réglage personnalisé n'est appliqué. */
    --bb-anim-duration:  700ms;
    --bb-anim-delay:     0ms;
    --bb-anim-distance:  40px;
    --bb-anim-scale:     0.85;
    --bb-anim-rotate:    -8deg;
    --bb-anim-blur:      12px;
    --bb-anim-easing:    cubic-bezier(0.16, 1, 0.3, 1);

    /* État initial commun (transparent, attend le déclenchement) */
    opacity: 0;
    transition:
        opacity   var(--bb-anim-duration) var(--bb-anim-easing) var(--bb-anim-delay),
        transform var(--bb-anim-duration) var(--bb-anim-easing) var(--bb-anim-delay),
        filter    var(--bb-anim-duration) var(--bb-anim-easing) var(--bb-anim-delay);
    will-change: opacity, transform;
}

/* État de départ par variante — toutes les transformations utilisent
   les variables ci-dessus. Distance/scale/rotate/blur sont donc
   contrôlables individuellement par bloc via le panel Inspector. */
.bb-reveal-fade     { /* opacity:0 hérité */ }
.bb-reveal-up       { transform: translateY(var(--bb-anim-distance)); }
.bb-reveal-up-lg    { transform: translateY(calc(var(--bb-anim-distance) * 2)); }
.bb-reveal-down     { transform: translateY(calc(-1 * var(--bb-anim-distance))); }
.bb-reveal-left     { transform: translateX(calc(-1 * var(--bb-anim-distance))); }
.bb-reveal-right    { transform: translateX(var(--bb-anim-distance)); }
.bb-reveal-zoom     { transform: scale(var(--bb-anim-scale)); }
.bb-reveal-zoom-out { transform: scale(calc(2 - var(--bb-anim-scale))); }
.bb-reveal-rotate   { transform: rotate(var(--bb-anim-rotate)) translateY(calc(var(--bb-anim-distance) * 0.5)); }
.bb-reveal-flip     { transform: perspective(800px) rotateY(-65deg); }
.bb-reveal-tilt     { transform: perspective(1000px) rotateX(-20deg) translateY(calc(var(--bb-anim-distance) * 0.75)); }
.bb-reveal-blur     { filter: blur(var(--bb-anim-blur)); }

/* État cible (quand .is-visible est ajouté par le JS) */
.bb-reveal-fade.is-visible,
.bb-reveal-up.is-visible,
.bb-reveal-up-lg.is-visible,
.bb-reveal-down.is-visible,
.bb-reveal-left.is-visible,
.bb-reveal-right.is-visible,
.bb-reveal-zoom.is-visible,
.bb-reveal-zoom-out.is-visible,
.bb-reveal-rotate.is-visible,
.bb-reveal-flip.is-visible,
.bb-reveal-tilt.is-visible {
    opacity: 1;
    transform: none;
}
.bb-reveal-blur.is-visible {
    opacity: 1;
    filter: blur(0);
}

/* Modificateurs de vitesse */
.bb-reveal-slow { transition-duration: 1.4s; }
.bb-reveal-fast { transition-duration: 0.35s; }

/* Modificateurs de délai (cascade pour listes/grids) */
.bb-delay-1 { transition-delay: 0.1s; }
.bb-delay-2 { transition-delay: 0.2s; }
.bb-delay-3 { transition-delay: 0.3s; }
.bb-delay-4 { transition-delay: 0.4s; }
.bb-delay-5 { transition-delay: 0.5s; }
.bb-delay-6 { transition-delay: 0.6s; }
.bb-delay-7 { transition-delay: 0.7s; }
.bb-delay-8 { transition-delay: 0.8s; }


/* ═══════════════════════════════════════════════════════════════════
   2. ANIMATIONS EN BOUCLE OU ONE-SHOT (bb-anim-*)
   ═══════════════════════════════════════════════════════════════════
   Applique-les directement sur un bloc — pas besoin du JS scroll-reveal.

     Continues (infinies) :
       bb-anim-float       → flottement doux
       bb-anim-pulse       → pulsation d'opacité
       bb-anim-pulse-scale → pulsation de taille
       bb-anim-glow        → glow lumineux pulsant
       bb-anim-bounce-loop → rebond infini
       bb-anim-wiggle      → petit dandinement
       bb-anim-spin        → rotation continue
       bb-anim-spin-slow   → rotation lente (8s)
       bb-anim-shimmer     → effet de scintillement (idéal sur boutons CTA)
       bb-anim-marquee     → défilement horizontal infini (annonces)
       bb-anim-gradient    → gradient de fond animé

     One-shot (jouées une fois) :
       bb-anim-bounce-in   → arrive en rebondissant
       bb-anim-slide-in    → arrive en glissant depuis la gauche
       bb-anim-zoom-in     → arrive en zoomant
       bb-anim-flash       → flash blanc rapide
       bb-anim-heartbeat   → battement cœur (3 fois)
       bb-anim-rubber      → effet élastique
   ═══════════════════════════════════════════════════════════════════ */

/* — Flottement doux (icônes, illustrations) — */
@keyframes bb-anim-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
.bb-anim-float {
    animation: bb-anim-float var(--bb-anim-duration, 4s) ease-in-out infinite;
    animation-delay: var(--bb-anim-delay, 0s);
}

/* — Pulsation d'opacité (notifications, badges) — */
@keyframes bb-anim-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}
.bb-anim-pulse {
    animation: bb-anim-pulse var(--bb-anim-duration, 2s) ease-in-out infinite;
    animation-delay: var(--bb-anim-delay, 0s);
}

/* — Pulsation de taille (CTA "battre comme un cœur") — */
@keyframes bb-anim-pulse-scale {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
.bb-anim-pulse-scale {
    animation: bb-anim-pulse-scale var(--bb-anim-duration, 2s) ease-in-out infinite;
    animation-delay: var(--bb-anim-delay, 0s);
}

/* — Glow pulsant (gros boutons d'action, plans featured) — */
@keyframes bb-anim-glow {
    0%, 100% { box-shadow: 0 0 12px 0 currentColor; }
    50%      { box-shadow: 0 0 32px 8px currentColor; }
}
.bb-anim-glow {
    animation: bb-anim-glow var(--bb-anim-duration, 2.5s) ease-in-out infinite;
    animation-delay: var(--bb-anim-delay, 0s);
}

/* — Rebond infini (flèche "scroll down") — */
@keyframes bb-anim-bounce-loop {
    0%, 100%      { transform: translateY(0); }
    20%, 60%      { transform: translateY(-16px); }
    40%           { transform: translateY(-8px); }
}
.bb-anim-bounce-loop {
    animation: bb-anim-bounce-loop var(--bb-anim-duration, 1.8s) ease-in-out infinite;
    animation-delay: var(--bb-anim-delay, 0s);
}

/* — Wiggle (icônes "attention", emojis) — */
@keyframes bb-anim-wiggle {
    0%, 100% { transform: rotate(0); }
    25%      { transform: rotate(-8deg); }
    75%      { transform: rotate(8deg); }
}
.bb-anim-wiggle {
    animation: bb-anim-wiggle var(--bb-anim-duration, 0.6s) ease-in-out infinite;
    animation-delay: var(--bb-anim-delay, 0s);
    transform-origin: 50% 100%;
}

/* — Rotation continue (loaders, badges "live") — */
@keyframes bb-anim-spin {
    to { transform: rotate(360deg); }
}
.bb-anim-spin {
    animation: bb-anim-spin var(--bb-anim-duration, 1.5s) linear infinite;
    animation-delay: var(--bb-anim-delay, 0s);
}
.bb-anim-spin-slow {
    animation: bb-anim-spin var(--bb-anim-duration, 8s) linear infinite;
    animation-delay: var(--bb-anim-delay, 0s);
}

/* — Shimmer (effet "skeleton loading", barres lumineuses sur boutons) — */
@keyframes bb-anim-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.bb-anim-shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: bb-anim-shimmer var(--bb-anim-duration, 2.5s) linear infinite;
    animation-delay: var(--bb-anim-delay, 0s);
}

/* — Marquee (défilement horizontal — annonces, partenaires) — */
@keyframes bb-anim-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.bb-anim-marquee {
    display: inline-flex;
    white-space: nowrap;
    animation: bb-anim-marquee var(--bb-anim-duration, 20s) linear infinite;
    animation-delay: var(--bb-anim-delay, 0s);
}

/* — Gradient animé (backgrounds dynamiques) — */
@keyframes bb-anim-gradient {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
.bb-anim-gradient {
    background-size: 200% 200%;
    animation: bb-anim-gradient var(--bb-anim-duration, 6s) ease infinite;
    animation-delay: var(--bb-anim-delay, 0s);
}

/* — Bounce-in (apparition rebondissante one-shot) — */
@keyframes bb-anim-bounce-in {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1.1); }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}
.bb-anim-bounce-in {
    animation: bb-anim-bounce-in var(--bb-anim-duration, 0.8s) cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
    animation-delay: var(--bb-anim-delay, 0s);
}

/* — Slide-in (entrée latérale) — */
@keyframes bb-anim-slide-in {
    0%   { opacity: 0; transform: translateX(-60px); }
    100% { opacity: 1; transform: translateX(0); }
}
.bb-anim-slide-in {
    animation: bb-anim-slide-in var(--bb-anim-duration, 0.6s) cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--bb-anim-delay, 0s);
}

/* — Zoom-in (entrée en zoom) — */
@keyframes bb-anim-zoom-in {
    0%   { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}
.bb-anim-zoom-in {
    animation: bb-anim-zoom-in var(--bb-anim-duration, 0.5s) cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--bb-anim-delay, 0s);
}

/* — Flash (alerte/notification arrivée) — */
@keyframes bb-anim-flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75%      { opacity: 0.3; }
}
.bb-anim-flash {
    animation: bb-anim-flash var(--bb-anim-duration, 0.8s) ease-in-out;
    animation-delay: var(--bb-anim-delay, 0s);
}

/* — Heartbeat (cœur qui bat 3 fois) — */
@keyframes bb-anim-heartbeat {
    0%, 28%, 70%, 100% { transform: scale(1); }
    14%, 42%, 84%      { transform: scale(1.18); }
}
.bb-anim-heartbeat {
    animation: bb-anim-heartbeat var(--bb-anim-duration, 1.5s) ease-in-out 3;
    animation-delay: var(--bb-anim-delay, 0s);
}

/* — Rubber band (élastique humour) — */
@keyframes bb-anim-rubber {
    0%   { transform: scale(1); }
    30%  { transform: scaleX(1.25) scaleY(0.75); }
    40%  { transform: scaleX(0.75) scaleY(1.25); }
    50%  { transform: scaleX(1.15) scaleY(0.85); }
    65%  { transform: scaleX(0.95) scaleY(1.05); }
    75%  { transform: scaleX(1.05) scaleY(0.95); }
    100% { transform: scale(1); }
}
.bb-anim-rubber {
    animation: bb-anim-rubber var(--bb-anim-duration, 1s) ease-in-out;
    animation-delay: var(--bb-anim-delay, 0s);
}

/* — Shake (erreur, secousse latérale) — */
@keyframes bb-anim-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
    20%, 40%, 60%, 80%      { transform: translateX(8px); }
}
.bb-anim-shake {
    animation: bb-anim-shake var(--bb-anim-duration, 0.6s) ease-in-out;
    animation-delay: var(--bb-anim-delay, 0s);
}


/* ═══════════════════════════════════════════════════════════════════
   3. ANIMATIONS HOVER (bb-hover-*)
   ═══════════════════════════════════════════════════════════════════
   Comportement au survol de la souris. Sur mobile (pas de hover),
   l'effet ne se déclenche que sur :focus-visible (a11y clavier).

     bb-hover-lift         → se soulève (translateY)
     bb-hover-grow         → grossit (scale 1.05)
     bb-hover-shrink       → rétrécit (scale 0.95)
     bb-hover-tilt         → s'incline en 3D
     bb-hover-rotate       → tourne légèrement
     bb-hover-shadow       → fait apparaître une ombre profonde
     bb-hover-glow         → fait apparaître un halo lumineux
     bb-hover-underline    → souligne avec une ligne qui apparaît à gauche
     bb-hover-brighten     → s'éclaircit (filter: brightness)
     bb-hover-saturate     → se sature (filter: saturate)
     bb-hover-blur-bg      → applique un blur (utile sur backgrounds)
     bb-hover-pop          → mini pop élastique
     bb-hover-skew         → effet skew dynamique
   ═══════════════════════════════════════════════════════════════════ */

[class*="bb-hover-"] {
    /* Variables CSS modifiables pour les hovers — surchargeables par le
       panel "Animation BiomeBounty" via style inline.
         --bb-anim-duration  : durée de la transition (default 0.3s)
         --bb-anim-easing    : courbe (default cubic-bezier smooth)
         --bb-anim-intensity : multiplicateur appliqué à toutes les valeurs
                               (1 = défaut, 0.5 = moitié, 2 = double). */
    --bb-anim-duration:  0.3s;
    --bb-anim-easing:    cubic-bezier(0.16, 1, 0.3, 1);
    --bb-anim-intensity: 1;

    transition:
        transform  var(--bb-anim-duration) var(--bb-anim-easing),
        box-shadow var(--bb-anim-duration) var(--bb-anim-easing),
        filter     var(--bb-anim-duration) var(--bb-anim-easing),
        opacity    var(--bb-anim-duration) ease;
    will-change: transform;
}

.bb-hover-lift:hover,
.bb-hover-lift:focus-visible       { transform: translateY(calc(-8px * var(--bb-anim-intensity))); }
.bb-hover-grow:hover,
.bb-hover-grow:focus-visible       { transform: scale(calc(1 + 0.05 * var(--bb-anim-intensity))); }
.bb-hover-shrink:hover,
.bb-hover-shrink:focus-visible     { transform: scale(calc(1 - 0.05 * var(--bb-anim-intensity))); }
.bb-hover-tilt:hover,
.bb-hover-tilt:focus-visible       { transform: perspective(800px)
                                                 rotateX(calc(6deg * var(--bb-anim-intensity)))
                                                 rotateY(calc(-6deg * var(--bb-anim-intensity))); }
.bb-hover-rotate:hover,
.bb-hover-rotate:focus-visible     { transform: rotate(calc(3deg * var(--bb-anim-intensity))); }
.bb-hover-shadow:hover,
.bb-hover-shadow:focus-visible     { box-shadow: 0 calc(24px * var(--bb-anim-intensity))
                                                 calc(48px * var(--bb-anim-intensity))
                                                 rgba(0, 0, 0, calc(0.25 * var(--bb-anim-intensity)));
                                     transform: translateY(calc(-4px * var(--bb-anim-intensity))); }
.bb-hover-glow:hover,
.bb-hover-glow:focus-visible       { box-shadow: 0 0 calc(28px * var(--bb-anim-intensity)) rgba(255, 255, 255, 0.35),
                                                 0 0 calc(56px * var(--bb-anim-intensity)) currentColor; }
.bb-hover-brighten:hover,
.bb-hover-brighten:focus-visible   { filter: brightness(calc(1 + 0.15 * var(--bb-anim-intensity))); }
.bb-hover-saturate:hover,
.bb-hover-saturate:focus-visible   { filter: saturate(calc(1 + 0.4 * var(--bb-anim-intensity))); }
.bb-hover-blur-bg:hover,
.bb-hover-blur-bg:focus-visible    { filter: blur(calc(2px * var(--bb-anim-intensity))); }
.bb-hover-pop:hover,
.bb-hover-pop:focus-visible        { animation: bb-anim-rubber 0.5s; }
.bb-hover-skew:hover,
.bb-hover-skew:focus-visible       { transform: skew(calc(-4deg * var(--bb-anim-intensity)), 0); }

/* Soulignement animé : ligne qui pousse de gauche à droite */
.bb-hover-underline {
    position: relative;
    display: inline-block;
}
.bb-hover-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.125em;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.bb-hover-underline:hover::after,
.bb-hover-underline:focus-visible::after {
    transform: scaleX(1);
}


/* ═══════════════════════════════════════════════════════════════════
   4. EFFETS TYPOGRAPHIQUES (bb-text-*)
   ═══════════════════════════════════════════════════════════════════
   À appliquer sur des titres ou textes courts pour effet wow.

     bb-text-gradient     → texte en gradient (couleurs du thème)
     bb-text-gradient-anim→ gradient animé qui défile
     bb-text-neon         → effet néon brillant
     bb-text-glitch       → effet glitch (légère décomposition)
     bb-text-typewriter   → effet machine à écrire (one-shot au scroll)
     bb-text-shadow-pop   → ombre marquée (pop arty)
     bb-text-stroke       → texte avec contour, fond transparent (outline)
   ═══════════════════════════════════════════════════════════════════ */

.bb-text-gradient,
.bb-text-gradient-anim {
    background: linear-gradient(
        90deg,
        var(--wp--preset--color--accent, #ef4444),
        var(--wp--preset--color--primary, #f97316),
        var(--wp--preset--color--accent, #ef4444)
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.bb-text-gradient-anim {
    animation: bb-anim-shimmer var(--bb-anim-duration, 4s) linear infinite;
    animation-delay: var(--bb-anim-delay, 0s);
}

.bb-text-neon {
    color: var(--wp--preset--color--accent, #fb7185);
    text-shadow:
        0 0 6px currentColor,
        0 0 14px currentColor,
        0 0 28px currentColor;
}

@keyframes bb-anim-glitch {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
}
.bb-text-glitch {
    position: relative;
    display: inline-block;
    animation: bb-anim-glitch var(--bb-anim-duration, 0.3s) steps(2, end) infinite;
    animation-delay: var(--bb-anim-delay, 0s);
}
.bb-text-glitch::before,
.bb-text-glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.bb-text-glitch::before { left: 2px;  text-shadow: -1px 0 #ff0080; clip-path: inset(0 0 70% 0); }
.bb-text-glitch::after  { left: -2px; text-shadow: 1px 0 #00ffff;  clip-path: inset(70% 0 0 0); }

/* Typewriter — utilisé avec scroll-reveal pour démarrer une fois visible */
@keyframes bb-anim-typewriter {
    from { width: 0; }
    to   { width: 100%; }
}
@keyframes bb-anim-caret-blink {
    50% { border-right-color: transparent; }
}
.bb-text-typewriter {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid currentColor;
    width: 0;
    animation:
        bb-anim-typewriter 2.5s steps(40, end) 0.3s forwards,
        bb-anim-caret-blink 0.7s step-end infinite;
}
/* Quand l'élément est visible (déclenché par scroll-reveal.js) :
   l'animation démarre. */
.bb-text-typewriter.is-visible {
    /* On laisse l'animation tourner — déjà déclarée ci-dessus */
}

.bb-text-shadow-pop {
    text-shadow:
        3px 3px 0 var(--wp--preset--color--accent, #ef4444),
        6px 6px 0 var(--wp--preset--color--primary, #f97316);
}

.bb-text-stroke {
    color: transparent;
    -webkit-text-stroke: 2px currentColor;
    /* fallback texte plein si pas de support */
    text-shadow: 0 0 0 currentColor;
}


/* ═══════════════════════════════════════════════════════════════════
   5. UTILITAIRES BONUS
   ═══════════════════════════════════════════════════════════════════ */

/* Cascade auto sur les enfants directs (utile sur grids/listes) :
   tu mets .bb-cascade sur le parent, et les enfants reçoivent
   automatiquement des transition-delays incrémentaux. */
.bb-cascade > * { transition-delay: 0s; }
.bb-cascade > *:nth-child(1)  { transition-delay: 0.05s; }
.bb-cascade > *:nth-child(2)  { transition-delay: 0.1s; }
.bb-cascade > *:nth-child(3)  { transition-delay: 0.15s; }
.bb-cascade > *:nth-child(4)  { transition-delay: 0.2s; }
.bb-cascade > *:nth-child(5)  { transition-delay: 0.25s; }
.bb-cascade > *:nth-child(6)  { transition-delay: 0.3s; }
.bb-cascade > *:nth-child(7)  { transition-delay: 0.35s; }
.bb-cascade > *:nth-child(8)  { transition-delay: 0.4s; }
.bb-cascade > *:nth-child(9)  { transition-delay: 0.45s; }
.bb-cascade > *:nth-child(10) { transition-delay: 0.5s; }

/* Pour les éléments destinés à être réutilisés en hover-loop :
   .bb-hover-loop active une animation en boucle SEULEMENT au hover.
   Ex: .bb-hover-loop.bb-anim-spin → tourne quand on survole, s'arrête sinon. */
[class*="bb-anim-"].bb-hover-loop {
    animation-play-state: paused;
}
[class*="bb-anim-"].bb-hover-loop:hover,
[class*="bb-anim-"].bb-hover-loop:focus-visible {
    animation-play-state: running;
}