/* Base styles */
.letter {
    display: inline-block;
}


.fade-letter {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.fade-letter.active {
    opacity: 1;
}

.scale-letter {
    transform: scale(0);
    transition: transform 0.5s ease-in-out;
}
.scale-letter.active {
    transform: scale(1);
}

/* Mobile styles */
@media screen and (max-width: 768px) {
    .desktop-text {
        display: none;
    }
    
    .mobile-text {
        display: block;
        text-align: left;
        padding: 100px;
    }

    .mobile-text .letter {
        font-size: 30px;
        line-height: 1.5;
    }

    .mobile-text .cursor {
        font-size: 30px;
        bottom: -8px;
    }
}


/*
  |--------------------------------------------------------------------------
  | Horizontal Flip

.letter {
    display: inline-block;
}

.flip-letter {
    display: inline-block;
    transform-style: preserve-3d;
    perspective: 1000px;
    margin: 0 2px;
}

.flip-letter.animate {
    animation: horizontalFlip 0.6s ease forwards;
}

@keyframes horizontalFlip {
    0% { transform: rotateY(0deg); }
    50% { transform: rotateY(90deg); }
    100% { transform: rotateY(0deg); }
}

*/