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

.hero-content{

    animation:

        heroFade 2.2s ease forwards;

}

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   BUTTON
========================================================== */

#openInvitation{

    animation:

        buttonFade 3.2s ease forwards;

    opacity:0;

}

@keyframes buttonFade{

    0%{

        opacity:0;

        transform:translateY(25px);

    }

    70%{

        opacity:0;

    }

    100%{

        opacity:1;

        transform:translateY(0);

    }

}

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

.scroll-indicator{

    animation:

        scrollPulse 2.5s ease-in-out infinite;

}

@keyframes scrollPulse{

    0%{

        opacity:.2;

        transform:translate(-50%,0);

    }

    50%{

        opacity:1;

        transform:translate(-50%,8px);

    }

    100%{

        opacity:.2;

        transform:translate(-50%,0);

    }

}

/* ==========================================================
   LANTERNS
========================================================== */

.lantern{

    animation:

        lanternFloat linear infinite;

}

/* Velocidades diferentes */

.l1{

    animation-duration:16s;
    animation-delay:0s;

}

.l2{

    animation-duration:20s;
    animation-delay:2s;

}

.l3{

    animation-duration:18s;
    animation-delay:6s;

}

.l4{

    animation-duration:22s;
    animation-delay:1s;

}

.l5{

    animation-duration:19s;
    animation-delay:4s;

}

.l6{

    animation-duration:23s;
    animation-delay:8s;

}

.l7{

    animation-duration:21s;
    animation-delay:3s;

}

.l8{

    animation-duration:24s;
    animation-delay:10s;

}

@keyframes lanternFloat{

    0%{

        transform:
            translateY(0)
            translateX(0)
            scale(.9);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    50%{

        transform:
            translateY(-55vh)
            translateX(-12px)
            scale(1);

    }

    100%{

        transform:
            translateY(-125vh)
            translateX(18px)
            scale(1.08);

        opacity:0;

    }

}

/* ==========================================================
   TITLE GLOW
========================================================== */

.hero-content h1{

    animation:

        titleGlow 6s ease-in-out infinite;

}

@keyframes titleGlow{

    0%{

        text-shadow:
            0 0 20px rgba(255,255,255,.08),
            0 0 40px rgba(255,209,102,.05);

    }

    50%{

        text-shadow:
            0 0 30px rgba(255,255,255,.28),
            0 0 65px rgba(255,209,102,.28);

    }

    100%{

        text-shadow:
            0 0 20px rgba(255,255,255,.08),
            0 0 40px rgba(255,209,102,.05);

    }

}

/* ==========================================================
   BACKGROUND GLOW
========================================================== */

.background-glow{

    animation:

        glowMove 10s ease-in-out infinite;

}

@keyframes glowMove{

    0%{

        transform:
            translateX(-50%)
            scale(1);

    }

    50%{

        transform:
            translateX(-50%)
            scale(1.12);

    }

    100%{

        transform:
            translateX(-50%)
            scale(1);

    }

}

@keyframes castleFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-4px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes chapterGlow{

    0%{

        opacity:.45;

        transform:scale(.95);

    }

    50%{

        opacity:1;

        transform:scale(1.15);

    }

    100%{

        opacity:.45;

        transform:scale(.95);

    }

}

@keyframes particleFloat{

    from{

        transform:

            translateY(120vh);

        opacity:0;

    }

    20%{

        opacity:.45;

    }

    80%{

        opacity:.45;

    }

    to{

        transform:

            translateY(-20vh);

        opacity:0;

    }

}

@keyframes storyTwinkle{

    0%{

        opacity:.25;

    }

    50%{

        opacity:.55;

    }

    100%{

        opacity:.25;

    }

}

/*==================================================

PHOTO EFFECTS

==================================================*/

.photo-glow{

    animation:photoGlow 5s ease-in-out infinite;

}

.photo-spark{

    animation:sparkFloat 3.5s ease-in-out infinite;

}

.spark-2{

    animation-delay:.8s;

}

.spark-3{

    animation-delay:1.6s;

}

.spark-4{

    animation-delay:2.4s;

}

@keyframes photoGlow{

    0%,100%{

        transform:scale(1);

        opacity:.45;

    }

    50%{

        transform:scale(1.08);

        opacity:.75;

    }

}

@keyframes sparkFloat{

    0%,100%{

        transform:translateY(0) scale(1);

        opacity:.35;

    }

    50%{

        transform:translateY(-10px) scale(1.35);

        opacity:1;

    }

}

@keyframes rsvpFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}