/* Title Animation */
.title-word {
    animation: color-animation 4s linear infinite;
}

.title-word-1 {
    --color-1: #2F80ED;
    --color-2: #9B51E0;
    --color-3: #6FCF97;
}

.title-word-2 {
    --color-1: #9B51E0;
    --color-2: #6FCF97;
    --color-3: #2F80ED;
}

.title-word-3 {
    --color-1: #6FCF97;
    --color-2: #2F80ED;
    --color-3: #9B51E0;
}

.title-word-4 {
    --color-1: #2F80ED;
    --color-2: #6FCF97;
    --color-3: #9B51E0;
}

@keyframes color-animation {
    0%    {color: var(--color-1)}
    32%   {color: var(--color-1)}
    33%   {color: var(--color-2)}
    65%   {color: var(--color-2)}
    66%   {color: var(--color-3)}
    99%   {color: var(--color-3)}
    100%  {color: var(--color-1)}
}

/* Floating Animation */
.floating {
    animation: floating 6s ease-in-out infinite;
}

@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}

/* Pulse Animation */
.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(47, 128, 237, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(47, 128, 237, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(47, 128, 237, 0);
    }
}

/* Bounce Animation */
.bounce {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    60% {transform: translateY(-15px);}
}

/* Fade In Animation */
.fade-in {
    animation: fadeIn 1.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Slide In Animations */
.slide-in-left {
    animation: slideInLeft 1s ease-out;
}

@keyframes slideInLeft {
    from { transform: translateX(-100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.slide-in-right {
    animation: slideInRight 1s ease-out;
}

@keyframes slideInRight {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.slide-in-top {
    animation: slideInTop 1s ease-out;
}

@keyframes slideInTop {
    from { transform: translateY(-100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.slide-in-bottom {
    animation: slideInBottom 1s ease-out;
}

@keyframes slideInBottom {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Rotate Animation */
.rotate {
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Wave Animation */
.wave {
    animation: wave 3s ease-in-out infinite;
}

@keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    75% { transform: rotate(-5deg); }
}

/* Gradient Background Animation */
.gradient-bg {
    background: linear-gradient(-45deg, #2F80ED, #9B51E0, #6FCF97, #2F80ED);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Shine Animation */
.shine {
    position: relative;
    overflow: hidden;
}

.shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    opacity: 0;
    transform: rotate(30deg);
    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.13) 0%,
        rgba(255, 255, 255, 0.13) 77%,
        rgba(255, 255, 255, 0.5) 92%,
        rgba(255, 255, 255, 0.0) 100%
    );
}

.shine:hover::after {
    opacity: 1;
    left: 130%;
    transition-property: left, top, opacity;
    transition-duration: 0.7s, 0.7s, 0.15s;
    transition-timing-function: ease;
}