/* =====================================
   GLOBAL REVEAL SYSTEM
===================================== */


.reveal{

    opacity:0;

    transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.22,1,.36,1);

}



/* entrada por baixo */

.reveal-up{

    transform:translateY(70px);

}



/* entrada esquerda */

.reveal-left{

    transform:translateX(-80px);

}



/* entrada direita */

.reveal-right{

    transform:translateX(80px);

}



/* zoom */

.reveal-zoom{

    transform:scale(.85);

}





/* estado visível */


.reveal.show{

    opacity:1;

    transform:none;

}



/* =====================================
   DELAYS
===================================== */


.delay-1{

    transition-delay:.15s;

}


.delay-2{

    transition-delay:.3s;

}


.delay-3{

    transition-delay:.45s;

}


.delay-4{

    transition-delay:.6s;

}




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


.hero{

    animation:
    heroZoom 20s ease-in-out infinite alternate;

}



@keyframes heroZoom{


    from{

        background-size:100%;

    }


    to{

        background-size:108%;

    }

}



/* =====================================
   BOTÃO
===================================== */


.view-btn{

    animation:
    pulseButton 2.5s infinite;

}



@keyframes pulseButton{


    0%,
    100%{

        box-shadow:
        0 20px 50px rgba(0,0,0,.25);

    }


    50%{

        box-shadow:
        0 25px 70px rgba(231,201,139,.45);

    }

}




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


.scroll-indicator{


    animation:
    floatingArrow 2s infinite;


}


@keyframes floatingArrow{


    0%,
    100%{

        transform:
        translate(-50%,0);

    }


    50%{

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

    }

}



/* =====================================
   CARD HOVER SUAVE
===================================== */


.verse-card,
.person-card{


    transition:

    transform .4s ease,
    box-shadow .4s ease;


}



.verse-card:hover,
.person-card:hover{


    transform:
    translateY(-8px);


}

/*=====================================
    MEMORY SECTION
======================================*/

.memory-photo-wrapper{

    opacity:0;

    transform:
        translateY(60px)
        rotateX(12deg)
        scale(.92);

    filter:
        blur(10px);

    transition:

        opacity .7s ease,

        transform .9s cubic-bezier(.22,1,.36,1),

        filter .8s ease;

}


.memory-content{

    opacity:0;

    transform:translateY(35px);

    transition:

        opacity .6s ease,

        transform .8s ease;

}


.memory-section.show .memory-photo-wrapper{

    opacity:1;

    transform:

        translateY(0)

        rotateX(0)

        scale(1);

    filter:blur(0);

}


.memory-section.show .memory-content{

    opacity:1;

    transform:translateY(0);

    transition-delay:.25s;

}

@keyframes memoryFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

.memory-section.show .memory-photo-wrapper{

    animation:

        memoryFloat 6s ease-in-out infinite;

}

/*=====================================
    LOVE COUNTDOWN
======================================*/

/* Zoom cinematográfico */

.love-slide.active{

    animation:

        loveFade 8s linear,

        loveZoom 8s ease-in-out forwards;

}

/* Badge */

.love-badge.show{

    animation:badgeFloat .8s ease both;

}

/* Cartão */

.love-countdown-card.show{

    animation:cardRise .9s cubic-bezier(.2,.8,.2,1) both;

}

/* Contadores */

.love-counter.show{

    animation:counterPop .7s ease both;

}

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

@keyframes loveFade{

    from{

        opacity:0;

    }

    15%{

        opacity:1;

    }

    85%{

        opacity:1;

    }

    to{

        opacity:0;

    }

}

@keyframes loveZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.10);

    }

}

@keyframes badgeFloat{

    from{

        opacity:0;

        transform:translateY(-18px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes cardRise{

    from{

        opacity:0;

        transform:

            translateY(45px)

            scale(.95);

    }

    to{

        opacity:1;

        transform:none;

    }

}

@keyframes counterPop{

    from{

        opacity:0;

        transform:

            scale(.8)

            translateY(20px);

    }

    to{

        opacity:1;

        transform:none;

    }

}