/* =====================================
   WallpaperHub Effects Engine
===================================== */

/* تحسين الأداء */
*{
    -webkit-tap-highlight-color: transparent;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
}

/* انتقالات ناعمة */

a,
button,
.card,
.badge,
.stat,
.menu-item,
.wallpaper-card,
.category-card,
.slider-item,
img{
    transition:
        transform .28s cubic-bezier(.22,.61,.36,1),
        box-shadow .28s,
        opacity .28s,
        background-color .28s,
        color .28s;
}

/* ضغط ثلاثي الأبعاد */

button:active,
.card:active,
.badge:active,
.stat:active,
.menu-item:active,
.wallpaper-card:active,
.category-card:active{

    transform:
        perspective(1000px)
        rotateX(5deg)
        rotateY(-5deg)
        translateZ(20px)
        scale(.97);

}

/* تأثير الظهور */

.fade-up{

    animation:fadeUp .45s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* بطاقات ثلاثية الأبعاد */

.card,
.wallpaper-card,
.badge,
.stat,
.category-card,
.slider-item{

    perspective:1400px;
    transform-style:preserve-3d;
    will-change:transform;

}

/* صورة تكبر قليلاً */

img{

    backface-visibility:hidden;

}

img:active{

    transform:scale(.98);

}

/* ===============================
   Live 3D Parallax
================================ */

.card,
.badge,
.stat,
.menu-item,
.wallpaper-card,
.category-card,
.slider-item{

    position:relative;
    overflow:hidden;

}

.card::before,
.badge::before,
.stat::before,
.menu-item::before,
.wallpaper-card::before,
.category-card::before,
.slider-item::before{

    content:"";
    position:absolute;
    inset:-50%;
    background:
    radial-gradient(circle,
    rgba(255,255,255,.35),
    transparent 65%);
    opacity:0;
    transform:translate(-40%,-40%);
    transition:.35s;
    pointer-events:none;

}

.card:hover::before,
.badge:hover::before,
.stat:hover::before,
.menu-item:hover::before,
.wallpaper-card:hover::before,
.category-card:hover::before,
.slider-item:hover::before{

    opacity:1;

}

.card:hover,
.badge:hover,
.stat:hover,
.menu-item:hover,
.wallpaper-card:hover,
.category-card:hover,
.slider-item:hover{

    transform:
    perspective(1200px)
    rotateX(8deg)
    rotateY(-8deg)
    translateY(-8px)
    scale(1.04);

    box-shadow:
    0 18px 40px rgba(0,0,0,.22);

}

.card img,
.wallpaper-card img{

    transition:transform .45s;

}

.card:hover img,
.wallpaper-card:hover img{

    transform:scale(1.08);

}