/* ============================================================
   UI MOTION — sayfa içeriği ilerleyen yükleme, sidebar ve profil menüsü hareketleri
   ------------------------------------------------------------
   Tema dosyalarından bağımsızdır (Gold / Purple / Red hepsinde çalışır) ve tema CSS'inden
   SONRA yüklenir. Renk kullanmaz; yalnızca opaklık / konum geçişleri.
   prefers-reduced-motion açıkken hareketler kapatılır.
   Sınıfları js/ui-motion.js ekler; JS çalışmazsa hiçbir şey gizli kalmaz.
   ============================================================ */

/* ── 1) Sayfa içeriği: kaydırdıkça yumuşak belirme ── */
.zm-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--zm-d, 0ms);
    will-change: opacity, transform;
}
.zm-reveal.zm-in {
    opacity: 1;
    transform: none;
}

/* ── 2) Görseller: yüklenirken sade (düz renk) yer tutucu, yüklenince yumuşak belirme ── */
img.zm-img {
    opacity: 0;
    background-color: rgba(255, 255, 255, .05);
    transition: opacity .45s ease;
    animation: zm-img-pulse 1.4s ease-in-out infinite;
}
img.zm-img.zm-img-ok {
    opacity: 1;
    animation: none;
    background-color: transparent;
}
@keyframes zm-img-pulse {
    0%, 100% { background-color: rgba(255, 255, 255, .04); }
    50%      { background-color: rgba(255, 255, 255, .09); }
}

/* ── 3) Profil açılır menüsü: yalnızca tıklamayla (.active) açılır/kapanır — hover ile açık kalmaz ── */
html body .user-menu-wrapper .user-dropdown-menu {
    transform-origin: top right;
    transition: opacity .2s cubic-bezier(.2, .8, .2, 1),
                transform .26s cubic-bezier(.2, .8, .2, 1),
                visibility 0s linear .26s !important;
}
html body .user-menu-wrapper .user-dropdown-menu:not(.active):not(.open),
html body .user-menu-wrapper:hover .user-dropdown-menu:not(.active):not(.open) {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) scale(.97) !important;
    pointer-events: none !important;
}
html body .user-menu-wrapper .user-dropdown-menu.active,
html body .user-menu-wrapper .user-dropdown-menu.open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: opacity .2s cubic-bezier(.2, .8, .2, 1),
                transform .26s cubic-bezier(.2, .8, .2, 1),
                visibility 0s linear 0s !important;
}
/* menü satırları açılırken hafif kademeli gelir */
html body .user-menu-wrapper .user-dropdown-menu > * {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
}
html body .user-menu-wrapper .user-dropdown-menu.active > *,
html body .user-menu-wrapper .user-dropdown-menu.open > * {
    opacity: 1;
    transform: none;
}
html body .user-menu-wrapper .user-dropdown-menu.active > *:nth-child(1) { transition-delay: .02s; }
html body .user-menu-wrapper .user-dropdown-menu.active > *:nth-child(2) { transition-delay: .05s; }
html body .user-menu-wrapper .user-dropdown-menu.active > *:nth-child(3) { transition-delay: .08s; }
html body .user-menu-wrapper .user-dropdown-menu.active > *:nth-child(4) { transition-delay: .11s; }
html body .user-menu-wrapper .user-dropdown-menu.active > *:nth-child(n+5) { transition-delay: .14s; }

/* ── 4) Mobil / tablet sol sidebar: iOS tarzı yay eğrisi, kademeli satırlar, parmakla kapatma ── */
@media (max-width: 1024px) {
    /* kapanma (varsayılan durum): kısa ve net */
    html body .casino-sidebar {
        transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease !important;
        will-change: transform;
        overscroll-behavior: contain;
    }
    /* açılma: uzun, yumuşak "yerine oturma" eğrisi */
    html body .casino-sidebar.sidebar-open {
        transition: transform .46s cubic-bezier(.32, .72, 0, 1), box-shadow .46s ease !important;
    }
    html body .sidebar-overlay {
        transition: opacity .3s ease, visibility 0s linear .3s !important;
    }
    html body .sidebar-overlay.active {
        transition: opacity .4s ease, visibility 0s linear 0s !important;
    }

    /* sidebar satırları: açılırken soldan hafifçe kayarak gelir */
    html body .casino-sidebar .sb-item,
    html body .casino-sidebar .sb-footer {
        opacity: 0;
        transform: translateX(-14px);
        transition: opacity .18s ease, transform .18s ease, background-color .15s ease, color .15s ease, border-color .15s ease !important;
        transition-delay: 0s !important;
    }
    html body .casino-sidebar.sidebar-open .sb-item,
    html body .casino-sidebar.sidebar-open .sb-footer {
        opacity: 1;
        transform: none;
        transition: opacity .32s ease, transform .46s cubic-bezier(.32, .72, 0, 1), background-color .15s ease, color .15s ease, border-color .15s ease !important;
        transition-delay: calc(var(--zm-i, 0) * 24ms + 110ms), calc(var(--zm-i, 0) * 24ms + 110ms), 0s, 0s, 0s !important;
    }
    /* parmakla sürüklerken geçiş kapalı (JS .zm-dragging ekler) */
    html body .casino-sidebar.zm-dragging,
    html body .sidebar-overlay.zm-dragging {
        transition: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zm-reveal, .zm-reveal.zm-in { opacity: 1 !important; transform: none !important; transition: none !important; }
    img.zm-img { opacity: 1 !important; animation: none !important; transition: none !important; }
    html body .user-menu-wrapper .user-dropdown-menu,
    html body .user-menu-wrapper .user-dropdown-menu > * { transition: none !important; }
    html body .casino-sidebar, html body .sidebar-overlay,
    html body .casino-sidebar .sb-item, html body .casino-sidebar .sb-footer {
        transition: none !important; opacity: 1; transform: none;
    }
    html body .casino-sidebar { transform: translateX(-100%) !important; }
    html body .casino-sidebar.sidebar-open { transform: translateX(0) !important; }
}

/* ── Footer: BeGambleAware bağlantısı ── */
.nft-aware-link .nft-badge-aware { transition: opacity .2s ease; }
.nft-aware-link:hover .nft-badge-aware { opacity: 1 !important; }