/* ============================================================ Gez-İn — motion katmanı ------------------------------------------------------------ GÜVENLİK KURALI 1: Buradaki HİÇBİR gizleme kuralı, üzerinde .gz-motion class'ı yoksa devreye girmez. Bu class'ı yalnızca header.php'deki küçük inline script ekler ve motion.js 3sn içinde kendini tanıtmazsa (dosya 404 / JS hatası / eski tarayıcı) aynı script onu geri kaldırır. => JS çalışmazsa sayfa bugünkü haliyle, animasyonsuz ama TAM görünür kalır. GÜVENLİK KURALI 2: Animasyon biter bitmez motion.js ilgili attribute/class'ları eleman üzerinden SİLER. Böylece buradaki transition/transform kuralları elemana yapışıp kalmaz ve sayfanın kendi hover efektleri (ör. .feat:hover, .card:hover) etkilenmez. ============================================================ */ :root{ --gz-dur: .62s; --gz-ease: cubic-bezier(.22,.68,.32,1); } /* ---------- 1) Genel reveal (aşağıdan yumuşak geliş) ---------- */ .gz-motion [data-reveal]:not([data-reveal="words"]), .gz-motion [data-reveal-group] > *{ opacity:0; transform: translateY(18px); } /* Varyantlar */ .gz-motion [data-reveal="left"] { transform: translateX(-24px) } .gz-motion [data-reveal="right"]{ transform: translateX(24px) } .gz-motion [data-reveal="zoom"] { transform: translateY(14px) scale(.97) } .gz-motion [data-reveal]:not([data-reveal="words"]).is-in, .gz-motion [data-reveal-group] > .is-in{ opacity:1; transform:none; transition: opacity var(--gz-dur) var(--gz-ease), transform var(--gz-dur) var(--gz-ease); transition-delay: var(--gz-delay, 0s); } /* ---------- 2) Kelime kelime başlık ---------- */ /* Konteyner, JS kelimeleri ayırana kadar gizli — bölünme anı görünmesin. */ .gz-motion [data-reveal="words"]{ opacity:0 } .gz-motion [data-reveal="words"].gz-split{ opacity:1 } .gz-motion .gz-word{ display:inline-block; opacity:0; transform: translateY(.42em); } .gz-motion .gz-word.is-in{ opacity:1; transform:none; transition: opacity .5s var(--gz-ease), transform .5s var(--gz-ease); transition-delay: var(--gz-delay, 0s); } /* ---------- 3) Havada süzülen kartlar ---------- */ /* Süzülme sonsuz döngü olduğu için bu elemanlarda temizlik yapılmaz. Kendi transform'u olan bir öğeyi süzdürmek gerekiyorsa (ör. rotate'li ikon) öğeyi .gz-float bir sarmalayıcının içine koy — yoksa animasyon transform'u ezer. */ .gz-motion .gz-float{ opacity:0 } .gz-motion .gz-float.is-in{ animation: gzPopIn .55s var(--gz-ease) var(--gz-delay, 0s) both, gzFloatLoop var(--gz-float-dur, 6s) ease-in-out var(--gz-float-delay, .8s) infinite; } @keyframes gzPopIn{ from{ opacity:0; transform: translateY(12px) scale(.94) } to { opacity:1; transform: translateY(0) scale(1) } } @keyframes gzFloatLoop{ 0%,100%{ transform: translateY(0) } 50% { transform: translateY(-10px) } } /* ---------- 4) 0'dan sayan rakamlar ---------- */ /* Gerçek değer bir an görünüp 0'a atlamasın diye JS hazır olana kadar visibility:hidden (yer kaplamaya devam eder → layout zıplamaz). */ .gz-motion [data-count]{ visibility:hidden } .gz-motion [data-count].gz-count-ready{ visibility:visible } /* ---------- 5) Sırayla değişen kelime ---------- */ .gz-rotate{ display:inline-block; transition: opacity .28s ease, transform .28s ease; } .gz-rotate.gz-rot-out{ opacity:0; transform: translateY(-7px) } .gz-rotate.gz-rot-pre{ opacity:0; transform: translateY(7px) } /* ---------- 6) Erişilebilirlik: hareket azaltma ---------- */ /* Kullanıcı sistemde "hareketi azalt" seçtiyse header.php .gz-motion'ı hiç eklemez; yine de çift güvence olarak burada da her şeyi durduruyoruz. */ @media (prefers-reduced-motion: reduce){ .gz-motion [data-reveal], .gz-motion [data-reveal-group] > *, .gz-motion .gz-word, .gz-motion .gz-float, .gz-motion [data-count], .gz-rotate{ opacity:1 !important; transform:none !important; visibility:visible !important; animation:none !important; transition:none !important; } }