/* ============================================================
   Düşen yemek öğeleri — arka plan dokusu

   animasyon.jpg deseni tek parça kaydırılsa bütün öğeler aynı hızda
   aynı yönde giderdi; desen olduğu belli olur, düşme hissi olmazdı.
   Bu yüzden desen tek tek öğelere kesildi (tools/animasyon-kes.py) ve
   her öğeye kendi hızı, gecikmesi, boyu, sapması ve dönüşü verildi.

   Her öğe üç iç içe katman:
     span  düşüş      (yukarıdan aşağıya, kendi süresinde)
     i     yana salınım (başka bir süre, gidip gelen)
     img   dönüş      (üçüncü bir süre)
   Üç sürenin birbirine oranı tam sayı olmadığı için hareket
   tekrarlıyormuş gibi görünmüyor.

   Katman z-index:-1 ile gövdenin zemininin üstünde, içeriğin altında
   durur. Böylece hiçbir sayfa yapısına dokunmak gerekmiyor: kendi
   zemini olan bölümler (kayan şerit, koyu kutular, kartlar) öğeleri
   kendiliğinden kapatır, saydam bölümlerde görünür.
   ============================================================ */

.dusen{
  position:fixed;inset:0;z-index:-1;
  pointer-events:none;overflow:hidden;
  contain:strict;                      /* düzen hesabını sayfadan ayır */
}

.dusen-oge{
  position:absolute;top:0;left:var(--x);
  width:var(--boy);
  animation:dusen-in var(--sure) linear var(--gecik) infinite;
  will-change:transform;
}

.dusen-oge > i{
  display:block;
  animation:dusen-sal var(--sal) ease-in-out var(--gecik) infinite alternate;
}

.dusen-oge img{
  display:block;width:100%;height:auto;
  opacity:var(--dusen-solukluk,.18);
  animation:dusen-don var(--donsure) linear var(--gecik) infinite;
}

@keyframes dusen-in{
  from{transform:translate3d(0,-24vh,0)}
  to{transform:translate3d(var(--kay),120vh,0)}
}
@keyframes dusen-sal{
  from{transform:translateX(calc(var(--saptik) * -1))}
  to{transform:translateX(var(--saptik))}
}
@keyframes dusen-don{
  from{transform:rotate(0deg)}
  to{transform:rotate(var(--don))}
}

/* İşletme sahibinin kararı: doku, işletim sistemindeki animasyon
   ayarından bağımsız olarak herkeste akar. Hareket yavaş, öğeler küçük
   ve çok soluk. Durağan duruma dönmek gerekirse:
     @media (prefers-reduced-motion:reduce){
       .dusen-oge{animation:none;top:var(--durus,40%)}
       .dusen-oge > i,.dusen-oge img{animation:none}
     }
   Öğelerin "--durus" değeri hâlâ üretiliyor, o yüzden bu bloğu geri
   koymak yeterli. */

/* Telefonda daha az öğe yeter; hem yer hem pil. */
@media (max-width:640px){
  .dusen-oge:nth-child(n+11){display:none}
}