/* ==========================================================
   SYLFOW MARKET
   ANIMATIONS
========================================================== */

/* ==========================================================
   TRANSITIONS
========================================================== */

.sf-transition{
    transition:var(--sf-transition);
}

.sf-transition-fast{
    transition:var(--sf-transition-fast);
}

.sf-transition-slow{
    transition:var(--sf-transition-slow);
}

/* ==========================================================
   HOVER
========================================================== */

.sf-hover-lift:hover{
    transform:translateY(-6px);
    box-shadow:var(--sf-shadow-lg);
}

.sf-hover-scale:hover{
    transform:scale(1.03);
}

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

/* ==========================================================
   FADE
========================================================== */

@keyframes sfFadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

.sf-fade-in{
    animation:sfFadeIn .8s ease both;
}

/* ==========================================================
   SLIDE UP
========================================================== */

@keyframes sfSlideUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.sf-slide-up{
    animation:sfSlideUp .8s ease both;
}

/* ==========================================================
   SLIDE LEFT
========================================================== */

@keyframes sfSlideLeft{

    from{
        opacity:0;
        transform:translateX(60px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

.sf-slide-left{
    animation:sfSlideLeft .8s ease both;
}

/* ==========================================================
   SLIDE RIGHT
========================================================== */

@keyframes sfSlideRight{

    from{
        opacity:0;
        transform:translateX(-60px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

.sf-slide-right{
    animation:sfSlideRight .8s ease both;
}

/* ==========================================================
   ZOOM
========================================================== */

@keyframes sfZoom{

    from{
        opacity:0;
        transform:scale(.9);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

.sf-zoom{
    animation:sfZoom .6s ease both;
}

/* ==========================================================
   FLOAT
========================================================== */

@keyframes sfFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }

}

.sf-float{
    animation:sfFloat 4s ease-in-out infinite;
}

/* ==========================================================
   PULSE
========================================================== */

@keyframes sfPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }

}

.sf-pulse{
    animation:sfPulse 2.5s infinite;
}

/* ==========================================================
   SPIN
========================================================== */

@keyframes sfSpin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

.sf-spin{
    animation:sfSpin 1.2s linear infinite;
}

/* ==========================================================
   DELAYS
========================================================== */

.sf-delay-1{
    animation-delay:.15s;
}

.sf-delay-2{
    animation-delay:.30s;
}

.sf-delay-3{
    animation-delay:.45s;
}

.sf-delay-4{
    animation-delay:.60s;
}

.sf-delay-5{
    animation-delay:.75s;
}

/* ==========================================================
   ACCESSIBILITÉ
========================================================== */

@media (prefers-reduced-motion: reduce){

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;

    }

}