/********************************
 ANIMATION & UI ENHANCEMENT – SALLA
*********************************/

/* منع أي اهتزاز أو فراغ */
html, body {
    overflow-x: hidden !important;
    scroll-behavior: smooth;
}

/* أنيميشن تحميل ناعم للصفحة */
body {
    animation: fadeBody 0.6s ease-in-out;
}

@keyframes fadeBody {
    from { opacity: 0 }
    to { opacity: 1 }
}

/* الكروت (منتجات – تصنيفات – بنرات) */
.s-product-card,
.s-category-card,
.s-block,
.s-card {
    transition: 
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background-color 0.35s ease;
}

/* حركة Hover للكروت */
.s-product-card:hover,
.s-category-card:hover,
.s-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 35px rgba(0,0,0,0.08);
}

/* الصور داخل الكروت */
.s-product-card img,
.s-category-card img {
    transition: transform 0.4s ease;
}

.s-product-card:hover img,
.s-category-card:hover img {
    transform: scale(1.04);
}

/* نصوص المنتجات */
.s-product-card-title,
.s-product-card-price {
    transition: color 0.3s ease;
}

/* الأقسام والعناوين */
h1, h2, h3, h4, h5 {
    animation: slideUp 0.6s ease both;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* البنرات */
.s-slider,
.s-banner {
    overflow: hidden;
}

.s-slider img,
.s-banner img {
    transition: transform 0.6s ease;
}

.s-slider:hover img,
.s-banner:hover img {
    transform: scale(1.03);
}

/* الهيدر */
header {
    transition: background-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* حركة ناعمة للقوائم */
nav a {
    position: relative;
    transition: color 0.3s ease;
}

/* خط بسيط تحت العنصر */
nav a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -6px;
    left: 0;
    background: currentColor;
    transition: width 0.3s ease;
}

nav a:hover::after {
    width: 100%;
}

/* الفوتر – أنيميشن خفيف */
footer {
    animation: fadeUp 0.8s ease both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* الأزرار – بدون تغيير شكلها */
button,
.s-button,
.btn {
    transition: transform 0.25s ease,
                box-shadow 0.25s ease;
}

button:hover,
.s-button:hover,
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}