/*
 * CustomPlus v4.0 — Animations Premium pour Elementor
 * =====================================================
 * Toutes les animations utilisent uniquement opacity +
 * transform pour des performances GPU optimales.
 * Déplacements max : 20-30px (subtil et élégant).
 *
 * Entrées scroll  → classe .animated.cp-xxx
 * Effets hover    → classe .elementor-animation-cp-xxx
 */

/* ══════════════════════════════════════════════════════
   KEYFRAMES — ANIMATIONS D'ENTRÉE (SCROLL)
══════════════════════════════════════════════════════ */

/* Fade Up 20px */
@keyframes cp-fadeUp {
    from { opacity: 0; transform: translate3d(0, 20px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Fade Down 20px */
@keyframes cp-fadeDown {
    from { opacity: 0; transform: translate3d(0, -20px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Fade Left 20px */
@keyframes cp-fadeLeft {
    from { opacity: 0; transform: translate3d(20px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Fade Right 20px */
@keyframes cp-fadeRight {
    from { opacity: 0; transform: translate3d(-20px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Scale Up subtil */
@keyframes cp-scaleUp {
    from { opacity: 0; transform: scale3d(0.95, 0.95, 1); }
    to   { opacity: 1; transform: scale3d(1, 1, 1); }
}

/* Scale Down subtil */
@keyframes cp-scaleDown {
    from { opacity: 0; transform: scale3d(1.05, 1.05, 1); }
    to   { opacity: 1; transform: scale3d(1, 1, 1); }
}

/* Blur to Focus */
@keyframes cp-blurIn {
    from { opacity: 0; filter: blur(8px); }
    to   { opacity: 1; filter: blur(0px); }
}

/* Reveal Up (clip-path) */
@keyframes cp-revealUp {
    from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translate3d(0, 12px, 0); }
    to   { opacity: 1; clip-path: inset(0% 0 0 0);   transform: translate3d(0, 0, 0); }
}

/* Reveal Left (clip-path) */
@keyframes cp-revealLeft {
    from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate3d(-12px, 0, 0); }
    to   { opacity: 1; clip-path: inset(0 0% 0 0);   transform: translate3d(0, 0, 0); }
}

/* Rise Up (fade + scale + légère montée) */
@keyframes cp-riseUp {
    from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.97); }
    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}


/* ══════════════════════════════════════════════════════
   CLASSES D'ENTRÉE — appliquées par Elementor
   via .animated.cp-xxx
   Elementor applique : animation-duration et
   animation-delay via ses propres sliders.
══════════════════════════════════════════════════════ */

.animated.cp-fadeUp    { animation-name: cp-fadeUp; }
.animated.cp-fadeDown  { animation-name: cp-fadeDown; }
.animated.cp-fadeLeft  { animation-name: cp-fadeLeft; }
.animated.cp-fadeRight { animation-name: cp-fadeRight; }
.animated.cp-scaleUp   { animation-name: cp-scaleUp; }
.animated.cp-scaleDown { animation-name: cp-scaleDown; }
.animated.cp-blurIn    { animation-name: cp-blurIn; }
.animated.cp-revealUp  { animation-name: cp-revealUp; }
.animated.cp-revealLeft{ animation-name: cp-revealLeft; }
.animated.cp-riseUp    { animation-name: cp-riseUp; }


/* ══════════════════════════════════════════════════════
   KEYFRAMES — EFFETS AU SURVOL
   Durée de transition gérée via CSS :
   Elementor ajoute automatiquement la classe
   .elementor-animation-{slug} sur l'élément.
══════════════════════════════════════════════════════ */

/* ── Lift ── */
@keyframes cp-lift-in  { to { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,.15); } }
@keyframes cp-lift-out { to { transform: translateY(0);    box-shadow: none; } }

/* ── Soft Scale ── */
@keyframes cp-softScale-in  { to { transform: scale(1.03); } }
@keyframes cp-softScale-out { to { transform: scale(1); } }

/* ── Glow Border ── */
@keyframes cp-glowBorder-in  { to { box-shadow: 0 0 0 3px rgba(101,136,78,.5), 0 8px 20px rgba(101,136,78,.2); } }
@keyframes cp-glowBorder-out { to { box-shadow: none; } }

/* ── Brighten ── */
@keyframes cp-brighten-in  { to { filter: brightness(1.12); } }
@keyframes cp-brighten-out { to { filter: brightness(1); } }

/* ── Darken ── */
@keyframes cp-darken-in  { to { filter: brightness(0.88); } }
@keyframes cp-darken-out { to { filter: brightness(1); } }

/* ── Tilt Left ── */
@keyframes cp-tiltLeft-in  { to { transform: rotate(-2deg) scale(1.02); } }
@keyframes cp-tiltLeft-out { to { transform: rotate(0deg) scale(1); } }

/* ── Tilt Right ── */
@keyframes cp-tiltRight-in  { to { transform: rotate(2deg) scale(1.02); } }
@keyframes cp-tiltRight-out { to { transform: rotate(0deg) scale(1); } }

/* ── Soft Shadow ── */
@keyframes cp-softShadow-in  { to { box-shadow: 0 16px 32px rgba(0,0,0,.18); transform: translateY(-3px); } }
@keyframes cp-softShadow-out { to { box-shadow: none; transform: translateY(0); } }


/* ══════════════════════════════════════════════════════
   CLASSES DE SURVOL — appliquées par Elementor
   via .elementor-animation-cp-xxx
   On utilise CSS transitions pour le hover
   (plus simple et natif que des @keyframes aller-retour)
══════════════════════════════════════════════════════ */

/* Base : transition douce sur tous les effets hover */
.elementor-animation-cp-lift,
.elementor-animation-cp-softScale,
.elementor-animation-cp-glowBorder,
.elementor-animation-cp-brighten,
.elementor-animation-cp-darken,
.elementor-animation-cp-tiltLeft,
.elementor-animation-cp-tiltRight,
.elementor-animation-cp-softShadow {
    transition: transform .35s cubic-bezier(.25,.46,.45,.94),
                box-shadow .35s cubic-bezier(.25,.46,.45,.94),
                filter .35s cubic-bezier(.25,.46,.45,.94);
    will-change: transform;
}

/* Lift */
.elementor-animation-cp-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,.15);
}

/* Soft Scale */
.elementor-animation-cp-softScale:hover {
    transform: scale(1.03);
}

/* Glow Border */
.elementor-animation-cp-glowBorder:hover {
    box-shadow: 0 0 0 3px rgba(101,136,78,.5), 0 8px 20px rgba(101,136,78,.2);
}

/* Brighten */
.elementor-animation-cp-brighten:hover {
    filter: brightness(1.12);
}

/* Darken */
.elementor-animation-cp-darken:hover {
    filter: brightness(0.88);
}

/* Tilt Left */
.elementor-animation-cp-tiltLeft:hover {
    transform: rotate(-2deg) scale(1.02);
}

/* Tilt Right */
.elementor-animation-cp-tiltRight:hover {
    transform: rotate(2deg) scale(1.02);
}

/* Soft Shadow */
.elementor-animation-cp-softShadow:hover {
    box-shadow: 0 16px 32px rgba(0,0,0,.18);
    transform: translateY(-3px);
}