/* ============================================================================ T-spektral-insa · yildiz-zemin.css HAREKETLİ YILDIZ ALANI — tüm sayfanın ardında, siyah zeminin üstünde. ── PERF SÖZLEŞMESİ (bu dosyanın var oluş kuralı) ────────────────────────── atmosfer.css'te belgelenmiş bir olay var: tam ekran animasyonlu `blur(48px)` + `mix-blend-mode:screen` katmanları Safari'de compositor thread'ini doldurdu, input hit-testing orada yapıldığı için nav tıkları gecikip DÜŞTÜ. O iki katman (`.spektrum-zemin::before/::after`) bu yüzden `display:none !important`. Bu dosya aynı hatayı YAPMAZ. Katı kurallar: 1) filter/blur YOK. 2) mix-blend-mode YOK. 3) Her karede çalışan JS YOK — sıfır main-thread maliyeti. 4) Tek animasyonlu özellik `transform: translate3d` → compositor'da çalışır, layout/paint tetiklemez. GSAP reveal'lerini ve deck geçişini bu yüzden etkileyemez: aynı thread'de bile değil. 5) `will-change` YOK — animasyon zaten katmanı promote ediyor; reduced-motion'da animasyon durunca katman da promote kalmasın (boşuna GPU belleği). 6) Yıldızlar TEK bir SVG döşemesi (data URI). Onlarca ayrı radial-gradient katmanı yerine tek doku → tek seferlik raster, ucuz. ── KESİNTİSİZ DÖNGÜ NASIL ÇALIŞIYOR ─────────────────────────────────────── Doku `background-repeat: repeat` ile döşenir; katman TAM BİR DÖŞEME boyu aşağı kaydırılır. Bir döşeme sonra görüntü baştakiyle birebir aynıdır → dikiş görünmez. Katman bu yüzden viewport'tan bir döşeme boyu UZUN ve bir döşeme YUKARIDAN başlar (`top: -tile`), yoksa kayarken üstte boşluk açılırdı. Döşeme boyunu değiştirirsen `top` ve `height`'ı da değiştir — üçü bağlı. ── KATMAN BÜTÇESİ ───────────────────────────────────────────────────────── İki katman: uzak (küçük/soluk/yavaş) + yakın (büyük/parlak/hızlı) = parallax. Aşırı çizim yalnız +1 döşeme (%25-40). Dar ekranda yakın katman KAPANIR (mobil GPU belleği). Üçüncü bir katman EKLEME. ============================================================================ */ :root { --yz-uzak-dosem: 260px; --yz-yakin-dosem: 380px; --yz-uzak-sure: 190s; --yz-yakin-sure: 105s; } /* Her iki katman da body'nin pseudo-element'i: 18 sayfanın HİÇBİRİNDE markup değişikliği gerekmiyor. z-index -2 → .spektrum-zemin'in (-3) siyah tabanının ÜSTÜNDE, tüm içeriğin ALTINDA. */ body::before, body::after { content: ""; position: fixed; left: 0; right: 0; z-index: -2; pointer-events: none; background-repeat: repeat; } /* ── UZAK KATMAN — küçük, soluk, yavaş ───────────────────────────────────── */ body::before { top: calc(-1 * var(--yz-uzak-dosem)); height: calc(100% + var(--yz-uzak-dosem)); background-image: url("data:image/svg+xml,"); background-size: var(--yz-uzak-dosem) var(--yz-uzak-dosem); } /* ── YAKIN KATMAN — büyük, parlak, hızlı (parallax hissi buradan) ─────────── */ body::after { top: calc(-1 * var(--yz-yakin-dosem)); height: calc(100% + var(--yz-yakin-dosem)); background-image: url("data:image/svg+xml,"); background-size: var(--yz-yakin-dosem) var(--yz-yakin-dosem); } /* ── SÜRÜKLENME — tam bir döşeme, doğrusal, kesintisiz ───────────────────── */ @media (prefers-reduced-motion: no-preference) { body::before { animation: yz-kay-uzak var(--yz-uzak-sure) linear infinite; } body::after { animation: yz-kay-yakin var(--yz-yakin-sure) linear infinite; } } /* ⚠ BURADAKİ PİKSEL DEĞERLERİ SABİT — var() KULLANMA. Bazı motorlar keyframe hedefi custom property olan transform animasyonlarını compositor'a almayı reddediyor (değer her an değişebilir sayılıyor). Sabit değerin hiçbir maliyeti yok, bu riski tamamen ortadan kaldırıyor. ÖLÇÜM NOTU: bu farkı headless ortamda doğrulayamadım — orada GPU yok, animasyon zaten main thread'de koşuyor; sabit değer önlem olarak duruyor, ölçülmüş kazanç iddiası değil. Değerler --yz-uzak-dosem / --yz-yakin-dosem ile AYNI OLMAK ZORUNDA (döşeme boyu = kayma mesafesi; farklı olursa döngü dikiş verir). Birini değiştirirsen üçünü birden değiştir: token, top/height, buradaki keyframe. */ @keyframes yz-kay-uzak { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 260px, 0); } /* = --yz-uzak-dosem */ } @keyframes yz-kay-yakin { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 380px, 0); } /* = --yz-yakin-dosem */ } /* ── DAR EKRAN — tek katman ──────────────────────────────────────────────── */ /* Mobil GPU belleği kısıtlı; yakın katman kapanır, uzak katman kalır (yıldızlar kaybolmaz, yalnız parallax gider). */ @media (max-width: 700px) { body::after { display: none; } } /* ── KAPATMA KAPILARI ────────────────────────────────────────────────────── */ /* Veri tasarrufu modunda dekoratif katman hiç kurulmasın. */ @media (prefers-reduced-data: reduce) { body::before, body::after { display: none; } } @media (forced-colors: active) { body::before, body::after { display: none; } } @media print { body::before, body::after { display: none; } } /* ============================================================================ KAYAN YILDIZLAR — seyrek, anlık (ana sayfa HARİÇ) ---------------------------------------------------------------------------- Yukarıdaki perf sözleşmesine UYAR: · filter/blur YOK, mix-blend-mode YOK, JS YOK, will-change YOK. · Animasyonlu özellikler yalnız `transform` ve `opacity` → compositor. · "Üçüncü katman ekleme" kuralı TAM EKRAN döşeme katmanları içindi; buradaki öğeler ~150px'lik minik çizgiler, döşeme değil. Kap saydam ve boş. NEDEN JS YOK. Gerçek rastgelelik JS ister ama her yıldız için timer kurmak main-thread'e iş bindirir. Bunun yerine beş yıldıza ASAL'a yakın süreler verildi (67/83/97/113/131s). Ortak katları çok uzak olduğu için desen pratikte kendini tekrar etmiyor; göz düzen yakalayamıyor. SIKLIK — iki sayıyla ayarlanır, ikisi BİRBİRİNE BAĞLI: · keyframe'deki görünür pencere (şu an %4) · yıldız süreleri (31-79sn) ve sayısı (7) Ortalama aralık = ortalama süre / yıldız sayısı ≈ 54/7 ≈ 8 saniyede bir kayma. Görünür süre = pencere × süre ≈ 2,1 saniye. DİKKAT: süreleri kısaltırken pencereyi de büyüt. Pencere sabit kalırsa iz aynı yolu (54vmax) daha kısa sürede alır → hızlanıp kısalır, "kayan yıldız" değil "çizgi flaşı" gibi görünür. Seyrekleştirmek istersen ters yönde aynı oran: süreleri uzat, pencereyi küçült. KEYFRAME'DE var() YOK. Yukarıdaki uyarının aynısı: keyframe hedefi custom property olursa bazı motorlar animasyonu compositor'a almıyor. Bu yüzden dönüş açısı KAPTA (statik transform), hareket ise ::before'da SABİT değerle. Çeşitlilik konum/açı/uzunluk/süre ile geliyor, keyframe tek. ============================================================================ */ .kayan-yildizlar { position: fixed; inset: 0; z-index: -2; /* yıldız döşemeleriyle aynı düzlem, içeriğin altında */ pointer-events: none; overflow: hidden; /* ekran dışına çıkan iz kırpılır, scrollbar açmaz */ } /* Kap: yalnız konum + açı taşır. Statik transform — animasyon YOK. */ .kayan-yildizlar i { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; transform: rotate(var(--a)); } /* İz: baştan sona sönen ince çizgi, ucunda parlak baş. */ .kayan-yildizlar i::before { content: ""; position: absolute; left: 0; top: 0; width: var(--u); height: 1.6px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.12) 45%, rgba(255,255,255,.7) 88%, #fff 100%); opacity: 0; } @media (prefers-reduced-motion: no-preference) { .kayan-yildizlar i::before { animation: kyz-gec var(--sure) linear var(--gec) infinite; } } /* Süre boyunca yalnız ilk ~%3'te hareket + görünürlük; gerisi bekleme. Mesafe sabit (vmax) — var() kullanılmadı, compositor'da kalsın diye. */ @keyframes kyz-gec { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 0.4% { opacity: 0; } 1.3% { opacity: 1; } 3.2% { opacity: .85; } 4.0% { transform: translate3d(54vmax, 0, 0); opacity: 0; } 100% { transform: translate3d(54vmax, 0, 0); opacity: 0; } } /* Dar ekran: üstteki katman bütçesiyle tutarlı — yediden üçe in. */ @media (max-width: 700px) { .kayan-yildizlar i:nth-child(n+4) { display: none; } } /* Kapatma kapıları — yıldız döşemeleriyle aynı. */ @media (prefers-reduced-data: reduce) { .kayan-yildizlar { display: none; } } @media (forced-colors: active) { .kayan-yildizlar { display: none; } } @media print { .kayan-yildizlar { display: none; } }