/**
 * Micro Animations & Interactions
 * Usage: Ajouter les classes dans Divi Builder > CSS Classes
 * Les animations se déclenchent automatiquement au scroll
 *
 * Note: Les animations sont désactivées dans le Visual Builder pour une meilleure UX d'édition
 */

/* ==========================================
   BASE - États initiaux (avant apparition)
   ========================================== */

[class*="appear-"] {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* État visible */
[class*="appear-"].is-visible {
    opacity: 1;
}

/* ==========================================
   APPARITIONS DIRECTIONNELLES
   ========================================== */

/* Apparition depuis la gauche */
.appear-left {
    transform: translateX(-60px);
}

.appear-left.is-visible {
    transform: translateX(0);
}

/* Apparition depuis la droite */
.appear-right {
    transform: translateX(60px);
}

.appear-right.is-visible {
    transform: translateX(0);
}

/* Apparition depuis le haut */
.appear-top {
    transform: translateY(-60px);
}

.appear-top.is-visible {
    transform: translateY(0);
}

/* Apparition depuis le bas */
.appear-bottom {
    transform: translateY(60px);
}

.appear-bottom.is-visible {
    transform: translateY(0);
}

/* ==========================================
   APPARITIONS PAR OPACITÉ
   ========================================== */

/* Fade in simple */
.appear-fade {
    opacity: 0;
}

.appear-fade.is-visible {
    opacity: 1;
}

/* ==========================================
   APPARITIONS AVEC ZOOM
   ========================================== */

/* Zoom in (depuis petit) */
.appear-zoom-in {
    transform: scale(0.85);
    opacity: 0;
}

.appear-zoom-in.is-visible {
    transform: scale(1);
    opacity: 1;
}

/* Zoom out (depuis grand) */
.appear-zoom-out {
    transform: scale(1.15);
    opacity: 0;
}

.appear-zoom-out.is-visible {
    transform: scale(1);
    opacity: 1;
}

/* ==========================================
   APPARITIONS COMBINÉES
   ========================================== */

/* Fade + Gauche */
.appear-fade-left {
    transform: translateX(-40px);
    opacity: 0;
}

.appear-fade-left.is-visible {
    transform: translateX(0);
    opacity: 1;
}

/* Fade + Droite */
.appear-fade-right {
    transform: translateX(40px);
    opacity: 0;
}

.appear-fade-right.is-visible {
    transform: translateX(0);
    opacity: 1;
}

/* Fade + Haut */
.appear-fade-top {
    transform: translateY(-40px);
    opacity: 0;
}

.appear-fade-top.is-visible {
    transform: translateY(0);
    opacity: 1;
}

/* Fade + Bas */
.appear-fade-bottom {
    transform: translateY(40px);
    opacity: 0;
}

.appear-fade-bottom.is-visible {
    transform: translateY(0);
    opacity: 1;
}

/* ==========================================
   ANIMATIONS DE ROTATION
   ========================================== */

/* Rotation + Fade */
.appear-rotate {
    transform: rotate(-10deg);
    opacity: 0;
}

.appear-rotate.is-visible {
    transform: rotate(0);
    opacity: 1;
}

/* Flip horizontal */
.appear-flip-x {
    transform: perspective(1000px) rotateX(-90deg);
    opacity: 0;
}

.appear-flip-x.is-visible {
    transform: perspective(1000px) rotateX(0);
    opacity: 1;
}

/* Flip vertical */
.appear-flip-y {
    transform: perspective(1000px) rotateY(-90deg);
    opacity: 0;
}

.appear-flip-y.is-visible {
    transform: perspective(1000px) rotateY(0);
    opacity: 1;
}

/* ==========================================
   DÉLAIS D'APPARITION (stagger effect)
   ========================================== */

.appear-delay-1 {
    transition-delay: 0.1s;
}

.appear-delay-2 {
    transition-delay: 0.2s;
}

.appear-delay-3 {
    transition-delay: 0.3s;
}

.appear-delay-4 {
    transition-delay: 0.4s;
}

.appear-delay-5 {
    transition-delay: 0.5s;
}

.appear-delay-6 {
    transition-delay: 0.6s;
}

/* ==========================================
   VITESSES D'ANIMATION
   ========================================== */

.appear-fast {
    transition-duration: 0.4s !important;
}

.appear-slow {
    transition-duration: 1.2s !important;
}

.appear-slower {
    transition-duration: 1.6s !important;
}

/* ==========================================
   MICRO-INTERACTIONS AU HOVER
   ========================================== */

/* Lift (élévation) */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Grow (agrandissement) */
.hover-grow {
    transition: transform 0.3s ease;
}

.hover-grow:hover {
    transform: scale(1.05);
}

/* Shrink (rétrécissement) */
.hover-shrink {
    transition: transform 0.3s ease;
}

.hover-shrink:hover {
    transform: scale(0.95);
}

/* Rotate légèrement */
.hover-rotate {
    transition: transform 0.3s ease;
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

/* Glow (lueur) */
.hover-glow {
    transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(0, 63, 92, 0.4);
}

/* Underline animé */
.hover-underline {
    position: relative;
    display: inline-block;
}

.hover-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: width 0.3s ease;
}

.hover-underline:hover::after {
    width: 100%;
}

/* Shake au hover */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.hover-shake:hover {
    animation: shake 0.4s ease;
}

/* Pulse au hover */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.hover-pulse:hover {
    animation: pulse 0.6s ease infinite;
}

/* ==========================================
   ANIMATIONS CONTINUES (toujours actives)
   ========================================== */

/* Float (flottement) */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.anim-float {
    animation: float 3s ease-in-out infinite;
}

/* Bounce subtil */
@keyframes bounce-subtle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.anim-bounce {
    animation: bounce-subtle 2s ease-in-out infinite;
}

/* Rotation continue lente */
@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.anim-rotate {
    animation: rotate-slow 20s linear infinite;
}

/* Pulse d'opacité */
@keyframes pulse-opacity {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.anim-pulse-opacity {
    animation: pulse-opacity 2s ease-in-out infinite;
}

/* ==========================================
   EFFETS SPÉCIAUX
   ========================================== */

/* Blur to clear */
.appear-blur {
    filter: blur(10px);
    opacity: 0;
}

.appear-blur.is-visible {
    filter: blur(0);
    opacity: 1;
}

/* Slide & fade avec élasticité */
.appear-elastic {
    transform: translateY(60px) scale(0.9);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.appear-elastic.is-visible {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ==========================================
   UTILISATION AVANCÉE - STAGGER CHILDREN
   ========================================== */

/* Pour animer les enfants avec délais */
.stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0.1s; }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 0.2s; }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 0.3s; }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 0.4s; }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 0.5s; }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 0.6s; }

.stagger-children.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   RESPONSIVE - Désactiver sur mobile
   ========================================== */

@media (max-width: 768px) {
    /* Optionnel : désactiver les animations sur mobile pour la performance */
    [class*="appear-"]:not(.appear-mobile) {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================
   VISUAL BUILDER - Désactiver les animations
   ========================================== */

/* Annuler toutes les animations dans le Visual Builder pour une meilleure UX d'édition */
.et-fb [class*="appear-"],
.et_fb_enabled [class*="appear-"],
body.et-fb [class*="appear-"],
body.et_fb_enabled [class*="appear-"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

.et-fb .stagger-children > *,
.et_fb_enabled .stagger-children > *,
body.et-fb .stagger-children > *,
body.et_fb_enabled .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}