/* ===================================================================
   XV AÑOS | ADRIANA VALERIA
   ANIMATIONS.CSS
=================================================================== */

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

@keyframes gradientMove {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.08);
    }

}

@keyframes scroll {

    0% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(12px);
        opacity: .4;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }

}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-14px);
    }

}

@keyframes pulseGlow {

    0%,
    100% {

        box-shadow:
            0 0 0 rgba(255,215,0,0),
            0 0 30px rgba(255,215,0,.12);

    }

    50% {

        box-shadow:
            0 0 25px rgba(255,215,0,.45),
            0 0 60px rgba(255,215,0,.2);

    }

}

@keyframes shine {

    from {

        transform: translateX(-120%) skewX(-20deg);

    }

    to {

        transform: translateX(220%) skewX(-20deg);

    }

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes fadeLeft {

    from {

        opacity: 0;

        transform: translateX(-60px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

@keyframes fadeRight {

    from {

        opacity: 0;

        transform: translateX(60px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

@keyframes zoomIn {

    from {

        opacity: 0;

        transform: scale(.92);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

@keyframes rotateGlow {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@keyframes backgroundPulse {

    0%,
    100% {

        filter: blur(130px);

        opacity: .22;

    }

    50% {

        filter: blur(170px);

        opacity: .30;

    }

}

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

.hero-left {

    animation: fadeLeft 1s ease both;

}

.hero-right {

    animation: fadeRight 1.2s ease both;

}

.hero-subtitle {

    animation-delay: .2s;

}

.hero-left h1 {

    animation: zoomIn 1.1s ease;

}

.hero-left h2 {

    animation: fadeUp 1.3s ease;

}

.hero-text {

    animation: fadeUp 1.5s ease;

}

.hero-buttons {

    animation: fadeUp 1.8s ease;

}

.portrait {

    animation: float 6s ease-in-out infinite;

}

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

.btn {

    position: relative;

    overflow: hidden;

}

.btn::before {

    content: "";

    position: absolute;

    inset: 0;

    left: -120%;

    width: 50%;

    background: linear-gradient(
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform: skewX(-20deg);

}

.btn:hover::before {

    animation: shine .9s;

}

/* ==========================================================
   CARDS
========================================================== */

.timeline-card,
.dress-card,
.time-box,
.map {

    transition: .45s ease;

}

.timeline-card:hover,
.dress-card:hover,
.time-box:hover,
.map:hover {

    transform: translateY(-10px);

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

}

/* ==========================================================
   DECORATIVE
========================================================== */

.gradient {

    animation:
        gradientMove 18s ease-in-out infinite,
        backgroundPulse 10s ease-in-out infinite;

}

.scroll-indicator span {

    animation: scroll 1.8s infinite;

}

.xv-background {

    animation: pulseGlow 6s ease infinite;

}

/* ==========================================================
   REVEAL ANIMATIONS
========================================================== */

.reveal {

    opacity: 0;

    transform: translateY(60px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.active {

    opacity: 1;

    transform: translateY(0);

}

.reveal-left {

    opacity: 0;

    transform: translateX(-80px);

    transition: all .8s ease;

}

.reveal-left.active {

    opacity: 1;

    transform: translateX(0);

}

.reveal-right {

    opacity: 0;

    transform: translateX(80px);

    transition: all .8s ease;

}

.reveal-right.active {

    opacity: 1;

    transform: translateX(0);

}

.reveal-scale {

    opacity: 0;

    transform: scale(.92);

    transition: all .7s ease;

}

.reveal-scale.active {

    opacity: 1;

    transform: scale(1);

}