/*=====================================================
        ANIMATION.CSS
        Premium Wedding Invitation
======================================================*/

/* ==========================================
        Fade Animation
========================================== */

.fade-up {
    animation: fadeUp 1s ease both;
}

.fade-down {
    animation: fadeDown 1s ease both;
}

.fade-left {
    animation: fadeLeft 1s ease both;
}

.fade-right {
    animation: fadeRight 1s ease both;
}

.zoom-in {
    animation: zoomIn .9s ease both;
}

.zoom-out {
    animation: zoomOut .9s ease both;
}

@keyframes fadeUp {

    from {

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

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}

@keyframes fadeDown {

    from {

        opacity: 0;
        transform: translateY(-70px);

    }

    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);

    }

}

@keyframes zoomIn {

    from {

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

    }

    to {

        opacity: 1;
        transform: scale(1);

    }

}

@keyframes zoomOut {

    from {

        opacity: 0;
        transform: scale(1.3);

    }

    to {

        opacity: 1;
        transform: scale(1);

    }

}

/* ==========================================
        Floating
========================================== */

.float {

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

}

@keyframes floating {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-18px);

    }

    100% {

        transform: translateY(0);

    }

}

/* ==========================================
        Heart Beat
========================================== */

.heartbeat {

    animation: heartbeat 1.8s infinite;

}

@keyframes heartbeat {

    0% {

        transform: scale(1);

    }

    25% {

        transform: scale(1.15);

    }

    50% {

        transform: scale(.95);

    }

    75% {

        transform: scale(1.12);

    }

    100% {

        transform: scale(1);

    }

}

/* ==========================================
        Rotate
========================================== */

.rotate {

    animation: rotate360 18s linear infinite;

}

@keyframes rotate360 {

    from {

        transform: rotate(0);

    }

    to {

        transform: rotate(360deg);

    }

}

/* ==========================================
        Glow Button
========================================== */

.btn-main,
.btn-open {

    position: relative;
    overflow: hidden;

}

.btn-main::before,
.btn-open::before {

    content: "";

    position: absolute;

    left: -100%;

    top: 0;

    width: 100%;

    height: 100%;

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

    transform: skewX(-35deg);

}

.btn-main:hover::before,
.btn-open:hover::before {

    animation: shine .8s;

}

@keyframes shine {

    from {

        left: -120%;

    }

    to {

        left: 120%;

    }

}

/* ==========================================
        Glass Hover
========================================== */

.person-card,
.count-box,
.quote-card {

    transition: .45s;

}

.person-card:hover,
.count-box:hover,
.quote-card:hover {

    transform: translateY(-10px);

    box-shadow:

        0 20px 45px rgba(181, 126, 220, .18);

}

/* ==========================================
        Image Hover
========================================== */

.hero-image img,
.person-card img {

    transition: .5s;

}

.hero-image img:hover,
.person-card img:hover {

    transform: scale(1.05);

}

/* ==========================================
        Floating Flower
========================================== */

.flower {

    position: absolute;

    width: 120px;

    pointer-events: none;

    opacity: .4;

    animation: flowerMove 8s ease-in-out infinite;

}

.flower.one {

    left: 2%;
    top: 15%;

}

.flower.two {

    right: 2%;
    bottom: 10%;

}

@keyframes flowerMove {

    0% {

        transform:
            translateY(0) rotate(0);

    }

    50% {

        transform:
            translateY(-30px) rotate(12deg);

    }

    100% {

        transform:
            translateY(0) rotate(0);

    }

}

/* ==========================================
        Floating Bubble
========================================== */

.bubble {

    position: absolute;

    border-radius: 50%;

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

    animation: bubble 10s linear infinite;

}

@keyframes bubble {

    from {

        transform:

            translateY(0) scale(.6);

    }

    to {

        transform:

            translateY(-900px) scale(1.4);

    }

}

/* ==========================================
        Navbar Animation
========================================== */

.navbar {

    animation: navbarDown .8s;

}

@keyframes navbarDown {

    from {

        opacity: 0;

        transform: translateY(-80px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* ==========================================
        Ripple Effect
========================================== */

.ripple {

    position: relative;

    overflow: hidden;

}

.ripple::after {

    content: "";

    position: absolute;

    width: 10px;

    height: 10px;

    border-radius: 50%;

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

    transform: scale(1);

    opacity: 0;

}

.ripple:active::after {

    animation: ripple .7s;

}

@keyframes ripple {

    from {

        transform: scale(1);

        opacity: .8;

    }

    to {

        transform: scale(30);

        opacity: 0;

    }

}

/* ==========================================
        Section Transition
========================================== */

section {

    animation: sectionFade .9s ease;

}

@keyframes sectionFade {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

/* ==========================================
        Pulse Circle
========================================== */

.pulse {

    animation: pulse 2s infinite;

}

@keyframes pulse {

    0% {

        box-shadow: 0 0 0 0 rgba(181, 126, 220, .4);

    }

    70% {

        box-shadow: 0 0 0 18px rgba(181, 126, 220, 0);

    }

    100% {

        box-shadow: 0 0 0 0 rgba(181, 126, 220, 0);

    }

}

/* ==========================================
        Scroll Indicator
========================================== */

.scroll-down {

    animation: scrollDown 1.8s infinite;

}

@keyframes scrollDown {

    0% {

        transform: translateY(0);

        opacity: 1;

    }

    100% {

        transform: translateY(20px);

        opacity: 0;

    }

}

/* ==========================================
        Hero Gradient
========================================== */

.hero-overlay {

    animation: gradientMove 12s linear infinite;

}

@keyframes gradientMove {

    0% {

        background-position: 0 0;

    }

    50% {

        background-position: 100% 100%;

    }

    100% {

        background-position: 0 0;

    }

}

/* ==========================================
        Infinite Sparkle
========================================== */

.sparkle {

    animation: sparkle 2.5s infinite;

}

@keyframes sparkle {

    0% {

        opacity: .2;

        transform: scale(.8);

    }

    50% {

        opacity: 1;

        transform: scale(1.2);

    }

    100% {

        opacity: .2;

        transform: scale(.8);

    }

}