/**
 * WS Booster - Text Hover Effects
 * 5 effets de hover sur les caracteres des headings.
 *
 * Le JS injecte chaque caractere dans un <span class="ws-th-char"> avec --ws-th-i (index).
 * --ws-th-n = nombre total de caracteres (utile pour direction "center").
 */

[data-ws-text-hover] {
    --ws-th-speed: 0.5s;
    --ws-th-stagger: 0.03s;
}

[data-ws-text-hover] .ws-th-char {
    display: inline-block;
    transition:
        transform var(--ws-th-speed) cubic-bezier(0.34, 1.56, 0.64, 1),
        color var(--ws-th-speed) ease;
    transform-origin: center center;
    will-change: transform;
}

/* Espaces conserves */
[data-ws-text-hover] .ws-th-space {
    display: inline-block;
    width: 0.25em;
}

/* === DIRECTION DU STAGGER === */
/* Defaut : depuis la gauche (--ws-th-i croit) */
[data-ws-text-hover][data-ws-text-hover-dir="left"] .ws-th-char {
    transition-delay: calc(var(--ws-th-i, 0) * var(--ws-th-stagger));
}

/* Depuis la droite : on inverse l'ordre */
[data-ws-text-hover][data-ws-text-hover-dir="right"] .ws-th-char {
    transition-delay: calc((var(--ws-th-n, 1) - var(--ws-th-i, 0) - 1) * var(--ws-th-stagger));
}

/* Depuis le centre : delay = abs(i - center) */
[data-ws-text-hover][data-ws-text-hover-dir="center"] .ws-th-char {
    transition-delay: calc(var(--ws-th-d, 0) * var(--ws-th-stagger));
}

/* ============================================================
   1. STAGGER UP - chaque lettre glisse vers le haut au hover
   ============================================================ */
[data-ws-text-hover="stagger-up"]:hover .ws-th-char {
    transform: translateY(-100%);
}

/* ============================================================
   2. WAVE - les lettres font une vague (sinus simule par stagger)
   ============================================================ */
[data-ws-text-hover="wave"] .ws-th-char {
    transition: transform var(--ws-th-speed) cubic-bezier(0.45, 0, 0.55, 1);
}

[data-ws-text-hover="wave"]:hover .ws-th-char {
    transform: translateY(-12px);
    transition-delay: calc(var(--ws-th-i, 0) * var(--ws-th-stagger));
}

[data-ws-text-hover="wave"]:hover .ws-th-char {
    animation: ws-th-wave var(--ws-th-speed) ease-in-out;
    animation-delay: calc(var(--ws-th-i, 0) * var(--ws-th-stagger));
    animation-fill-mode: both;
}

@keyframes ws-th-wave {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-14px); }
    100% { transform: translateY(0); }
}

/* ============================================================
   3. BOUNCE - chaque lettre rebondit
   ============================================================ */
[data-ws-text-hover="bounce"] .ws-th-char {
    transition: none;
}

[data-ws-text-hover="bounce"]:hover .ws-th-char {
    animation: ws-th-bounce var(--ws-th-speed) cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-delay: calc(var(--ws-th-i, 0) * var(--ws-th-stagger));
    animation-fill-mode: both;
}

@keyframes ws-th-bounce {
    0%   { transform: translateY(0) scale(1); }
    30%  { transform: translateY(-18px) scale(1.1); }
    60%  { transform: translateY(0) scale(0.95); }
    100% { transform: translateY(0) scale(1); }
}

/* ============================================================
   4. SHAKE - lettres tremblent (rotation alternee)
   ============================================================ */
[data-ws-text-hover="shake"] .ws-th-char {
    transition: none;
}

[data-ws-text-hover="shake"]:hover .ws-th-char {
    animation: ws-th-shake var(--ws-th-speed) ease-in-out;
    animation-delay: calc(var(--ws-th-i, 0) * var(--ws-th-stagger));
    animation-fill-mode: both;
}

@keyframes ws-th-shake {
    0%, 100% { transform: rotate(0); }
    20%  { transform: rotate(-12deg) translateY(-2px); }
    40%  { transform: rotate(8deg) translateY(2px); }
    60%  { transform: rotate(-6deg) translateY(-1px); }
    80%  { transform: rotate(4deg) translateY(1px); }
}

/* ============================================================
   5. SCALE PULSE - lettres grossissent puis reviennent
   ============================================================ */
[data-ws-text-hover="scale-pulse"] .ws-th-char {
    transition: none;
}

[data-ws-text-hover="scale-pulse"]:hover .ws-th-char {
    animation: ws-th-scale var(--ws-th-speed) cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-delay: calc(var(--ws-th-i, 0) * var(--ws-th-stagger));
    animation-fill-mode: both;
}

@keyframes ws-th-scale {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* === REDUCE MOTION === */
@media (prefers-reduced-motion: reduce) {
    [data-ws-text-hover] .ws-th-char,
    [data-ws-text-hover]:hover .ws-th-char {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}