```css
/*=========================================================
  SINHOI 2026
  ANIMATIONS.CSS
==========================================================*/

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

a,
button,
.btn,
.card,
.service-card,
.feature,
.panel,
img,
.elementor-widget,
.elementor-button{
    transition:var(--transition);
}


/*=========================================================
REVEAL SYSTEM
==========================================================*/

.reveal{
    opacity:0;
    transform:translateY(50px);
    transition:
        opacity .9s cubic-bezier(.22,.61,.36,1),
        transform .9s cubic-bezier(.22,.61,.36,1);
    will-change:transform,opacity;
}

.reveal.active{
    opacity:1;
    transform:none;
}


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

.fade{
    opacity:0;
    transition:opacity .8s ease;
}

.fade.active{
    opacity:1;
}


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

.slide-left{
    opacity:0;
    transform:translateX(-60px);
    transition:all .9s cubic-bezier(.22,.61,.36,1);
}

.slide-left.active{
    opacity:1;
    transform:none;
}

.slide-right{
    opacity:0;
    transform:translateX(60px);
    transition:all .9s cubic-bezier(.22,.61,.36,1);
}

.slide-right.active{
    opacity:1;
    transform:none;
}

.slide-up{
    opacity:0;
    transform:translateY(60px);
    transition:all .9s cubic-bezier(.22,.61,.36,1);
}

.slide-up.active{
    opacity:1;
    transform:none;
}


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

.zoom-in{
    opacity:0;
    transform:scale(.9);
    transition:all .8s cubic-bezier(.22,.61,.36,1);
}

.zoom-in.active{
    opacity:1;
    transform:scale(1);
}


/*=========================================================
STAGGER
==========================================================*/

.delay-1{transition-delay:.1s;}
.delay-2{transition-delay:.2s;}
.delay-3{transition-delay:.3s;}
.delay-4{transition-delay:.4s;}
.delay-5{transition-delay:.5s;}
.delay-6{transition-delay:.6s;}


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

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

.float-slow{
    animation:float 12s ease-in-out infinite;
}

.float-fast{
    animation:float 5s ease-in-out infinite;
}


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

.pulse{
    animation:pulse 2.5s infinite;
}


/*=========================================================
ROTATE
==========================================================*/

.rotate{
    animation:rotate360 18s linear infinite;
}


/*=========================================================
BOUNCE
==========================================================*/

.bounce{
    animation:bounce 2s infinite;
}


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

.hover-lift{
    transition:var(--transition);
}

.hover-lift:hover{
    transform:translateY(-8px);
}


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

.hover-scale{
    overflow:hidden;
}

.hover-scale img{
    transition:1.1s ease;
}

.hover-scale:hover img{
    transform:scale(1.08);
}


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

.hover-rotate img{
    transition:1s ease;
}

.hover-rotate:hover img{
    transform:rotate(2deg) scale(1.05);
}


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

.icon-hover{
    transition:var(--transition);
}

.icon-hover:hover{
    transform:translateY(-6px) scale(1.08);
}


/*=========================================================
BUTTON RIPPLE READY
==========================================================*/

.btn,
.elementor-button{
    position:relative;
    overflow:hidden;
}


/*=========================================================
TEXT GRADIENT
==========================================================*/

.text-gradient{
    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}


/*=========================================================
PARALLAX LAYER
==========================================================*/

.parallax{
    will-change:transform;
}


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

.image-fade{
    overflow:hidden;
}

.image-fade img{
    transition:1.2s ease;
}

.image-fade:hover img{
    opacity:.9;
    transform:scale(1.06);
}


/*=========================================================
SHINE EFFECT
==========================================================*/

.shine{
    position:relative;
    overflow:hidden;
}

.shine::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );
}

.shine:hover::before{
    animation:shine 1.2s;
}


/*=========================================================
LOADER
==========================================================*/

.spinner{
    width:42px;
    height:42px;
    border-radius:50%;
    border:3px solid rgba(0,0,0,.12);
    border-top-color:var(--primary);
    animation:spin .8s linear infinite;
}


/*=========================================================
KEYFRAMES
==========================================================*/

@keyframes float{

    0%,100%{
        transform:translateY(0);
    }

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

}

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }

}

@keyframes rotate360{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes bounce{

    0%,100%{
        transform:translateY(0);
    }

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

}

@keyframes shine{

    from{
        left:-120%;
    }

    to{
        left:140%;
    }

}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/*=========================================================
ELEMENTOR
==========================================================*/

.elementor-widget{
    transition:var(--transition);
}

.elementor-widget:hover{
    z-index:2;
}

.elementor-widget-image img{
    transition:1s ease;
}

.elementor-widget-image:hover img{
    transform:scale(1.05);
}

.elementor-button{
    transition:var(--transition);
}

.elementor-button:hover{
    transform:translateY(-4px);
}

.elementor-icon{
    transition:var(--transition);
}

.elementor-icon:hover{
    transform:scale(1.08);
}


/*=========================================================
REDUCED MOTION
==========================================================*/

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

*{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
}

.reveal,
.fade,
.slide-left,
.slide-right,
.slide-up,
.zoom-in{
    opacity:1 !important;
    transform:none !important;
}

}
```