/* assets/css/text-effects.css */

.text-effect {
    display: inline-block;
    perspective: 1000px;
}

.animated-letter {
    display: inline-block;
    position: relative;
    transition: transform 0.6s;
    transform-origin: center;
    perspective: 1000px;
    letter-spacing: normal;
    margin: 0;
    padding: 0;
    width: auto;
    vertical-align: baseline;
}

/* Basic animations with .te- prefix */
.te-spin {
    transform: rotateY(90deg);
}

.te-flip {
    transform: rotateX(180deg);
}

.te-fade {
    opacity: 0;
    transform: scale(0.8);
}

.te-morph {
    transform: scale(0.1) rotate(90deg);
    opacity: 0.3;
}

.te-bounce {
    transform: translateY(-100%) scale(0.8);
}

.te-elastic {
    transform: scaleX(2) scaleY(0.5);
}

.te-slide {
    transform: translateX(50%) skewX(30deg);
    opacity: 0.7;
}

.te-twist {
    transform: rotate(180deg) scale(0.5);
}

.te-wave {
    transform: translateY(30%) rotate(-10deg) scaleY(1.5);
}

.te-blast {
    transform: scale(2);
    opacity: 0;
}

.te-fold {
    transform: perspective(400px) rotateY(90deg) scale(0.8);
}

/* Keyframe animations */
@keyframes te-wobble {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg) scale(1.1); }
    75% { transform: rotate(10deg) scale(0.9); }
    100% { transform: rotate(0deg); }
}

.te-wobble {
    animation: te-wobble 0.6s ease-in-out;
}

@keyframes te-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.te-shake {
    animation: te-shake 0.6s ease-in-out;
}

@keyframes te-glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
    100% { transform: translate(0); }
}

.te-glitch {
    animation: te-glitch 0.6s ease-in-out;
}

/* 3D effects */
.te-flip-3d {
    transform: perspective(400px) rotateY(180deg);
    backface-visibility: hidden;
}

.te-cube {
    transform: perspective(400px) rotateX(90deg) rotateY(90deg);
}