/* animations.css - Professional Micro-interactions and Transitions */

/* ==========================================
   1. Entrance Animations
   ========================================== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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

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

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

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

/* ==========================================
   2. Hover Animations
   ========================================== */
@keyframes lift {
    to {
        transform: translateY(-5px);
    }
}

@keyframes liftMore {
    to {
        transform: translateY(-8px);
    }
}

@keyframes softShadow {
    to {
        box-shadow: 0 8px 25px rgba(27, 11, 69, 0.1);
    }
}

@keyframes colorShift {
    to {
        color: var(--color-accent-main);
    }
}

/* ==========================================
   3. Icon & Button Animations
   ========================================== */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

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

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    75% {
        transform: translateX(5px);
    }
}

/* ==========================================
   4. Gradient & Color Animations
   ========================================== */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes glowPulse {
    0%, 100% {
        text-shadow: 0 0 20px rgba(123, 97, 255, 0.4);
    }
    50% {
        text-shadow: 0 0 30px rgba(123, 97, 255, 0.8);
    }
}

/* ==========================================
   5. Border & Line Animations
   ========================================== */
@keyframes expandWidth {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes slideBorder {
    from {
        border-bottom: 2px solid transparent;
    }
    to {
        border-bottom: 2px solid var(--color-accent-main);
    }
}

/* ==========================================
   6. Counter Animation
   ========================================== */
@keyframes countUp {
    from {
        content: '0';
    }
}

/* ==========================================
   7. Rotation Animations
   ========================================== */
@keyframes rotateClockwise {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

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

/* ==========================================
   8. Floating Animations
   ========================================== */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
}

@keyframes floatX {
    0%, 100% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(10px);
    }
}

/* ==========================================
   9. Opacity Animations
   ========================================== */
@keyframes fadeInOutLoop {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

@keyframes blinkSlow {
    0%, 49%, 100% {
        opacity: 1;
    }
    50%, 99% {
        opacity: 0;
    }
}

/* ==========================================
   10. Scale Animations
   ========================================== */
@keyframes scaleUp {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.05);
    }
}

@keyframes scaleDown {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(0.95);
    }
}

/* ==========================================
   11. Skew Animations
   ========================================== */
@keyframes skewX {
    0%, 100% {
        transform: skewX(0deg);
    }
    50% {
        transform: skewX(-3deg);
    }
}

/* ==========================================
   12. Background Scroll Animations
   ========================================== */
@keyframes bgScroll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0;
    }
}

/* ==========================================
   13. Dot Animations
   ========================================== */
@keyframes dotPulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

@keyframes dotMove {
    0% {
        transform: translate(0, 0);
    }
    33% {
        transform: translate(0, -10px);
    }
    66% {
        transform: translate(0, 10px);
    }
    100% {
        transform: translate(0, 0);
    }
}

/* ==========================================
   14. Line Draw Animations
   ========================================== */
@keyframes drawLine {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* ==========================================
   15. Utility Animation Classes
   ========================================== */

/* Fade Animations */
.animate-fade-in {
    animation: fadeIn 0.6s ease-out;
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.animate-fade-in-down {
    animation: fadeInDown 0.6s ease-out;
}

.animate-slide-in-left {
    animation: slideInLeft 0.6s ease-out;
}

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

.animate-zoom-in {
    animation: zoomIn 0.6s ease-out;
}

/* Hover Effect Utilities */
.hover-lift {
    transition: all var(--transition-fast);
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.hover-lift-more {
    transition: all var(--transition-fast);
}

.hover-lift-more:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

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

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

.hover-color-shift {
    transition: color var(--transition-fast);
}

.hover-color-shift:hover {
    color: var(--color-accent-main);
}

/* Float Utilities */
.float-animation {
    animation: float 3s ease-in-out infinite;
}

.float-x-animation {
    animation: floatX 3s ease-in-out infinite;
}

/* Pulse Utilities */
.pulse-animation {
    animation: pulse 2s ease-in-out infinite;
}

.glow-pulse {
    animation: glowPulse 2s ease-in-out infinite;
}

/* Spin Utilities */
.spin-animation {
    animation: spin 1s linear infinite;
}

.spin-slow {
    animation: spin 3s linear infinite;
}

/* Bounce Utilities */
.bounce-animation {
    animation: bounce 2s ease-in-out infinite;
}

/* Entrance Delays */
.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
}

.delay-500 {
    animation-delay: 0.5s;
}

/* ==========================================
   16. Smooth Transitions
   ========================================== */

.smooth-transition-all {
    transition: all var(--transition-fast);
}

.smooth-transition-bg {
    transition: background-color var(--transition-fast);
}

.smooth-transition-shadow {
    transition: box-shadow var(--transition-fast);
}

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

/* ==========================================
   17. No Animation (for critical elements)
   ========================================== */
.no-animation {
    animation: none !important;
    transition: none !important;
}