/* ============================================================
   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 Gold Shimmer iskelet yer tutucu, yüklenince GPU hızlandırmalı yumuşak belirme ── */
html body .zm-img-host:not(.zm-img-host-done) {
    position: relative;
    overflow: hidden;
    background-color: #0b0d12 !important;
    background-image: linear-gradient(
        110deg,
        rgba(13, 15, 20, 0.96) 22%,
        rgba(201, 169, 125, 0.16) 48%,
        rgba(13, 15, 20, 0.96) 74%
    ) !important;
    background-size: 220% 100% !important;
    animation: zm-shimmer-sweep 1.35s linear infinite !important;
}
html body .zm-img-host.zm-img-host-done {
    animation: none !important;
    background-image: none !important;
    background-color: transparent;
}
@keyframes zm-shimmer-sweep {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes zm-spin-ring {
    to { transform: rotate(360deg); }
}

img.zm-img {
    opacity: 0 !important;
    transform: translate3d(0, 6px, 0) scale3d(1.025, 1.025, 1);
    will-change: opacity, transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
img.zm-img.zm-img-ok {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transition: opacity 0.46s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.54s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ── 2b) Promosyon kartları (.prp-card-img-wrap): Slider ile birebir Gold Shimmer + altın halka ── */
html body .prp-card-accent {
    transition: opacity 0.35s ease;
}
html body .prp-card:hover .prp-card-accent,
html body .prp-card:active .prp-card-accent,
html body .prp-card:focus-within .prp-card-accent {
    opacity: 0 !important;
}
html body .prp-card-img-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4088 / 2562;
    background-color: #0b0d12;
}
html body .prp-card-img-wrap.is-loaded {
    overflow: visible !important;
    background-color: transparent;
}
html body .prp-card-img-wrap.is-loading {
    overflow: hidden !important;
    background-color: #0b0d12 !important;
    background-image: linear-gradient(
        110deg,
        rgba(13, 15, 20, 0.96) 22%,
        rgba(201, 169, 125, 0.16) 48%,
        rgba(13, 15, 20, 0.96) 74%
    ) !important;
    background-size: 220% 100% !important;
    animation: zm-shimmer-sweep 1.35s linear infinite !important;
}
html body .prp-card-img-wrap.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    margin-left: -17px;
    border-radius: 50%;
    border: 2.5px solid rgba(201, 169, 125, 0.20);
    border-top-color: #d9bc8e;
    box-shadow: 0 0 16px rgba(201, 169, 125, 0.25);
    animation: zm-spin-ring 0.75s linear infinite;
    z-index: 3;
    pointer-events: none;
}
html body .prp-card-img-wrap:not(.is-loaded) .prp-card-img {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale3d(1.045, 1.045, 1);
}
html body .prp-card-img-wrap.is-loaded .prp-card-img {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale3d(1, 1, 1);
    transition: opacity 0.56s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s ease;
}
html body .prp-card:hover .prp-card-img-wrap.is-loaded .prp-card-img,
html body .prp-card:active .prp-card-img-wrap.is-loaded .prp-card-img,
html body .prp-card:focus-within .prp-card-img-wrap.is-loaded .prp-card-img {
    transform: scale3d(1.04, 1.04, 1);
}

/* ── 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; }