/**
 * Animations & Transitions
 *
 * @package NEWTIV
 * @since 1.0.0
 */

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

.fade-in {
    animation: fadeIn 0.6s ease-in-out;
}

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

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

/* ============================================
   Slide Down Animation
   ============================================ */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ============================================
   Fade In Left
   ============================================ */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-left {
    animation: fadeInLeft 0.6s ease-out;
}

/* ============================================
   Fade In Right
   ============================================ */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-right {
    animation: fadeInRight 0.6s ease-out;
}

/* ============================================
   Scale In
   ============================================ */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.scale-in {
    animation: scaleIn 0.4s ease-out;
}

/* ============================================
   Rotate In
   ============================================ */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-10deg);
    }
    to {
        opacity: 1;
        transform: rotate(0);
    }
}

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

/* ============================================
   Animate on Scroll
   ============================================ */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
}

.animate-on-scroll.fade-up {
    transform: translateY(30px);
}

.animate-on-scroll.fade-up.animated {
    transform: translateY(0);
}

.animate-on-scroll.fade-down {
    transform: translateY(-30px);
}

.animate-on-scroll.fade-down.animated {
    transform: translateY(0);
}

.animate-on-scroll.fade-left {
    transform: translateX(-30px);
}

.animate-on-scroll.fade-left.animated {
    transform: translateX(0);
}

.animate-on-scroll.fade-right {
    transform: translateX(30px);
}

.animate-on-scroll.fade-right.animated {
    transform: translateX(0);
}

.animate-on-scroll.scale {
    transform: scale(0.9);
}

.animate-on-scroll.scale.animated {
    transform: scale(1);
}

/* ============================================
   Hover Effects
   ============================================ */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.hover-scale {
    transition: transform 0.3s ease;
}

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

.hover-rotate {
    transition: transform 0.3s ease;
}

.hover-rotate:hover {
    transform: rotate(5deg);
}

/* ============================================
   Loading Spinner
   ============================================ */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s linear infinite;
}

/* ============================================
   Pulse Animation
   ============================================ */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

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

/* ============================================
   Shake Animation
   ============================================ */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

/* ============================================
   Bounce Animation
   ============================================ */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.bounce {
    animation: bounce 1s ease-in-out;
}

/* ============================================
   Smooth Transitions
   ============================================ */
* {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

a, button {
    transition: all 0.2s ease;
}

img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}