/* ========================================================================== DIJITAL BANDIRMA — db-motion.css Kaydırmayla tetiklenen açığa çıkarma davranışları. Her şey hareket etmez: bunlar seçilerek uygulanır. JS kapalıysa içerik gizli KALMAZ (aşağıdaki .db-js koruması). ========================================================================== */ /* JS çalışıyorsa üzerine db-js sınıfı basılır. Başlangıç gizlemeleri yalnızca o zaman devreye girer. */ /* -------------------------------------------------------------------------- 01 — YÜKSEL VE BELİR -------------------------------------------------------------------------- */ .db-js [data-db-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.85s var(--db-ease-out), transform 0.85s var(--db-ease-out); transition-delay: var(--db-delay, 0s); } .db-js [data-db-reveal].is-seen { opacity: 1; transform: translateY(0); } /* -------------------------------------------------------------------------- 02 — MASKELİ AÇILIM (clip-path) Görseller ve kadrajlar için: perde açılır gibi. -------------------------------------------------------------------------- */ .db-js [data-db-reveal='mask'] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--db-ease-io); transition-delay: var(--db-delay, 0s); } .db-js [data-db-reveal='mask'].is-seen { clip-path: inset(0 0 0 0); } /* -------------------------------------------------------------------------- 03 — SATIR SATIR TİPOGRAFİ -------------------------------------------------------------------------- */ /* Maske kutusu — Türkçe diyakritiklerin üstten kırpılmaması için pay bırakır */ .db-js [data-db-reveal='lines'] > * { display: block; overflow: hidden; padding-top: 0.2em; margin-top: -0.2em; } .db-js [data-db-reveal='lines'] > * > span { display: block; transform: translateY(105%); transition: transform 1s var(--db-ease-out); } .db-js [data-db-reveal='lines'].is-seen > * > span { transform: translateY(0); transition-delay: calc(var(--db-i, 0) * 0.09s); } /* -------------------------------------------------------------------------- 04 — ÇİZGİ ÇİZİMİ Ayraçlar soldan sağa çizilir. -------------------------------------------------------------------------- */ .db-js [data-db-reveal='line'] { opacity: 1; transform: none; transform-origin: left; scale: 0 1; transition: scale 1.05s var(--db-ease-io); transition-delay: var(--db-delay, 0s); } .db-js [data-db-reveal='line'].is-seen { scale: 1 1; } /* -------------------------------------------------------------------------- 05 — YAVAŞ ÖLÇEK (parallax eşlikçisi) -------------------------------------------------------------------------- */ .db-js [data-db-parallax] { will-change: transform; } /* -------------------------------------------------------------------------- 06 — HAREKET TERCİHİ Azaltılmış hareket: her şey görünür başlar, hiçbir şey gizlenmez. -------------------------------------------------------------------------- */ /* db-force-motion sınıfı üzerindeyken bu blok devre dışı kalır. */ @media (prefers-reduced-motion: reduce) { html:not(.db-force-motion) [data-db-reveal], html:not(.db-force-motion) [data-db-reveal='mask'], html:not(.db-force-motion) [data-db-reveal='line'] { opacity: 1 !important; transform: none !important; clip-path: none !important; scale: 1 1 !important; transition: none !important; } html:not(.db-force-motion) [data-db-reveal='lines'] > * > span { transform: none !important; transition: none !important; } html:not(.db-force-motion) .db-hero__line > span { transform: none !important; } }