:root {
    --typewriter-speed: 2s; /* Default speed for typewriter effect */
    --cursor-blink-speed: 0.5s; /* Default speed for cursor blink */
    --animation-speed: 1s;
}

/* Fade In */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.fade-in {
    animation: fadeIn var(--animation-speed, 1s) ease-in-out;
}

/* Slide Up */
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.slide-up {
    animation: slideUp var(--animation-speed, 1s) ease-in-out;
}

/* Slide Down */
@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.slide-down {
    animation: slideDown var(--animation-speed, 1s) ease-in-out;
}

/* Slide Left */
@keyframes slideLeft {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.slide-left {
    animation: slideLeft var(--animation-speed, 1s) ease-in-out;
}

/* Slide Right */
@keyframes slideRight {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.slide-right {
    animation: slideRight var(--animation-speed, 1s) ease-in-out;
}

/* Zoom In */
@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.zoom-in {
    animation: zoomIn var(--animation-speed, 1s) ease-in-out;
}

/* Zoom Out */
@keyframes zoomOut {
    from { transform: scale(1.2); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.zoom-out {
    animation: zoomOut var(--animation-speed, 1s) ease-in-out;
}

/* Rotate */
@keyframes rotate {
    from { transform: rotate(-180deg); opacity: 0; }
    to { transform: rotate(0); opacity: 1; }
}
.rotate {
    animation: rotate var(--animation-speed, 1s) ease-in-out;
}

/* Flip */
@keyframes flip {
    from { transform: rotateX(-90deg); opacity: 0; }
    to { transform: rotateX(0); opacity: 1; }
}
.flip {
    animation: flip var(--animation-speed, 1s) ease-in-out;
}

/* Bounce */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-15px); }
    60% { transform: translateY(-7px); }
}
.bounce {
    animation: bounce var(--animation-speed, 1s) ease-in-out;
}

/* Typewriter Effect */
.typewriter {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: none; /* Remove blinking cursor */
    animation: typewriter var(--typewriter-speed, 2s) steps(40, end);
}

/* Text Shadow Pulse */
@keyframes textShadowPulse {
    0% { text-shadow: 0 0 5px #fff, 0 0 10px #fff; }
    50% { text-shadow: 0 0 20px #ff5733, 0 0 30px #ff5733; }
    100% { text-shadow: 0 0 5px #fff, 0 0 10px #fff; }
}
.shadow-pulse {
    animation: textShadowPulse var(--animation-speed, 1s) infinite;
}

/* Skew In */
@keyframes skewIn {
    from { transform: skew(-20deg); opacity: 0; }
    to { transform: skew(0); opacity: 1; }
}
.skew-in {
    animation: skewIn var(--animation-speed, 1s) ease-out;
}

/* Rotate In with Scale */
@keyframes rotateScale {
    from { transform: rotate(-180deg) scale(0.5); opacity: 0; }
    to { transform: rotate(0) scale(1); opacity: 1; }
}
.rotate-scale {
    animation: rotateScale var(--animation-speed, 1s) ease-out;
}

/* Ripple Effect */
@keyframes ripple {
    0% { text-shadow: 0 0 2px #00f, 0 0 4px #00f; }
    50% { text-shadow: 0 0 10px #00f, 0 0 20px #00f; }
    100% { text-shadow: 0 0 2px #00f, 0 0 4px #00f; }
}
.ripple {
    animation: ripple 1.5s infinite;
}

/* Word Slide Effect */
.word-slide span {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: var(--word-slide-speed, 1s);
    animation-delay: calc(var(--delay-factor, 0.3s) * var(--index)); /* Delay based on index */
}

.word-slide[data-direction="bottom-to-top"] span {
    animation-name: slide-up;
}

.word-slide[data-direction="top-to-bottom"] span {
    animation-name: slide-down;
}

.word-slide[data-direction="left-to-right"] span {
    animation-name: slide-left;
}

.word-slide[data-direction="right-to-left"] span {
    animation-name: slide-right;
}

/* Keyframes */
@keyframes slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-down {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-left {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}