/* ============================================================
   İMZA HAREKET & FINISH  (motion.css)
   Misafir menüsüne "lüks uygulama" dokusu: sayfa geçişleri, dokunsal
   basış, kademeli giriş, görsel netleşme. Tümü token-tabanlı (variables.css)
   ve `html.qm-motion` altında — böylece tek anahtarla A/B (?motion=off).

   İLKELER
   - Yalnızca transform + opacity + filter (compositor dostu; layout tetiklemez).
   - Girişte oto-oynatılan animasyonlar `prefers-reduced-motion: no-preference`
     ile korunur; dokunsal :active geri-bildirimi her koşulda kalır (etkileşim).
   - View Transitions desteksiz tarayıcıda sessizce yok sayılır (regresyon yok).
   ============================================================ */

/* ---- Sayfa geçişi: yumuşak cross-fade + hafif kayma (tam-sayfa navigasyon).
   `@view-transition { navigation: auto }` opt-in'i head'deki satır-içi script
   ile YALNIZ motion açıkken enjekte edilir (tek anahtarla A/B). Buradaki
   stiller yalnız geçiş aktifken etki eder; desteksiz tarayıcıda yok sayılır. ---- */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: var(--motion-base, 340ms);
    animation-timing-function: var(--ease-sig, cubic-bezier(.16, 1, .3, 1));
}
::view-transition-old(root) { animation-name: qmPageOut; }
::view-transition-new(root) { animation-name: qmPageIn; }
@keyframes qmPageOut { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes qmPageIn  { from { opacity: 0; transform: translateY(8px); } }

/* ============================================================
   DOKUNSAL BASIŞ — yaylı micro-scale (her koşulda; etkileşim geri-bildirimi)
   ============================================================ */
html.qm-motion .product-card,
html.qm-motion .editorial-card,
html.qm-motion .showcase-card,
html.qm-motion .category-card,
html.qm-motion .product-card__add,
html.qm-motion .bottom-nav__icon,
html.qm-motion .bottom-nav__menu-btn,
html.qm-motion .pd-fab,
html.qm-motion .pd-chip {
    transition: transform var(--motion-fast, 190ms) var(--ease-spring, cubic-bezier(.34, 1.4, .5, 1)),
                box-shadow var(--motion-base, 340ms) var(--ease-sig, ease),
                border-color var(--motion-base, 340ms) var(--ease-sig, ease);
    -webkit-tap-highlight-color: transparent;
}
html.qm-motion .product-card:active,
html.qm-motion .editorial-card:active,
html.qm-motion .showcase-card:active,
html.qm-motion .category-card:active { transform: scale(.972); }
html.qm-motion .product-card__add:active,
html.qm-motion .bottom-nav__icon:active,
html.qm-motion .bottom-nav__menu-btn:active,
html.qm-motion .pd-fab:active { transform: scale(.9); }

/* ============================================================
   KADEMELİ GİRİŞ + GÖRSEL NETLEŞME — yalnız hareket tercihi varsa
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

    /* Ürün kartları: sırayla yüksel + belir (ilk 8'e artan gecikme;
       sonrası gecikmesiz — uzun listelerde bekleme birikmesin). */
    html.qm-motion .product-card {
        animation: qmRise var(--motion-slow, 560ms) var(--ease-sig, ease) both;
    }
    html.qm-motion .product-card:nth-child(1) { animation-delay: 30ms; }
    html.qm-motion .product-card:nth-child(2) { animation-delay: 75ms; }
    html.qm-motion .product-card:nth-child(3) { animation-delay: 120ms; }
    html.qm-motion .product-card:nth-child(4) { animation-delay: 165ms; }
    html.qm-motion .product-card:nth-child(5) { animation-delay: 210ms; }
    html.qm-motion .product-card:nth-child(6) { animation-delay: 250ms; }
    html.qm-motion .product-card:nth-child(7) { animation-delay: 285ms; }
    html.qm-motion .product-card:nth-child(8) { animation-delay: 315ms; }

    /* Ana sayfa kategori kartları — üç layout için kademeli. */
    html.qm-motion .editorial-card,
    html.qm-motion .showcase-card,
    html.qm-motion .category-card {
        animation: qmRise var(--motion-slow, 560ms) var(--ease-sig, ease) both;
    }
    html.qm-motion .editorial-card:nth-child(1),
    html.qm-motion .showcase-card:nth-child(1),
    html.qm-motion .category-card:nth-child(1) { animation-delay: 40ms; }
    html.qm-motion .editorial-card:nth-child(2),
    html.qm-motion .showcase-card:nth-child(2),
    html.qm-motion .category-card:nth-child(2) { animation-delay: 100ms; }
    html.qm-motion .editorial-card:nth-child(3),
    html.qm-motion .showcase-card:nth-child(3),
    html.qm-motion .category-card:nth-child(3) { animation-delay: 160ms; }
    html.qm-motion .editorial-card:nth-child(4),
    html.qm-motion .showcase-card:nth-child(4),
    html.qm-motion .category-card:nth-child(4) { animation-delay: 220ms; }
    html.qm-motion .editorial-card:nth-child(n+5),
    html.qm-motion .showcase-card:nth-child(n+5),
    html.qm-motion .category-card:nth-child(n+5) { animation-delay: 270ms; }

    /* Görsel netleşme (blur-up): kapak fotoğrafı pop-in yerine yumuşak açılır. */
    html.qm-motion .product-card__image img,
    html.qm-motion .editorial-card__photo img,
    html.qm-motion .showcase-card__media img {
        animation: qmImg var(--motion-slow, 560ms) var(--ease-sig, ease) both;
    }

    @keyframes qmRise {
        from { opacity: 0; transform: translateY(14px); }
        to   { opacity: 1; transform: none; }
    }
    @keyframes qmImg {
        from { opacity: 0; filter: blur(10px); transform: scale(1.04); }
        to   { opacity: 1; filter: none;       transform: none; }
    }
}