/* ============================================================
   SCroll REVEAL ANIMATIONS
   Her section kaydırılırken animate ile gelir.
   IntersectionObserver JS tarafından .is-visible class ekler.
   ============================================================ */

/* ---- Base: gizli başlangıç durumu ---- */
[data-reveal] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.7s;
    will-change: opacity, transform;
}

[data-reveal="up"] {
    transform: translateY(48px);
}
[data-reveal="down"] {
    transform: translateY(-48px);
}
[data-reveal="left"] {
    transform: translateX(-56px);
}
[data-reveal="right"] {
    transform: translateX(56px);
}
[data-reveal="scale"] {
    transform: scale(0.88);
}
[data-reveal="fade"] {
    transform: none;
}

/* ---- Gecikme sınıfları ---- */
[data-delay="100"] { transition-delay: 0.10s; }
[data-delay="200"] { transition-delay: 0.20s; }
[data-delay="300"] { transition-delay: 0.30s; }
[data-delay="400"] { transition-delay: 0.40s; }
[data-delay="500"] { transition-delay: 0.50s; }
[data-delay="600"] { transition-delay: 0.60s; }

/* ---- Görünür durum — JS .is-visible ekler ---- */
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* ---- toi-kruvasan.css'de tanımlı özel reveal'ler de burada tetiklenir ---- */
[data-reveal="tk-left"],
[data-reveal="tk-right"],
[data-reveal="tk-up"] {
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.75s;
}
[data-delay="100"][data-reveal^="tk"] { transition-delay: 0.10s; }
[data-delay="200"][data-reveal^="tk"] { transition-delay: 0.20s; }
[data-delay="300"][data-reveal^="tk"] { transition-delay: 0.30s; }

/* ---- Prefers reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}