/* ===========================================
   ITFix s.r.o.
   animations.css
===========================================*/

/* ---------- Fade ---------- */

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(60px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;
        transform:translateX(-80px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;
        transform:translateX(80px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

/* ---------- Hero ---------- */

.hero-text{

    animation:fadeLeft 1.2s ease;

}

.hero h1{

    animation:fadeLeft .8s ease;

}

.hero p{

    animation:fadeLeft 1.2s ease;

}

.buttons{

    animation:fadeUp 1.5s ease;

}

/* ---------- Navigation ---------- */

nav{
    transition:.4s;
}

nav.scrolled{
    background:rgba(0,153,255,.35);
    box-shadow:0 10px 25px rgba(0,0,0,.35);
}

/* Jen na desktopu zmenšuj výšku */
@media (min-width:769px){

    nav.scrolled{
        height:70px;
    }

}

/* ---------- Buttons ---------- */

.btn-primary{

    position:relative;

    overflow:hidden;

}

.btn-primary::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.4),
    transparent);

    transition:1s;

}

.btn-primary:hover::before{

    left:120%;

}

/* ---------- Cards ---------- */

.card{

    opacity:0;

    transform:translateY(60px);

}

.card.show{

    animation:fadeUp .8s forwards;

}

.card:hover{

    box-shadow:

    0 0 20px rgba(44,169,255,.2),

    0 0 40px rgba(44,169,255,.15);

}

/* ---------- Gallery ---------- */

.photo{

    overflow:hidden;

    position:relative;

}

.photo::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        transparent,

        rgba(44,169,255,.25)

    );

    opacity:0;

    transition:.4s;

}

.photo:hover::after{

    opacity:1;

}

/* ---------- Features ---------- */

.features div{

    transition:.4s;

}

.features div:hover{

    transform:translateY(-10px);

    border-color:#2ca9ff;

    box-shadow:

    0 0 25px rgba(44,169,255,.25);

}

/* ---------- Form ---------- */

input:focus,

textarea:focus{

    outline:none;

    border-color:#2ca9ff;

    box-shadow:

    0 0 15px rgba(44,169,255,.2);

}

/* ---------- Footer ---------- */

footer img{

    transition:.5s;

}

footer img:hover{

    transform:scale(1.08);

}

/* ---------- Floating ---------- */

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

    100%{

        transform:translateY(0);

    }

}

.logo img{

    animation:floating 6s infinite ease-in-out;

}

/* ---------- Glow ---------- */

@keyframes glow{

    0%{

        text-shadow:0 0 0px #2ca9ff;

    }

    50%{

        text-shadow:

        0 0 20px #2ca9ff,

        0 0 40px #2ca9ff;

    }

    100%{

        text-shadow:0 0 0px #2ca9ff;

    }

}

.hero h1{

    animation:

    fadeLeft 1s,

    glow 8s infinite;

}

/* ---------- Scroll ---------- */

.reveal{

    opacity:0;

    transform:translateY(80px);

    transition:1s;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* ---------- Background ---------- */

@keyframes backgroundMove{

    from{

        background-position:0 0;

    }

    to{

        background-position:3000px 0;

    }

}

body::before{

    content:"";

    position:fixed;

    inset:0;

    z-index:-2;

    opacity:.04;

    background-image:

    linear-gradient(

    rgba(255,255,255,.12) 1px,

    transparent 1px),

    linear-gradient(

    90deg,

    rgba(255,255,255,.12) 1px,

    transparent 1px);

    background-size:60px 60px;

    animation:backgroundMove 120s linear infinite;

}