/*=========================================================
 Systronics Website
 animations.css
 Subtle UI Animations
=========================================================*/

.fade-up{
    opacity:0;
    transform:translateY(24px);
    animation:fadeUp .7s ease forwards;
}

.fade-delay-1{animation-delay:.15s;}
.fade-delay-2{animation-delay:.3s;}
.fade-delay-3{animation-delay:.45s;}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(24px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.btn{
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

.btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(0,0,0,.12);
}

.feature-card,
.card,
.contact-card{
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.feature-card:hover,
.card:hover,
.contact-card:hover{
    transform:translateY(-6px);
}

.image-frame{
    overflow:hidden;
}

.image-frame img{
    transition:transform .4s ease;
}

.image-frame:hover img{
    transform:scale(1.03);
}

.accent-bar{
    position:relative;
}

.accent-bar::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:999px;
    background:inherit;
    filter:blur(10px);
    opacity:.2;
    z-index:-1;
}