/* MONSTER ANIMATION LIBRARY - CORE */

:root {
    --ma-duration: 0.8s;    /* Varsayılan Süre */
    --ma-distance: 50px;    /* Kayma Mesafesi */
    --ma-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Akıcı Geçiş */
}

/* Başlangıçta elemanları gizle (JS devreye girene kadar) */
[data-anim] {
    opacity: 0;
    will-change: transform, opacity;
}

/* Animasyon Tetiklendiğinde Çalışacak Class */
[data-anim].is-visible {
    opacity: 1;
    animation-duration: var(--ma-duration);
    animation-timing-function: var(--ma-ease);
    animation-fill-mode: both;
}

/* --- 1. FADE ANIMATIONS (Yumuşak Geçişler) --- */
@keyframes maFadeIn { from { opacity: 0; } to { opacity: 1; } }
[data-anim="fade-in"].is-visible { animation-name: maFadeIn; }

@keyframes maFadeInUp { from { opacity: 0; transform: translateY(var(--ma-distance)); } to { opacity: 1; transform: translateY(0); } }
[data-anim="fade-up"].is-visible { animation-name: maFadeInUp; }

@keyframes maFadeInDown { from { opacity: 0; transform: translateY(calc(var(--ma-distance) * -1)); } to { opacity: 1; transform: translateY(0); } }
[data-anim="fade-down"].is-visible { animation-name: maFadeInDown; }

@keyframes maFadeInLeft { from { opacity: 0; transform: translateX(calc(var(--ma-distance) * -1)); } to { opacity: 1; transform: translateX(0); } }
[data-anim="fade-left"].is-visible { animation-name: maFadeInLeft; } /* Senin 'sleft' isteğin */

@keyframes maFadeInRight { from { opacity: 0; transform: translateX(var(--ma-distance)); } to { opacity: 1; transform: translateX(0); } }
[data-anim="fade-right"].is-visible { animation-name: maFadeInRight; }

/* --- 2. ZOOM ANIMATIONS (Büyüme/Küçülme) --- */
@keyframes maZoomIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
[data-anim="zoom-in"].is-visible { animation-name: maZoomIn; }

@keyframes maZoomOut { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: scale(1); } }
[data-anim="zoom-out"].is-visible { animation-name: maZoomOut; }

@keyframes maZoomBounce { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } }
[data-anim="zoom-bounce"].is-visible { animation-name: maZoomBounce; }

/* --- 3. SLIDE ANIMATIONS (Keskin Kaymalar) --- */
@keyframes maSlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
[data-anim="slide-up"].is-visible { animation-name: maSlideUp; }

@keyframes maSlideLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
[data-anim="slide-left"].is-visible { animation-name: maSlideLeft; }

@keyframes maSlideRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
[data-anim="slide-right"].is-visible { animation-name: maSlideRight; }

/* --- 4. FLIP ANIMATIONS (Döndürme) --- */
@keyframes maFlipX { from { transform: perspective(400px) rotateX(90deg); opacity: 0; } to { transform: perspective(400px) rotateX(0deg); opacity: 1; } }
[data-anim="flip-x"].is-visible { animation-name: maFlipX; }

@keyframes maFlipY { from { transform: perspective(400px) rotateY(90deg); opacity: 0; } to { transform: perspective(400px) rotateY(0deg); opacity: 1; } }
[data-anim="flip-y"].is-visible { animation-name: maFlipY; }

/* --- 5. SPECIAL EFFECTS (Butonlar vb. için) --- */
@keyframes maPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
[data-anim="pulse"].is-visible { animation-name: maPulse; }

@keyframes maShake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } }
[data-anim="shake"].is-visible { animation-name: maShake; }

@keyframes maBlurIn { from { opacity: 0; filter: blur(20px); transform: scale(1.2); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
[data-anim="blur-in"].is-visible { animation-name: maBlurIn; }

/* --- 6. UTILITIES (Hız ve Gecikme Ayarları) --- */
/* Delay (Gecikme) Classları - Grid yapıları için sırasıyla gelmesi adına */
.delay-100.is-visible { animation-delay: 0.1s; }
.delay-200.is-visible { animation-delay: 0.2s; }
.delay-300.is-visible { animation-delay: 0.3s; }
.delay-400.is-visible { animation-delay: 0.4s; }
.delay-500.is-visible { animation-delay: 0.5s; }
.delay-1000.is-visible { animation-delay: 1.0s; }

/* Speed (Hız) Classları */
.slow.is-visible { animation-duration: 1.5s; }
.fast.is-visible { animation-duration: 0.4s; }
.super-slow.is-visible { animation-duration: 2.5s; }