/* ==========================================================
   ÉLAN Animations
   Version: 1.0.0
========================================================== */

/* ==========================================================
   KEYFRAMES
========================================================== */

@keyframes fade-up {

    from {

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

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}

@keyframes fade-in {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

@keyframes scale-in {

    from {

        opacity: 0;
        transform: scale(.96);

    }

    to {

        opacity: 1;
        transform: scale(1);

    }

}

@keyframes hero-image {

    from {

        transform: scale(1.08);

    }

    to {

        transform: scale(1.03);

    }

}

@keyframes scroll-indicator {

    0% {

        transform: translateY(-100%);
        opacity: 0;

    }

    30% {

        opacity: 1;

    }

    100% {

        transform: translateY(300%);
        opacity: 0;

    }

}

@keyframes button-spin {

    to {

        transform: rotate(360deg);

    }

}

/* ==========================================================
   LOADER
========================================================== */

.loader {

    opacity: 1;

    visibility: visible;

    transition:
        opacity .7s ease,
        visibility .7s ease;

}

.loader.is-hidden {

    opacity: 0;

    visibility: hidden;

}

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

.hero__image {

    animation:
        hero-image 8s ease-out forwards;

}

.hero.loaded .hero__date {

    animation:
        fade-up .8s ease forwards;

}

.hero.loaded .hero__title {

    animation:
        fade-up .9s ease .15s forwards;

    opacity: 0;

}

.hero.loaded .scroll-indicator {

    animation:
        fade-in .8s ease .6s forwards;

    opacity: 0;

}

/* ==========================================================
   SECTIONS
========================================================== */

.reveal {

    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.is-visible {

    opacity: 1;

    transform: translateY(0);

}

/* ==========================================================
   SCROLL INDICATOR
========================================================== */

.scroll-indicator span::after {

    animation:
        scroll-indicator 2s infinite;

}

/* ==========================================================
   BUTTONS
========================================================== */

.btn {

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background-color .25s ease,
        color .25s ease;

}

/* ==========================================================
   NAVIGATION
========================================================== */

.bottom-nav {

    transition:
        transform .35s ease,
        opacity .35s ease;

}

.bottom-nav button {

    transition:
        transform .2s ease,
        background-color .2s ease,
        color .2s ease;

}

/* ==========================================================
   GALLERY
========================================================== */

.gallery-item {

    overflow: hidden;

}

.gallery-item img {

    transition:
        transform .8s ease;

}

.gallery-item:hover img {

    transform: scale(1.05);

}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;

    }

}