/* =========================================================
   SSP ENTERPRISE ANIMATIONS
   Security Sales Perú
========================================================= */

/* =========================================================
   GLOBAL SMOOTH
========================================================= */

*{
    scroll-behavior:smooth;
}

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

.fade-up{
    opacity:0;
    transform:
        translateY(40px);
    transition:
        opacity 1s ease,
        transform 1s ease;
}

.fade-up.active{
    opacity:1;
    transform:
        translateY(0);
}

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

.fade-left{
    opacity:0;
    transform:
        translateX(-60px);
    transition:
        opacity 1s ease,
        transform 1s ease;
}

.fade-left.active{
    opacity:1;
    transform:
        translateX(0);
}

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

.fade-right{
    opacity:0;
    transform:
        translateX(60px);
    transition:
        opacity 1s ease,
        transform 1s ease;
}

.fade-right.active{
    opacity:1;
    transform:
        translateX(0);
}

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

.zoom-in{
    opacity:0;
    transform:
        scale(0.9);
    transition:
        opacity 1s ease,
        transform 1s ease;
}

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

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

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

@keyframes floating{

    0%{
        transform:
            translateY(0px);
    }

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

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

}

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

.glow-pulse{
    animation:
        glowPulse 3s infinite ease-in-out;
}

@keyframes glowPulse{

    0%{
        box-shadow:
            0 0 0 rgba(255,107,0,0);
    }

    50%{
        box-shadow:
            0 0 30px rgba(255,107,0,0.22);
    }

    100%{
        box-shadow:
            0 0 0 rgba(255,107,0,0);
    }

}

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

.rotate-glow{
    position:relative;
    overflow:hidden;
}

.rotate-glow::before{
    content:'';
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    background:
        linear-gradient(
            135deg,
            rgba(255,107,0,0.35),
            transparent,
            rgba(0,153,255,0.18)
        );
    animation:
        rotateGlow 8s linear infinite;
    z-index:-1;
}

@keyframes rotateGlow{

    from{
        transform:
            rotate(0deg);
    }

    to{
        transform:
            rotate(360deg);
    }

}

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

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

.shine-effect::after{
    content:'';
    position:absolute;
    top:-120%;
    left:-120%;
    width:220%;
    height:220%;
    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,0.06),
            transparent
        );
    transform:
        rotate(25deg);
    transition:0.9s ease;
}

.shine-effect:hover::after{
    top:100%;
    left:100%;
}

/* =========================================================
   GLASS EFFECT
========================================================= */

.glass{
    background:
        rgba(255,255,255,0.04);
    border:
        1px solid rgba(255,255,255,0.06);
    backdrop-filter:
        blur(14px);
    -webkit-backdrop-filter:
        blur(14px);
}

/* =========================================================
   BORDER GLOW
========================================================= */

.border-glow{
    position:relative;
}

.border-glow::before{
    content:'';
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    background:
        linear-gradient(
            145deg,
            rgba(255,107,0,0.25),
            transparent,
            rgba(0,153,255,0.12)
        );
    opacity:0;
    transition:0.5s ease;
    z-index:-1;
}

.border-glow:hover::before{
    opacity:1;
}

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

.btn-hover{
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.btn-hover:hover{
    transform:
        translateY(-5px);
    box-shadow:
        0 18px 35px rgba(255,107,0,0.18);
}

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

.image-zoom{
    overflow:hidden;
}

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

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

/* =========================================================
   SCAN EFFECT
========================================================= */

.scan-effect{
    position:relative;
    overflow:hidden;
}

.scan-effect::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(
            rgba(255,255,255,0.03) 1px,
            transparent 1px
        );
    background-size:100% 4px;
    opacity:0.08;
    pointer-events:none;
    animation:
        scanMove 10s linear infinite;
}

@keyframes scanMove{

    from{
        background-position:0 0;
    }

    to{
        background-position:0 120px;
    }

}

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

.tech-float{
    animation:
        techFloat 7s ease-in-out infinite;
}

@keyframes techFloat{

    0%{
        transform:
            translateY(0px);
    }

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

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

}

/* =========================================================
   LIGHT EFFECT
========================================================= */

.light-effect{
    position:relative;
}

.light-effect::after{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at center,
            rgba(255,107,0,0.08),
            transparent 70%
        );
    opacity:0;
    transition:0.5s ease;
    pointer-events:none;
}

.light-effect:hover::after{
    opacity:1;
}

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

.card-hover{
    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease,
        border-color 0.5s ease;
}

.card-hover:hover{
    transform:
        translateY(-10px);
    border-color:
        rgba(255,107,0,0.20);
    box-shadow:
        0 25px 50px rgba(0,0,0,0.35),
        0 0 35px rgba(255,107,0,0.08);
}

/* =========================================================
   TEXT GLOW
========================================================= */

.text-glow{
    text-shadow:
        0 0 20px rgba(255,107,0,0.18);
}

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

.icon-rotate{
    transition:
        transform 0.5s ease;
}

.icon-rotate:hover{
    transform:
        rotate(8deg)
        scale(1.08);
}

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

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

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

::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            #ff6b00,
            #ff8533
        );
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:
        linear-gradient(
            180deg,
            #ff8533,
            #ff6b00
        );
}

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

::selection{
    background:
        rgba(255,107,0,0.25);
    color:#fff;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:992px){

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

}

@media(max-width:768px){

    .float,
    .tech-float{
        animation:none;
    }

}