/* ========================
   ENTRANCE ANIMATIONS
   ======================== */

/* Fade In */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

.slide-up {
    animation: slideUp 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

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

.slide-left {
    animation: slideLeft 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

/* ========================
   HOVER ANIMATIONS
   ======================== */

/* Pulse (for buttons) */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(108, 92, 231, 0); }
    100% { box-shadow: 0 0 0 0 rgba(108, 92, 231, 0); }
}

.pulse:hover {
    animation: pulse 1.5s infinite;
}

/* Float */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.float {
    transition: transform 0.3s ease;
}
.float:hover {
    animation: float 3s ease-in-out infinite;
}

/* Gradient Border */
.gradient-border {
    position: relative;
}
.gradient-border::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    background: linear-gradient(45deg, 
        var(--primary-color), 
        var(--secondary-color), 
        var(--primary-color));
    background-size: 200% 200%;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.gradient-border:hover::after {
    opacity: 1;
    animation: gradientBG 3s ease infinite;
}

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

/* ========================
   BACKGROUND ANIMATIONS
   ======================== */

/* Moving Particles */
@keyframes moveParticles {
    from { transform: translateY(0) translateX(0); }
    to { transform: translateY(-100px) translateX(100px); }
}

.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    animation: moveParticles 15s linear infinite;
}

/* ========================
   TEXT ANIMATIONS
   ======================== */

/* Typewriter Effect */
@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

.typewriter {
    overflow: hidden;
    white-space: nowrap;
    animation: typewriter 3s steps(40) 1s 1 normal both;
}

/* Text Gradient Animation */
.text-gradient {
    background: linear-gradient(45deg, 
        var(--primary-color), 
        var(--secondary-color), 
        #ffffff);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientText 5s ease infinite;
}

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

/* ========================
   SPECIAL EFFECTS
   ======================== */

/* Glitch Effect */
@keyframes glitch {
    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); }
}

.glitch:hover {
    animation: glitch 0.5s linear infinite;
}

/* Rotate 3D */
@keyframes rotate3D {
    from { transform: rotateY(0); }
    to { transform: rotateY(360deg); }
}

.rotate-3d {
    transform-style: preserve-3d;
    transition: transform 1s;
}
.rotate-3d:hover {
    animation: rotate3D 4s linear infinite;
}

/* ========================
   SCROLL ANIMATIONS
   ======================== */

/* Fade In on Scroll */
.scroll-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-fade.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ========================
   DELAY UTILITIES
   ======================== */

.delay-1 { animation-delay: 0.2s !important; }
.delay-2 { animation-delay: 0.4s !important; }
.delay-3 { animation-delay: 0.6s !important; }
.delay-4 { animation-delay: 0.8s !important; }
.delay-5 { animation-delay: 1s !important; }

/* ========================
   DURATION UTILITIES
   ======================== */

.duration-1 { animation-duration: 0.5s !important; }
.duration-2 { animation-duration: 1s !important; }
.duration-3 { animation-duration: 1.5s !important; }
.duration-4 { animation-duration: 2s !important; }
.duration-5 { animation-duration: 3s !important; }