/*==================================================
SI-PENA Motion System
==================================================*/

/* ===========================
   Motion Tokens
=========================== */

:root{
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-in-out:cubic-bezier(.65,0,.35,1);

    --duration-fast:.2s;
    --duration-normal:.4s;
    --duration-slow:.7s;
}

/* ===========================
   Initial State
=========================== */

.reveal{

    opacity:0;

    transform:translateY(30px);

    transition:

        opacity .7s var(--ease-out),

        transform .7s var(--ease-out);

}

.reveal.show{

    opacity:1;

    transform:none;

}

/* ===========================
   Fade
=========================== */

.fade-in{

    animation:fadeIn .7s var(--ease-out) forwards;

}

@keyframes fadeIn{

from{

opacity:0;

}

to{

opacity:1;

}

}

/* ===========================
   Slide Up
=========================== */

.slide-up{

    animation:slideUp .7s var(--ease-out) forwards;

}

@keyframes slideUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:none;

}

}

/* ===========================
   Slide Left
=========================== */

.slide-left{

    animation:slideLeft .7s var(--ease-out) forwards;

}

@keyframes slideLeft{

from{

opacity:0;

transform:translateX(40px);

}

to{

opacity:1;

transform:none;

}

}

/* ===========================
   Slide Right
=========================== */

.slide-right{

    animation:slideRight .7s var(--ease-out) forwards;

}

@keyframes slideRight{

from{

opacity:0;

transform:translateX(-40px);

}

to{

opacity:1;

transform:none;

}

}

.float-soft{

    animation:floatSoft 8s ease-in-out infinite;

}

@keyframes floatSoft{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

.pulse-soft{

animation:pulseSoft 3s infinite;

}

@keyframes pulseSoft{

0%{

box-shadow:0 0 0 0 rgba(37,99,235,.20);

}

70%{

box-shadow:0 0 0 12px rgba(37,99,235,0);

}

100%{

box-shadow:0 0 0 0 rgba(37,99,235,0);

}

}

.aurora{

animation:aurora 18s ease infinite alternate;

}

@keyframes aurora{

0%{

transform:translate(0,0);

}

100%{

transform:translate(60px,-40px);

}

}

.hover-lift{

transition:.35s;

}

.hover-lift:hover{

transform:translateY(-8px);

}

.hover-scale{

transition:.35s;

}

.hover-scale:hover{

transform:scale(1.03);

}

.icon-rotate{

transition:.35s;

}

.hover-lift:hover .icon-rotate{

transform:rotate(-10deg);

}

.btn-premium svg,

.btn-premium i{

transition:.3s;

}

.btn-premium:hover svg,

.btn-premium:hover i{

transform:translateX(5px);

}

.delay-1{

animation-delay:.1s;

}

.delay-2{

animation-delay:.2s;

}

.delay-3{

animation-delay:.3s;

}

.delay-4{

animation-delay:.4s;

}

.delay-5{

animation-delay:.5s;

}

.loading{

pointer-events:none;

opacity:.7;

}

.clickable{

cursor:pointer;

}

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

*{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}