/* =========================================================
   TMV2 - 09 ANIMATIONS.CSS
   ---------------------------------------------------------
   TR:
   Bu dosya modern animasyon ve efektleri içerir.
   Fade, slide, zoom, hover efektleri ve sayfa geçişleri burada tanımlanır.

   EN:
   This file contains modern animations and effects.
   Fade, slide, zoom, hover effects and page transitions are defined here.

   KURAL / RULE:
   - Sadece animasyon ve efekt yazılır
   - Component yazılmaz
========================================================= */


/* =========================================================
   FADE
========================================================= */

.tmv2-fade-in {
    animation: tmv2FadeIn .5s ease forwards;
}

.tmv2-fade-up {
    animation: tmv2FadeUp .6s ease forwards;
}

@keyframes tmv2FadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes tmv2FadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   SLIDE
========================================================= */

.tmv2-slide-left {
    animation: tmv2SlideLeft .5s ease forwards;
}

.tmv2-slide-right {
    animation: tmv2SlideRight .5s ease forwards;
}

@keyframes tmv2SlideLeft {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes tmv2SlideRight {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* =========================================================
   ZOOM
========================================================= */

.tmv2-zoom-in {
    animation: tmv2ZoomIn .4s ease forwards;
}

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

@keyframes tmv2ZoomIn {
    from {
        opacity: 0;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* =========================================================
   HOVER EFFECTS
========================================================= */

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

    .tmv2-hover-up:hover {
        transform: translateY(-4px);
    }

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

    .tmv2-hover-scale:hover {
        transform: scale(1.06);
    }

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

    .tmv2-hover-shadow:hover {
        box-shadow: var(--tmv2-shadow-lg);
    }


/* =========================================================
   BUTTON EFFECT
========================================================= */

.tmv2-btn-press:active {
    transform: scale(.96);
}


/* =========================================================
   LOADER
========================================================= */

.tmv2-spin {
    animation: tmv2Spin .8s linear infinite;
}

@keyframes tmv2Spin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   SKELETON ANIMATION
========================================================= */

.tmv2-skeleton-anim::after {
    animation: tmv2Skeleton 1.2s infinite;
}

@keyframes tmv2Skeleton {
    100% {
        transform: translateX(100%);
    }
}


/* =========================================================
   PAGE TRANSITION
========================================================= */

.tmv2-page-enter {
    opacity: 0;
    transform: translateY(20px);
    animation: tmv2PageEnter .5s ease forwards;
}

@keyframes tmv2PageEnter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

.tmv2-delay-1 {
    animation-delay: .1s;
}

.tmv2-delay-2 {
    animation-delay: .2s;
}

.tmv2-delay-3 {
    animation-delay: .3s;
}

.tmv2-delay-4 {
    animation-delay: .4s;
}

.tmv2-delay-5 {
    animation-delay: .5s;
}