/* ===================================================================== Brolyz — HAREKET KATMANI (motion.css) · site.css'ten SONRA yüklenir --------------------------------------------------------------------- · Amaç : Mevcut tasarımı DEĞİŞTİRMEDEN hareketi tek bir ritme oturtmak · Kimlik: "Yerine oturma" — çekilişten çıkan bilet gibi, içerik hafif bir yaylanmayla yerine yerleşir. Süsleme değil, sebep-sonuç. · Yapı : Tüm değerler site.css tokenlarından türetilir; renk yok. · Kaldırma: header.php'deki tek satırı silinince site eski haline döner — bu dosya hiçbir mevcut sınıfı ezmez. CİHAZ KADEMESİ (motion.js yazar) full → tam koreografi (varsayılan) lite → düşük güçlü cihaz / veri tasarrufu: süreler kısa, efekt az off → prefers-reduced-motion veya çok zayıf cihaz: hareket yok ===================================================================== */ /* ============================================================ 1) HAREKET TOKENLARI — süre/eğri tek yerden yönetilir ============================================================ */ :root{ /* Süreler: mikro etkileşim 150-300ms, karmaşık geçiş <=400ms */ --m-1:.16s; /* basış, hover gibi anlık geri bildirim */ --m-2:.26s; /* durum değişimi */ --m-3:.38s; /* bölüm/kart girişi */ --m-stagger:45ms; /* liste/ızgara sıralı giriş adımı */ /* Eğriler: girişte yumuşak yavaşlama, yerleşmede hafif yaylanma */ --m-in:var(--ease-out); --m-settle:cubic-bezier(.2,.9,.25,1.04); --m-exit:cubic-bezier(.4,0,.9,.35); /* Giriş mesafesi — büyük ekranda biraz daha belirgin */ --m-lift:14px; } @media (min-width:1024px){ :root{ --m-lift:18px } } /* Düşük kademe: her şey hızlanır, mesafe kısalır (jank'i keser) */ html[data-motion="lite"]{ --m-1:.12s; --m-2:.18s; --m-3:.22s; --m-stagger:0ms; --m-lift:8px; --m-settle:var(--ease-out); } /* ============================================================ 2) GİRİŞ KOREOGRAFİSİ — .bz-reveal'ı bozmadan genişletir ------------------------------------------------------------ site.js zaten .bz-reveal/.bz-in çiftini kuruyor. Burada sadece ızgara kartları için eksik olan hedefleri ve ortak ritmi ekliyoruz. ============================================================ */ .mz{ opacity:0; transform:translate3d(0,var(--m-lift),0); transition:opacity var(--m-3) var(--m-in), transform var(--m-3) var(--m-settle); transition-delay:var(--mz-d,0ms); will-change:opacity,transform; } .mz.mz-in{ opacity:1; transform:none; } /* Animasyon bitince will-change kalkar — bellek boşuna tutulmaz */ .mz.mz-done{ will-change:auto } /* ============================================================ 3) HERO AÇILIŞ DİZİSİ — sayfa yüklenince tek seferlik ------------------------------------------------------------ Sıra: amblem → üst etiket → başlık → alt metin → CTA → istatistik Her biri bir öncekinden --m-stagger kadar sonra gelir. ============================================================ */ html[data-motion="full"] .mz-hero > *{ opacity:0; transform:translate3d(0,12px,0); animation:mzHeroIn var(--m-3) var(--m-settle) forwards; animation-delay:calc(var(--mz-i,0) * var(--m-stagger)); } @keyframes mzHeroIn{ to{ opacity:1; transform:none } } /* ============================================================ 4) BASIŞ GERİ BİLDİRİMİ — düzeni kaydırmadan ------------------------------------------------------------ Kural: transform dışında bir şey animasyonlanmaz (reflow yok). ============================================================ */ html:not([data-motion="off"]) .pill, html:not([data-motion="off"]) .btn{ transition:transform var(--m-1) var(--m-in), box-shadow var(--m-2) var(--m-in), border-color var(--m-2) var(--m-in); } /* .bcard'ın geçişi premium.css'te tanımlı (.35s hover kalkışı). Onu EZMEYİZ; yalnızca basış hissini hızlandırırız — gölge/kenarlık premium ritmini korur, sadece transform anlık tepki verir. */ html:not([data-motion="off"]) .bcard{ transition:transform var(--m-1) var(--m-in), box-shadow .35s var(--ease), border-color .35s var(--ease); } html:not([data-motion="off"]) .bcard:active, html:not([data-motion="off"]) .pill:active, html:not([data-motion="off"]) .btn:active{ transform:scale(.978); } /* NOT: .bcard:hover kalkışı premium.css'e bırakıldı (-5px). Burada yeniden tanımlanırsa premium tasarım sessizce bozulur. */ /* ============================================================ 5) ALGILANAN HIZ — iskelet parıltısı ------------------------------------------------------------ 300ms'ten uzun süren yüklemelerde boş kutu yerine iskelet. ============================================================ */ .mz-skel{ position:relative; overflow:hidden; background:rgba(var(--surface-2),.55); border-radius:var(--radius-sm); } .mz-skel::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(var(--tint),.09), transparent); animation:mzShimmer 1.15s infinite; } @keyframes mzShimmer{ to{ transform:translateX(100%) } } html[data-motion="off"] .mz-skel::after{ animation:none } /* ============================================================ 6) ERİŞİLEBİLİRLİK — hareket kapalıysa HİÇBİR ŞEY oynamaz ------------------------------------------------------------ Not: opacity/transform sıfırlanır ki içerik görünür KALSIN; "gizli kalma" hatası bu yüzden oluşmaz. ============================================================ */ @media (prefers-reduced-motion:reduce){ .mz,.mz-hero > *{ opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; } .mz-skel::after{ animation:none } } html[data-motion="off"] .mz, html[data-motion="off"] .mz-hero > *{ opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; } /* ============================================================ 7) BAĞLANTI/GÜÇ DUYARLILIĞI ------------------------------------------------------------ Kaydırma sırasında ağır efektleri geçici olarak durdurur — motion.js .mz-scroll sınıfını 'e ekleyip kaldırır. ============================================================ */ html.mz-scroll .hero-orb{ animation-play-state:paused }