/* ========================================
   APPCLOUD ANIMATIONS
======================================== */

/* FADE UP */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* FADE DOWN */
@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translate3d(0, -40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* FADE LEFT */
@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translate3d(-40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* FADE RIGHT */
@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translate3d(40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* FLOAT */
@keyframes floatAnimation {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* PULSE */
@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 0 rgba(13,141,219,0);
    }
    50% {
        box-shadow: 0 0 30px rgba(13,141,219,.25);
    }
    100% {
        box-shadow: 0 0 0 rgba(13,141,219,0);
    }
}

/* GRADIENT SHIFT */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* HERO GRID MOVE */
@keyframes gridMove {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 60px 60px;
    }
}

/* SHINE EFFECT */
@keyframes shineEffect {
    0% {
        transform: translateX(-120%) skewX(-18deg);
    }
    100% {
        transform: translateX(220%) skewX(-18deg);
    }
}

/* ROTATE SOFT */
@keyframes rotateSoft {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* SCALE IN */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(.88);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================
   ANIMATION HELPERS
======================================== */

.anim-fade-up {
    animation: fadeUp .8s ease forwards;
}

.anim-fade-down {
    animation: fadeDown .8s ease forwards;
}

.anim-fade-left {
    animation: fadeLeft .8s ease forwards;
}

.anim-fade-right {
    animation: fadeRight .8s ease forwards;
}

.anim-scale-in {
    animation: scaleIn .7s ease forwards;
}

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

.anim-pulse {
    animation: pulseGlow 2.5s ease-in-out infinite;
}

.anim-rotate {
    animation: rotateSoft 22s linear infinite;
}

/* ========================================
   HERO EFFECTS
======================================== */

.hero-section::before,
.hero-section::after {
    animation: pulseGlow 6s ease-in-out infinite;
}

.hero-card {
    animation: floatAnimation 6s ease-in-out infinite;
}

.chart-placeholder::before {
    animation: fadeLeft 1.3s ease;
}

.chart-placeholder::after {
    animation: fadeRight 1.3s ease;
}

/* ========================================
   BUTTON EFFECTS
======================================== */

.btn-demo,
.btn-primary-app {
    position: relative;
    overflow: hidden;
}

.btn-demo::before,
.btn-primary-app::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transform: skewX(-18deg);
}

.btn-demo:hover::before,
.btn-primary-app:hover::before {
    animation: shineEffect .9s ease;
}

/* ========================================
   CARD HOVERS
======================================== */

.info-card,
.module-card,
.kpi-card,
.hero-stats div {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.info-card:hover,
.module-card:hover,
.kpi-card:hover,
.hero-stats div:hover {
    border-color: rgba(13,141,219,.24);
}

.kpi-card:hover {
    transform: translateY(-5px) scale(1.01);
}

/* ========================================
   SECTION APPEAR
======================================== */

.section-title,
.info-card,
.module-card,
.process-flow div {
    animation: fadeUp .8s ease both;
}

.info-card:nth-child(2),
.module-card:nth-child(2) {
    animation-delay: .08s;
}

.info-card:nth-child(3),
.module-card:nth-child(3) {
    animation-delay: .16s;
}

.info-card:nth-child(4),
.module-card:nth-child(4) {
    animation-delay: .24s;
}

/* ========================================
   SCROLLBAR
======================================== */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #edf3f9;
}

::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        rgba(0,200,83,.85),
        rgba(13,141,219,.85)
    );
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        rgba(0,200,83,1),
        rgba(13,141,219,1)
    );
}

/* ========================================
   SELECTION
======================================== */

::selection {
    background: rgba(13,141,219,.18);
    color: #07111f;
}


/* ========================================
   APPCLOUD PREMIUM MOTION V2
======================================== */

/* HERO AMBIENT */
@keyframes heroGlowMove {
    0% {
        transform: translate3d(0,0,0) scale(1);
        opacity: .42;
    }
    50% {
        transform: translate3d(18px,-12px,0) scale(1.08);
        opacity: .7;
    }
    100% {
        transform: translate3d(0,0,0) scale(1);
        opacity: .42;
    }
}

@keyframes softPulseBorder {
    0% {
        border-color: rgba(255,255,255,.08);
        box-shadow: 0 0 0 rgba(72,217,255,0);
    }
    50% {
        border-color: rgba(72,217,255,.22);
        box-shadow: 0 0 40px rgba(72,217,255,.10);
    }
    100% {
        border-color: rgba(255,255,255,.08);
        box-shadow: 0 0 0 rgba(72,217,255,0);
    }
}

@keyframes floatingCard {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes floatingSlow {
    0% {
        transform: translate3d(0,0,0);
    }
    50% {
        transform: translate3d(0,-14px,0);
    }
    100% {
        transform: translate3d(0,0,0);
    }
}

@keyframes badgeGlow {
    0% {
        box-shadow: 0 0 0 rgba(0,200,83,0);
    }
    50% {
        box-shadow: 0 0 28px rgba(0,200,83,.20);
    }
    100% {
        box-shadow: 0 0 0 rgba(0,200,83,0);
    }
}

@keyframes shimmerLine {
    0% {
        background-position: -240px 0;
    }
    100% {
        background-position: 240px 0;
    }
}

/* HERO */
.hero-section{
    position: relative;
    overflow: hidden;
}

.hero-section::before{
    animation: heroGlowMove 9s ease-in-out infinite !important;
}

.hero-section::after{
    animation: heroGlowMove 12s ease-in-out infinite reverse !important;
}

.badge-soft,
.footer-eyebrow{
    animation: badgeGlow 4s ease-in-out infinite;
}

.dashboard-device,
.catalog-phone,
.platform-card,
.final-cta,
.footer-cta.glass-panel{
    animation: softPulseBorder 7s ease-in-out infinite;
}

.phone-device{
    animation: floatingSlow 6s ease-in-out infinite;
}

.catalog-order-card{
    animation: floatingCard 4.8s ease-in-out infinite;
}

/* PREMIUM HOVER */
.operation-node,
.user-card,
.benefit-item,
.flow-step,
.module-icon-card,
.platform-card,
.trust-card,
.industry-card,
.footer-contact-card,
.catalog-order-card,
.kpi-card{
    position: relative;
    overflow: hidden;
}

.operation-node::before,
.user-card::before,
.benefit-item::before,
.flow-step::before,
.module-icon-card::before,
.platform-card::before,
.trust-card::before,
.industry-card::before,
.footer-contact-card::before,
.catalog-order-card::before,
.kpi-card::before{
    content:'';
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    background:
        radial-gradient(circle at var(--mouse-x,50%) var(--mouse-y,50%),
        rgba(72,217,255,.12),transparent 32%);
    opacity:0;
    transition:opacity .28s ease;
    pointer-events:none;
    z-index:0;
}

.operation-node:hover::before,
.user-card:hover::before,
.benefit-item:hover::before,
.flow-step:hover::before,
.module-icon-card:hover::before,
.platform-card:hover::before,
.trust-card:hover::before,
.industry-card:hover::before,
.footer-contact-card:hover::before,
.catalog-order-card:hover::before,
.kpi-card:hover::before{
    opacity:1;
}

.operation-node > *,
.user-card > *,
.benefit-item > *,
.flow-step > *,
.module-icon-card > *,
.platform-card > *,
.trust-card > *,
.industry-card > *,
.footer-contact-card > *,
.catalog-order-card > *,
.kpi-card > *{
    position:relative;
    z-index:1;
}

/* SHIMMER BARS */
.kpi-card::after,
.platform-card::after,
.module-icon-card::after{
    content:'';
    position:absolute;
    left:-120px;
    top:0;
    width:120px;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.08),
        transparent
    );
    transform:skewX(-18deg);
    opacity:0;
}

.kpi-card:hover::after,
.platform-card:hover::after,
.module-icon-card:hover::after{
    opacity:1;
    animation:shineEffect 1.1s ease;
}

/* FLOW */
.sales-flow-clean .flow-step{
    transition:
        transform .26s ease,
        border-color .26s ease,
        box-shadow .26s ease;
}

.sales-flow-clean .flow-step:hover{
    transform:translateY(-10px) scale(1.01);
    border-color:rgba(0,200,83,.26);
    box-shadow:0 28px 56px rgba(0,0,0,.24);
}

/* CTA */
.final-cta,
.footer-cta.glass-panel{
    background-size:200% 200% !important;
    animation:
        gradientMove 16s ease infinite,
        softPulseBorder 7s ease-in-out infinite;
}

/* NAVBAR */
.navbar-appcloud{
    transition:
        background .25s ease,
        border-color .25s ease,
        padding .25s ease,
        box-shadow .25s ease;
}

.navbar-scrolled{
    animation:fadeDown .28s ease;
}

/* BUTTONS */
.btn-primary-app,
.btn-outline-app,
.btn-outline-footer,
.btn-login-pro,
.btn-demo-pro,
.footer-login-btn{
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease,
        color .22s ease,
        border-color .22s ease;
}

.btn-primary-app:hover,
.btn-outline-app:hover,
.btn-outline-footer:hover,
.btn-login-pro:hover,
.btn-demo-pro:hover,
.footer-login-btn:hover{
    transform:translateY(-4px);
}

/* PARTICLES FEEL */
#particles-js,
.particles-js-canvas-el{
    opacity:.72;
}

/* SCROLLBAR PREMIUM */
::-webkit-scrollbar-track{
    background:#07111f !important;
}

::-webkit-scrollbar-thumb{
    border:2px solid #07111f;
}

/* MOBILE REDUCE */
@media (max-width: 992px){

    .dashboard-device,
    .catalog-phone,
    .platform-card,
    .final-cta,
    .footer-cta.glass-panel,
    .phone-device,
    .catalog-order-card{
        animation:none !important;
    }

    .operation-node:hover,
    .user-card:hover,
    .benefit-item:hover,
    .flow-step:hover,
    .module-icon-card:hover,
    .platform-card:hover,
    .trust-card:hover,
    .industry-card:hover,
    .footer-contact-card:hover,
    .catalog-order-card:hover,
    .kpi-card:hover{
        transform:none !important;
    }
}