/* =========================================================
   WRENOVA HERO ANIMATIONS
   ========================================================= */


/* =========================================================
   LOAD STATES
   ========================================================= */

.wr-hero-logo,
.wr-top-note,
.wr-hero-eyebrow,
.wr-hero-description,
.wr-hero-actions,
.wr-mini-statement {

    opacity: 0;

    transform:
        translateY(20px);

}


.hero-title-line {

    opacity: 0;

    transform:
        translateY(65px);

}


.wr-container-image-wrap {

    opacity: 0;

    transform:
        translateX(100px);

}


.wr-container-label {

    opacity: 0;

    transform:
        translateY(-15px);

}



/* =========================================================
   PAGE LOADED
   ========================================================= */

body.page-loaded
.wr-hero-logo {

    animation:
        wrFadeUp
        0.7s
        ease
        0.1s
        forwards;

}


body.page-loaded
.wr-top-note {

    animation:
        wrFadeUp
        0.7s
        ease
        0.18s
        forwards;

}


body.page-loaded
.wr-hero-eyebrow {

    animation:
        wrFadeUp
        0.7s
        ease
        0.25s
        forwards;

}


body.page-loaded
.hero-title-line:nth-child(1) {

    animation:
        wrTitleReveal
        0.9s
        cubic-bezier(
            0.2,
            0.7,
            0.2,
            1
        )
        0.28s
        forwards;

}


body.page-loaded
.hero-title-line:nth-child(2) {

    animation:
        wrTitleReveal
        0.9s
        cubic-bezier(
            0.2,
            0.7,
            0.2,
            1
        )
        0.38s
        forwards;

}


body.page-loaded
.hero-title-line:nth-child(3) {

    animation:
        wrTitleReveal
        0.9s
        cubic-bezier(
            0.2,
            0.7,
            0.2,
            1
        )
        0.48s
        forwards;

}


body.page-loaded
.hero-title-line:nth-child(4) {

    animation:
        wrTitleReveal
        0.9s
        cubic-bezier(
            0.2,
            0.7,
            0.2,
            1
        )
        0.58s
        forwards;

}


body.page-loaded
.wr-hero-description {

    animation:
        wrFadeUp
        0.8s
        ease
        0.7s
        forwards;

}


body.page-loaded
.wr-hero-actions {

    animation:
        wrFadeUp
        0.8s
        ease
        0.78s
        forwards;

}


body.page-loaded
.wr-mini-statement {

    animation:
        wrFadeUp
        0.8s
        ease
        0.88s
        forwards;

}


body.page-loaded
.wr-container-image-wrap {

    animation:
        wrContainerReveal
        1.2s
        cubic-bezier(
            0.16,
            0.8,
            0.2,
            1
        )
        0.38s
        forwards;

}


body.page-loaded
.wr-container-label {

    animation:
        wrFadeUp
        0.8s
        ease
        1s
        forwards;

}



/* =========================================================
   FLOATING CONTAINER
   ========================================================= */

body.page-loaded
.wr-container-image {

    animation:
        wrContainerFloat
        7s
        ease-in-out
        1.7s
        infinite;

}



/* =========================================================
   MONOGRAM
   ========================================================= */

.wr-hero-monogram {

    animation:
        wrMonogramFloat
        12s
        ease-in-out
        infinite;

}



/* =========================================================
   DOT
   ========================================================= */

.wr-container-dot {

    animation:
        wrPulse
        2.5s
        ease-in-out
        infinite;

}



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

@keyframes wrFadeUp {

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes wrTitleReveal {

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes wrContainerReveal {

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}


@keyframes wrContainerFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }


    50% {

        transform:
            translateY(-10px);

    }

}


@keyframes wrMonogramFloat {

    0%,
    100% {

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(0deg);

    }


    50% {

        transform:
            translate(
                -50%,
                -53%
            )
            rotate(2deg);

    }

}


@keyframes wrPulse {

    0%,
    100% {

        box-shadow:
            0 0 0 8px
            rgba(222, 220, 0, 0.10);

    }


    50% {

        box-shadow:
            0 0 0 17px
            rgba(222, 220, 0, 0);

    }

}



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

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

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

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}