/*
 * CmsProject — Hazır animasyonlar (tema-bağımsız)
 * ------------------------------------------------------------------------
 * Kullanım: öğeye  data-cms-anim="fade-up"  data-cms-anim-delay="200"  ekle.
 * cms-anim.js, IntersectionObserver ile öğe görünür olduğunda
 * .cms-anim-in sınıfını ekler ve animasyon oynar.
 *
 * Mevcut tipler: fade-in, fade-up, fade-down, slide-left, slide-right,
 *                zoom-in, flip.
 * Erişilebilirlik: prefers-reduced-motion: reduce → animasyon yok (anında görünür).
 */

/* Başlangıç (görünür olmadan önce) gizli/ofsetli durum */
[data-cms-anim] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity var(--cms-anim-duration, 600ms) ease,
    transform var(--cms-anim-duration, 600ms) ease;
  transition-delay: var(--cms-anim-delay, 0ms);
}

[data-cms-anim="fade-up"]    { transform: translateY(24px); }
[data-cms-anim="fade-down"]  { transform: translateY(-24px); }
[data-cms-anim="slide-left"] { transform: translateX(40px); }
[data-cms-anim="slide-right"]{ transform: translateX(-40px); }
[data-cms-anim="zoom-in"]    { transform: scale(.9); }
[data-cms-anim="flip"]       { transform: perspective(800px) rotateX(-12deg); transform-origin: top center; }
/* fade-in: yalnız opaklık (ek transform yok) */

/* Görünür olunca (.cms-anim-in JS tarafından eklenir) → hedef duruma */
[data-cms-anim].cms-anim-in {
  opacity: 1;
  transform: none;
}

/* Erişilebilirlik: hareket azaltma tercihinde animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
  [data-cms-anim] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}