/*
IMPORTANT --------------------------------
will animate all the elements which contains .hidden class
----------------------------------------------------*/
.hidden {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-100%);
    transition: all 400ms;
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0%);
}

/* 
ANIMATE CARDS WITH PICTURES OR TEXTS OR SECTION LIKE THIS
FORMAT ----

<div class="cards-animate">
    <div class="card-animate hidden">
        <img src="../assets/handpicked/TT29DEC62775_400x.jpg" alt="">
    </div>
    <div class="card-animate hidden">
        <img src="../assets/handpicked/TT29DEC62775_400x.jpg" alt="">
    </div>
    <div class="card-animate hidden">
        <img src="../assets/handpicked/TT29DEC62775_400x.jpg" alt="">
    </div>
    <div class="card-animate hidden">
        <img src="../assets/handpicked/TT29DEC62775_400x.jpg" alt="">
    </div>
</div> */
/* .cards-animate {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow: hidden; */
/* overflow-x: scroll; */
/* gap: 1rem;
} */

.card-animate:nth-child(1) {
    transition-delay: 400ms;
}

.card-animate:nth-child(2) {
    transition-delay: 450ms;
}

.card-animate:nth-child(3) {
    transition-delay: 530ms;
}

.card-animate:nth-child(4) {
    transition-delay: 600ms;
}


/* ----------------- */
/* defining the transition delay for each text element which varies from first to last
FORMAT CODE--------------------------------------
<div class="texts">
    <div class="text-animate hidden">
        <span class="letter hidden">S</span>
        <span class="letter hidden">a</span>
        <span class="letter hidden">r</span>
        <span class="letter hidden">e</span>
        <span class="letter hidden">e</span>
    </div>
    <div class="text-animate hidden">
        <span class="letter hidden">L</span>
        <span class="letter hidden">e</span>
        <span class="letter hidden">h</span>
        <span class="letter hidden">a</span>
        <span class="letter hidden">n</span>
        <span class="letter hidden">g</span>
        <span class="letter hidden">a</span>
    </div>
    <div class="text-animate hidden">
    <span class="letter hidden">B</span>
        <span class="letter hidden">a</span>
        <span class="letter hidden">l</span>
        <span class="letter hidden">u</span>
        <span class="letter hidden">c</span>
        <span class="letter hidden">h</span>
        <span class="letter hidden">u</span>
        <span class="letter hidden">r</span>
        <span class="letter hidden">i</span>
    </div>
    <div class="text-animate hidden">
    <span class="letter hidden">C</span>
        <span class="letter hidden">o</span>
        <span class="letter hidden">n</span>
        <span class="letter hidden">t</span>
        <span class="letter hidden">e</span>
        <span class="letter hidden">m</span>
        <span class="letter hidden">p</span>
        <span class="letter hidden">o</span>
        <span class="letter hidden">r</span>
        <span class="letter hidden">a</span>
        <span class="letter hidden">r</span>
        <span class="letter hidden">y</span>
    </div>
    <div class="text-animate hidden">
    <span class="letter hidden">D</span>
        <span class="letter hidden">r</span>
        <span class="letter hidden">e</span>
        <span class="letter hidden">s</span>
        <span class="letter hidden">s</span>
    </div>
</div>
*/

.text-animate:nth-child(1) {
    transition-delay: 50ms;
}

.text-animate:nth-child(2) {
    transition-delay: 100ms;
}

.text-animate:nth-child(3) {
    transition-delay: 150ms;
}

.text-animate:nth-child(4) {
    transition-delay: 175ms;
}

.text-animate:nth-child(5) {
    transition-delay: 200ms;
}

.text-animate:nth-child(6) {
    transition-delay: 225ms;
}

.text-animate:nth-child(7) {
    transition-delay: 250ms;
}

.text-animate:nth-child(8) {
    transition-delay: 275ms;
}

/* animating each letter, just overwritting the "hidden", "show" classes if with "letter" class */

.letter {
    overflow: hidden;
    transition: all 400ms;
    font-family: inherit;
    font-size: inherit;
}

.letter.hidden {
    filter: none;
    transition: all 400ms;
    position: relative;
    top: 8rem;
    opacity: 0;
}

.letter.show {
    top: 0;
    opacity: 1;
}

.letter:nth-child(1) {
    transition-delay: 50ms;
}

.letter:nth-child(2) {
    transition-delay: 75ms;
}

.letter:nth-child(3) {
    transition-delay: 100ms;
}

.letter:nth-child(4) {
    transition-delay: 125ms;
}

.letter:nth-child(5) {
    transition-delay: 150ms;
}

.letter:nth-child(6) {
    transition-delay: 175ms;
}

.letter:nth-child(7) {
    transition-delay: 200ms;
}

.letter:nth-child(8) {
    transition-delay: 225ms;
}

.letter:nth-child(9) {
    transition-delay: 250ms;
}

.letter:nth-child(10) {
    transition-delay: 275ms;
}

.letter:nth-child(11) {
    transition-delay: 300ms;
}

.letter:nth-child(12) {
    transition-delay: 325ms;
}

.letter:nth-child(13) {
    transition-delay: 350ms;
}

.letter:nth-child(14) {
    transition-delay: 375ms;
}

.letter:nth-child(15) {
    transition-delay: 400ms;
}

.letter:nth-child(16) {
    transition-delay: 425ms;
}

.letter:nth-child(17) {
    transition-delay: 450ms;
}

.letter:nth-child(18) {
    transition-delay: 475ms;
}

.letter:nth-child(19) {
    transition-delay: 500ms;
}

@media screen and (max-width: 600px) {
    .letter.hidden {
        top: 50%;
    }
}


@media screen and (max-width: 600px) {
    .letter.hidden {
        top: 20%;
    }
}