/* ===== Customizable Variables ===== */
:root {
    /* Animation Durations */
    --fade-duration: 225ms;
    --slide-duration: 300ms;
    --hover-duration: 200ms;
    --rotate-duration: 300ms;
    --bounce-duration: 1s;
    --pulse-duration: 2s;
    --shake-duration: 800ms;
    
    /* Animation Timing Functions */
    --ease-out: ease-out;
    --ease-in-out: ease-in-out;
    --ease: ease;
    
    /* Transform Values */
    --scale-start: 0.95;
    --scale-hover: 1.1;
    --slide-distance: 10px;
    --bounce-height: 20px;
    --rotate-degree: 360deg;
    
    /* Effect Values */
    --glow-radius: 15px;
    --blur-amount: 2px;
    --text-shadow-blur: 4px;
    --text-shadow-offset: 2px;
}

/* ===== Pure CSS Animations and Effects ===== */

/* 1. Fade-in Scale Animation */
@keyframes fade-scale {
    0% {
        opacity: 0;
        transform: scale(var(--scale-start));
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.fade-scale {
    animation: fade-scale var(--fade-duration) var(--ease-out) forwards;
}

/* 2. Slide-up Fade Animation */
@keyframes slide-fade-up {
    0% {
        opacity: 0;
        transform: translateY(var(--slide-distance));
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-fade-up {
    animation: slide-fade-up var(--slide-duration) var(--ease-in-out) forwards;
}

/* 3. Feature Card Hover Effect */
.hover-slide {
    transition: transform var(--hover-duration) var(--ease);
}

.hover-slide:hover {
    transform: translateX(var(--slide-distance));
}

/* 4. Social Icons Hover Effect */
.hover-bg {
    transition: background-color var(--hover-duration) var(--ease);
}

.hover-bg:hover {
    background-color: var(--accent-color, #007bff);
}

/* 5. Smooth Color Transition */
.hover-color {
    transition: color var(--hover-duration) var(--ease);
}

.hover-color:hover {
    color: var(--body-color, #333);
}

/* 6. Pulse Animation */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(var(--scale-hover));
    }
    100% {
        transform: scale(1);
    }
}

.pulse {
    animation: pulse var(--pulse-duration) var(--ease-in-out) infinite;
}

/* 7. Shake Animation */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(calc(var(--slide-distance) * -0.5));
    }
    20%, 40%, 60%, 80% {
        transform: translateX(calc(var(--slide-distance) * 0.5));
    }
}

.shake {
    animation: shake var(--shake-duration) var(--ease-in-out);
}

/* 8. Glow Effect */
.hover-glow {
    transition: box-shadow var(--hover-duration) var(--ease);
}

.hover-glow:hover {
    box-shadow: 0 0 var(--glow-radius) var(--accent-color, rgba(0, 123, 255, 0.5));
}

/* 9. Rotate on Hover */
.hover-rotate {
    transition: transform var(--rotate-duration) var(--ease);
}

.hover-rotate:hover {
    transform: rotate(var(--rotate-degree));
}

/* 10. Bounce Animation */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(calc(var(--bounce-height) * -1));
    }
}

.bounce {
    animation: bounce var(--bounce-duration) var(--ease) infinite;
}

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

.fade-in {
    animation: fadeIn var(--fade-duration) var(--ease) forwards;
}

/* 12. Slide From Left */
@keyframes slideFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-left {
    animation: slideFromLeft var(--slide-duration) var(--ease) forwards;
}

/* 13. Scale on Hover */
.hover-scale {
    transition: transform var(--hover-duration) var(--ease);
}

.hover-scale:hover {
    transform: scale(var(--scale-hover));
}

/* 14. Blur on Hover */
.hover-blur {
    transition: filter var(--hover-duration) var(--ease);
}

.hover-blur:hover {
    filter: blur(var(--blur-amount));
}

/* 15. Text Shadow on Hover */
.hover-text-shadow {
    transition: text-shadow var(--hover-duration) var(--ease);
}

.hover-text-shadow:hover {
    text-shadow: var(--text-shadow-offset) var(--text-shadow-offset) var(--text-shadow-blur) rgba(0, 0, 0, 0.3);
}

/* Accessibility - Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    :root {
        --fade-duration: 0s;
        --slide-duration: 0s;
        --hover-duration: 0s;
        --rotate-duration: 0s;
        --bounce-duration: 0s;
        --pulse-duration: 0s;
        --shake-duration: 0s;
    }
    
    .bounce,
    .pulse {
        animation: none;
    }
}

/* Usage Examples:
   <div class="fade-scale">Content fades in and scales up</div>
   <div class="slide-fade-up">Content slides up and fades in</div>
   <div class="hover-slide">Content slides right on hover</div>
   <div class="hover-bg">Background changes on hover</div>
   <div class="hover-color">Color changes on hover</div>
*/