/* ================================================================
   SNL FEED — İKON MİKRO-ANİMASYONLARI
   Kurallar (görev spec'i):
   - SADECE transform + opacity animate edilir (layout thrash yok)
   - will-change KULLANILMAZ (120 elemanda ayrı GPU katmanı ters teper)
   - Tüm sınıflar "snl-ico-" prefixli (marketplace/store CSS'i ile çakışmasın)
   ================================================================ */

/* Ortak: ikonlar inline-block olmalı ki transform uygulanabilsin
   (span default inline → transform çalışmaz) */
[class*="snl-ico-"] {
    display: inline-block;
    transform-origin: center;
    backface-visibility: hidden;   /* mobilde titreme önler */
}

/* ── BLOK 2: ETİKET (🔖) — SALLANMA ─────────────────────────────
   Sallanma ~1.4s, kalan ~4.6s duruş. Genlik sönümlenerek azalır.
   Sürekli sallanan etiket metronom gibi durur — o yüzden duruşlu. */
.snl-ico-tag {
    animation: snl-tagSwing 6s ease-in-out infinite;
    transform-origin: 29% 29%;   /* SVG'deki delik merkezi (9.2/32) */
}

@keyframes snl-tagSwing {
    0%   { transform: rotate(0deg); }
    4%   { transform: rotate(7deg); }
    9%   { transform: rotate(-5deg); }
    14%  { transform: rotate(3deg); }
    19%  { transform: rotate(-1.5deg); }
    24%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}

/* ── BLOK 7: BEĞENİ — POP (dokunmada) ───────────────────────── */
.snl-ico-like.pop {
    animation: snl-pop 200ms cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes snl-pop {
    0%   { transform: scale(1) rotate(0deg); }
    50%  { transform: scale(1.18) rotate(-6deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* ── BLOK 5: YORUM — ZIPLAMA (dokunmada / yeni yorum) ───────── */
.snl-ico-comment.bump {
    animation: snl-bump 300ms cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes snl-bump {
    0%   { transform: translateY(0) scale(1); }
    40%  { transform: translateY(-4px) scale(1.06); }
    100% { transform: translateY(0) scale(1); }
}

/* ── BLOK 6: PAYLAŞ — İLERİ FIRLAMA (dokunmada) ─────────────── */
.snl-ico-share.launch {
    animation: snl-launch 220ms ease-out;
}

@keyframes snl-launch {
    0%   { transform: translate(0, 0) scale(1); }
    45%  { transform: translate(3px, -3px) scale(1.08); }
    100% { transform: translate(0, 0) scale(1); }
}

/* ── BLOK 3: GRAFİK (📊→SVG) — CANLI ÇUBUKLAR ───────────────────
   transform-box: fill-box ŞART — SVG'de transform-origin tarayıcılar
   arası tutarsız çalışır. nth-of-type kullanılır (nth-child değil):
   <defs> vb. eklenirse index kaymasın. */
/* DİKKAT: 1. <rect> beyaz kart zeminidir — animasyon SADECE çubuklara
   (2., 3., 4. rect) uygulanır. */
.snl-ico-chart rect:nth-of-type(n+2) {
    transform-box: fill-box;
    transform-origin: bottom;
    animation: snl-barPulse 2.5s ease-in-out infinite alternate;
}
.snl-ico-chart rect:nth-of-type(3) { animation-delay: .4s; }
.snl-ico-chart rect:nth-of-type(4) { animation-delay: .8s; }

@keyframes snl-barPulse {
    0%   { transform: scaleY(.85); }
    100% { transform: scaleY(1.12); }
}

/* ── BLOK 4: GÖZ (👁→SVG) — KIRPMA + PUPİL ──────────────────────
   Kapak, göz şeklinin kopyası; normalde scaleY(0) (görünmez), kırparken
   1'e açılıp kapanır. PNG'ye scaleY() uygulama (ezme) YAPILMADI. */
.snl-ico-eye .snl-eye-lid {
    transform-box: fill-box;
    transform-origin: top center;
    transform: scaleY(0);
}

.snl-ico-eye.blink .snl-eye-lid {
    animation: snl-blink 170ms ease-in-out;
}

@keyframes snl-blink {
    0%   { transform: scaleY(0); }
    50%  { transform: scaleY(1); }
    100% { transform: scaleY(0); }
}

/* Pupil: yavaş sağ-sol bakınma, sonra merkez */
.snl-ico-eye .snl-eye-pupil {
    transform-box: fill-box;
    transform-origin: center;
    animation: snl-pupil 9s ease-in-out infinite;
}

@keyframes snl-pupil {
    0%, 58%   { transform: translateX(0); }
    66%       { transform: translateX(2.2px); }
    76%       { transform: translateX(-2.2px); }
    84%, 100% { transform: translateX(0); }
}

/* ── BLOK 1.3: REDUCED MOTION ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    /* Alt elemanlar da (SVG rect/path/circle) dahil olmalı — yoksa çubuk
       ve göz animasyonları durmaz. */
    [class*="snl-ico-"],
    [class*="snl-ico-"] * {
        animation: none !important;
    }
}