/*
 * Zendoor — animasyonlar.css
 * Tema-özgü motion presetleri. Endüstriyel dil: kontrollü, sade, geometrik.
 */

/* === MARKA AKIŞI (Altın metalik parıltı) === */
@keyframes tema-marka-akis-zendoor {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

:root[data-tema-id="zendoor"] .marka-parilti {
    background: var(--tema-metal-gradyan);
    background-size: 200% 200%;
    animation: tema-marka-akis-zendoor 3s ease infinite;
}

/* === SCROLL REVEAL (Intersection Observer) === */
@keyframes tema-reveal-yukari {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tema-reveal-sol {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes tema-reveal-sag {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes tema-reveal-olcek {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

:root[data-tema-id="zendoor"] .reveal-yukari {
    animation: tema-reveal-yukari 0.6s var(--tema-bezier-yumusak) both;
}

:root[data-tema-id="zendoor"] .reveal-sol {
    animation: tema-reveal-sol 0.6s var(--tema-bezier-yumusak) both;
}

:root[data-tema-id="zendoor"] .reveal-sag {
    animation: tema-reveal-sag 0.6s var(--tema-bezier-yumusak) both;
}

:root[data-tema-id="zendoor"] .reveal-olcek {
    animation: tema-reveal-olcek 0.6s var(--tema-bezier-yumusak) both;
}

/* Kademeli giriş (staggered) */
:root[data-tema-id="zendoor"] .reveal-kademe > *:nth-child(1) { animation-delay: 0ms; }
:root[data-tema-id="zendoor"] .reveal-kademe > *:nth-child(2) { animation-delay: 80ms; }
:root[data-tema-id="zendoor"] .reveal-kademe > *:nth-child(3) { animation-delay: 160ms; }
:root[data-tema-id="zendoor"] .reveal-kademe > *:nth-child(4) { animation-delay: 240ms; }
:root[data-tema-id="zendoor"] .reveal-kademe > *:nth-child(5) { animation-delay: 320ms; }
:root[data-tema-id="zendoor"] .reveal-kademe > *:nth-child(6) { animation-delay: 400ms; }

/* === ALTIN ÇİZGİ ANİMASYONU (Katalog bölüm ayırıcı) === */
@keyframes tema-cizgi-acil {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 64px;
        opacity: 1;
    }
}

:root[data-tema-id="zendoor"] .ayirici-altin-anim {
    animation: tema-cizgi-acil 0.8s var(--tema-bezier-yumusak) both;
}

/* === METAL PARILTISI (Hover — kart üstü) === */
@keyframes tema-metal-parilti {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

:root[data-tema-id="zendoor"] .metal-parilti-hover {
    position: relative;
    overflow: hidden;
}

:root[data-tema-id="zendoor"] .metal-parilti-hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(224, 200, 112, 0.15),
        transparent
    );
    transition: left 0.6s ease;
    pointer-events: none;
}

:root[data-tema-id="zendoor"] .metal-parilti-hover:hover::after {
    left: 100%;
}

/* === SAYAÇ (Rakam animasyonu — katalog istatistikleri) === */
@keyframes tema-sayac-dol {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

:root[data-tema-id="zendoor"] .sayac-anim {
    animation: tema-sayac-dol 0.8s var(--tema-bezier-yumusak) both;
}

/* === HERO GRADYAN AKIŞI === */
@keyframes tema-gradyan-akis {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

:root[data-tema-id="zendoor"] .hero-gradyan-akis {
    background-size: 200% 200%;
    animation: tema-gradyan-akis 12s ease infinite;
}

/* === GEÇİŞ PRESETLERİ === */
:root[data-tema-id="zendoor"] .gecis-tum {
    transition: opacity var(--tema-gecis-normal),
                transform var(--tema-gecis-normal),
                background-color var(--tema-gecis-normal),
                border-color var(--tema-gecis-normal),
                box-shadow var(--tema-gecis-normal),
                color var(--tema-gecis-normal);
}

:root[data-tema-id="zendoor"] .gecis-fade {
    transition: opacity var(--tema-gecis-normal);
}

:root[data-tema-id="zendoor"] .gecis-transform {
    transition: transform var(--tema-gecis-yavas);
}

:root[data-tema-id="zendoor"] .gecis-renk {
    transition: background-color var(--tema-gecis-hizli),
                color var(--tema-gecis-hizli),
                border-color var(--tema-gecis-hizli);
}

/* === YUMUŞAK KAYDIRMA GÖSTERGESİ === */
@keyframes tema-kaydir-gosterge {
    0%, 100% {
        opacity: 0.4;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(8px);
    }
}

:root[data-tema-id="zendoor"] .kaydir-gosterge {
    animation: tema-kaydir-gosterge 2s ease-in-out infinite;
}

/* === PREFERS-REDUCED-MOTION === */
@media (prefers-reduced-motion: reduce) {
    :root[data-tema-id="zendoor"] .marka-parilti,
    :root[data-tema-id="zendoor"] .hero-gradyan-akis,
    :root[data-tema-id="zendoor"] .kaydir-gosterge {
        animation: none;
    }

    :root[data-tema-id="zendoor"] .reveal-yukari,
    :root[data-tema-id="zendoor"] .reveal-sol,
    :root[data-tema-id="zendoor"] .reveal-sag,
    :root[data-tema-id="zendoor"] .reveal-olcek,
    :root[data-tema-id="zendoor"] .sayac-anim,
    :root[data-tema-id="zendoor"] .ayirici-altin-anim {
        animation: none;
        opacity: 1;
        transform: none;
    }

    :root[data-tema-id="zendoor"] .gecis-tum,
    :root[data-tema-id="zendoor"] .gecis-fade,
    :root[data-tema-id="zendoor"] .gecis-transform,
    :root[data-tema-id="zendoor"] .gecis-renk {
        transition: none;
    }
}