.fade-in {
    animation: fadeIn 1s ease-in forwards;
}

.slide-up {
    animation: slideUp 1s ease-out forwards;
}

.slide-down {
    animation: slideDown 1s ease-out forwards;
}

.slide-left {
    animation: slideLeft 1s ease-out forwards;
}

.slide-right {
    animation: slideRight 1s ease-out forwards;
}

.zoom-in {
    animation: zoomIn 1s ease-out forwards;
}

.rotate-in {
    animation: rotateIn 1s ease-out forwards;
}

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

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

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

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

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

@keyframes zoomIn {
    from { 
        opacity: 0;
        transform: scale(0.5);
    }
    to { 
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotateIn {
    from { 
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }
    to { 
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

.text-reveal {
    position: relative;
    overflow: hidden;
}

.text-reveal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dark-color);
    animation: textReveal 1.5s cubic-bezier(0.85, 0, 0.15, 1) forwards;
    transform-origin: left;
}

@keyframes textReveal {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

.hover-grow {
    transition: transform var(--transition-fast);
}

.hover-grow:hover {
    transform: scale(1.05);
}

.hover-float {
    transition: transform var(--transition-medium);
}

.hover-float:hover {
    transform: translateY(-10px);
}

.hover-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    transition: var(--transition-slow);
}

.hover-shine:hover::before {
    left: 150%;
}

.gradient-shift {
    background: linear-gradient(-45deg, #0a0a1a, #1a1a2e, #2a2a3e, #3a3a4e);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

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

.particle {
    position: absolute;
    border-radius: 50%;
    background: var(--primary-color);
    pointer-events: none;
    opacity: 0.7;
    animation: particleFloat 10s linear infinite;
}

@keyframes particleFloat {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.7; }
    50% { opacity: 0.3; }
    100% { transform: translateY(-1000px) rotate(720deg); opacity: 0; }
}

.glitch {
    position: relative;
}

.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.glitch::before {
    color: #0ff;
    z-index: -1;
    animation: glitch-effect 3s infinite;
}

.glitch::after {
    color: #f0f;
    z-index: -2;
    animation: glitch-effect 2s infinite reverse;
}

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