/* MONSTER ANIMATION LIBRARY - CORE */
:root {
    --ma-duration: 0.8s;
    --ma-distance: 50px;
    --ma-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Başlangıç Durumu */
[data-anim] {
    opacity: 0;
    will-change: transform, opacity, clip-path;
}

/* Tetiklendiğinde */
[data-anim].is-visible {
    opacity: 1 !important;
    animation-duration: var(--ma-duration);
    animation-timing-function: var(--ma-ease);
    animation-fill-mode: both;
}

/* --- 1. FADE ANIMATIONS --- */
@keyframes maFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes maFadeInUp { from { opacity: 0; transform: translateY(var(--ma-distance)); } to { opacity: 1; transform: translateY(0); } }
@keyframes maFadeInDown { from { opacity: 0; transform: translateY(calc(var(--ma-distance) * -1)); } to { opacity: 1; transform: translateY(0); } }
@keyframes maFadeInLeft { from { opacity: 0; transform: translateX(calc(var(--ma-distance) * -1)); } to { opacity: 1; transform: translateX(0); } }
@keyframes maFadeInRight { from { opacity: 0; transform: translateX(var(--ma-distance)); } to { opacity: 1; transform: translateX(0); } }

[data-anim="fade-in"].is-visible { animation-name: maFadeIn; }
[data-anim="fade-up"].is-visible { animation-name: maFadeInUp; }
[data-anim="fade-down"].is-visible { animation-name: maFadeInDown; }
[data-anim="fade-left"].is-visible { animation-name: maFadeInLeft; }
[data-anim="fade-right"].is-visible { animation-name: maFadeInRight; }

/* --- 2. REVEAL ANIMATIONS (Açılarak Gelme) --- */
@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; }
[data-anim="reveal-down"].is-visible { animation-name: revealDown; }
[data-anim="reveal-left"].is-visible { animation-name: revealLeft; }
[data-anim="reveal-right"].is-visible { animation-name: revealRight; }

/* --- 3. TEXT WORD ANIMATIONS (Kelimeler) --- */
@keyframes wordUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes wordDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes wordFade { from { opacity: 0; } to { opacity: 1; } }

.is-visible .ma-word-inner {
    animation-duration: 1.1s;
    animation-fill-mode: both;
    animation-timing-function: var(--ma-ease);
}
[data-anim="text-up"].is-visible .ma-word-inner { animation-name: wordUp; }
[data-anim="text-down"].is-visible .ma-word-inner { animation-name: wordDown; }
[data-anim="text-fade"].is-visible .ma-word-inner { animation-name: wordFade; }

/* --- 4. ZOOM & SLIDE & SPECIAL --- */
@keyframes maZoomIn { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
@keyframes maZoomBounce { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes maSlideLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

[data-anim="zoom-in"].is-visible { animation-name: maZoomIn; }
[data-anim="zoom-bounce"].is-visible { animation-name: maZoomBounce; }
[data-anim="slide-left"].is-visible { animation-name: maSlideLeft; }

/* --- 5. UTILITIES --- */
.slow.is-visible { animation-duration: 1.5s; }
.fast.is-visible { animation-duration: 0.4s; }
.delay-200.is-visible { animation-delay: 0.2s; }