/**
 * تأثيرات بصرية 3D للصفحة الرئيسية
 * يُحمّل بعد frontend.css
 */

/* ========== حاوية perspective عامة للأقسام ========== */
.section-3d {
    perspective: 1200px;
    transform-style: preserve-3d;
}

.section-3d .container-3d {
    transform-style: preserve-3d;
}

/* ========== بطاقات 3D (مميزات، خدمات، منتجات، مدونة) ========== */
.card-3d {
    transform-style: preserve-3d;
    transform: perspective(800px) rotateX(0deg) rotateY(0deg) translateZ(0);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08),
                0 0 0 1px rgba(0, 0, 0, 0.04);
}

.card-3d:hover {
    transform: perspective(800px) rotateX(-6deg) rotateY(4deg) translateY(-12px) translateZ(20px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2),
                0 0 0 1px rgba(0, 0, 0, 0.05);
}

[dir="rtl"] .card-3d:hover {
    transform: perspective(800px) rotateX(-6deg) rotateY(-4deg) translateY(-12px) translateZ(20px);
}

/* ========== بطاقات الإحصائيات في الهيرو – عمق ========== */
.hero-stat-card.card-3d {
    transform: perspective(600px) translateZ(0);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hero-stat-card.card-3d:hover {
    transform: perspective(600px) translateZ(12px) translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* ========== سلايدر الهيرو – عمق عند التبديل ========== */
.hero-slider-container {
    perspective: 1000px;
}

.hero-slide {
    transform-style: preserve-3d;
}

.hero-slide.active {
    transform: translateX(0) translateZ(0) scale(1);
}

.hero-slider .hero-slide:not(.active) {
    transform: translateX(100%) translateZ(-80px) scale(0.95);
    pointer-events: none;
}

[dir="rtl"] .hero-slider .hero-slide:not(.active) {
    transform: translateX(-100%) translateZ(-80px) scale(0.95);
}

.hero-slide.prev {
    transform: translateX(-100%) translateZ(-80px) scale(0.95);
}

[dir="rtl"] .hero-slide.prev {
    transform: translateX(100%) translateZ(-80px) scale(0.95);
}

/* ========== عنوان الهيرو – زاوية خفيفة ========== */
.hero-headline-3d {
    transform: perspective(900px) rotateX(2deg);
    transform-origin: center top;
}

[dir="rtl"] .hero-headline-3d {
    transform: perspective(900px) rotateX(2deg);
    transform-origin: center top;
}

/* ========== أزرار بتأثير ضغط 3D ========== */
.btn-3d {
    transform: translateY(0);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15),
                0 2px 0 rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-3d:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12),
                0 0 0 rgba(0, 0, 0, 0.05);
}

.btn-3d:active {
    transform: translateY(4px);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

/* ========== قسم الإحصائيات الكبيرة – بطاقات زجاجية بعمق ========== */
.stat-card-3d {
    transform: perspective(700px) translateZ(0);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.stat-card-3d:hover {
    transform: perspective(700px) translateZ(15px) translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ========== قسم CTA – لوح بعمق ========== */
.cta-section-3d {
    position: relative;
    transform-style: preserve-3d;
}

.cta-section-3d::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    transform: translateZ(-20px) scale(1.02);
    filter: brightness(0.7);
    z-index: -1;
    border-radius: inherit;
}

/* ========== أيقونات المميزات – دوران خفيف عند Hover ========== */
.icon-3d-wrap {
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.card-3d:hover .icon-3d-wrap {
    transform: rotateY(15deg) scale(1.05);
}

[dir="rtl"] .card-3d:hover .icon-3d-wrap {
    transform: rotateY(-15deg) scale(1.05);
}