/* 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;
}

/* --- 7. REVEAL ANIMATIONS (Maske ile Açılma) --- */
@keyframes revealUp {
    from {
        clip-path: inset(100% 0 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes revealDown {
    from {
        clip-path: inset(0 0 100% 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes revealLeft {
    from {
        clip-path: inset(0 0 0 100%);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes revealRight {
    from {
        clip-path: inset(0 100% 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

[data-anim="reveal-up"].is-visible {
    animation-name: revealUp;
    opacity: 1;
}

[data-anim="reveal-down"].is-visible {
    animation-name: revealDown;
    opacity: 1;
}

[data-anim="reveal-left"].is-visible {
    animation-name: revealLeft;
    opacity: 1;
}

[data-anim="reveal-right"].is-visible {
    animation-name: revealRight;
    opacity: 1;
}

/* Word Wrapper */
.ma-word {
    display: inline-block;
    overflow: hidden;
    /* Kelimenin kendi içinde açılması için */
    vertical-align: top;
}

.ma-word-inner {
    display: inline-block;
    opacity: 0;
    will-change: transform, opacity;
}

/* Kelime Animasyon Tetikleyici */
.is-visible .ma-word-inner {
    opacity: 1;
    animation-duration: var(--ma-duration);
    animation-fill-mode: both;
    animation-timing-function: var(--ma-ease);
}

/* Kelime Yönleri */
@keyframes wordUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes wordDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes wordFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

[data-anim^="text-up"] .ma-word-inner {
    animation-name: wordUp;
}

[data-anim^="text-down"] .ma-word-inner {
    animation-name: wordDown;
}

[data-anim^="text-fade"] .ma-word-inner {
    animation-name: wordFade;
}

/* --- 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;
}