/* ===================================
   Background Gradient Animation
=================================== */

@keyframes gradientMove {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}

.bg{

    animation:gradientMove 18s ease infinite;

}

/* ===================================
   Fade Up
=================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===================================
   Fade Down
=================================== */

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===================================
   Fade Left
=================================== */

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-35px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* ===================================
   Fade Right
=================================== */

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(35px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* ===================================
   Floating Weather Icon
=================================== */

@keyframes floating{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* ===================================
   Glass Card Float
=================================== */

@keyframes glassFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ===================================
   Hero Card
=================================== */

.hero{

    animation:fadeUp .8s ease;

}

/* ===================================
   Header
=================================== */

.header{

    animation:fadeDown .8s ease;

}

/* ===================================
   Highlights
=================================== */

.highlights{

    animation:fadeLeft 1s ease;

}

/* ===================================
   Forecast
=================================== */

.forecast{

    animation:fadeRight 1.2s ease;

}

/* ===================================
   Weekly Forecast
=================================== */

.week{

    animation:fadeUp 1.4s ease;

}

/* ===================================
   Weather Icon
=================================== */

.weather-icon{

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

}

/* ===================================
   Hover Animation
=================================== */

.card{

    transition:
        transform .35s,
        box-shadow .35s,
        background .35s;

}

.forecast-item{

    transition:
        transform .35s,
        background .35s;

}

.week-item{

    transition:
        transform .35s,
        background .35s;

}

/* ===================================
   Button Hover
=================================== */

.search-area button{

    transition:
        transform .3s,
        box-shadow .3s;

}

.search-area button:hover{

    transform:translateY(-4px) scale(1.05);

    box-shadow:0 10px 25px rgba(0,0,0,.25);

}

/* ===================================
   Input Focus
=================================== */

.search-area input{

    transition:.35s;

}

.search-area input:focus{

    background:rgba(255,255,255,.22);

    box-shadow:0 0 20px rgba(255,255,255,.2);

}