/* ============================================================
   تأثيرات الظهور العامة (Universal Page Reveal)
   ============================================================ */

/* ============================================================
   1. ظهور الأقسام عند تحميل الصفحة (Page Reveal)
   ============================================================ */
.reveal-page {
    opacity: 0;
    transform: translateY(50px);
    animation: revealPage 0.9s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* تأخيرات متدرجة للأقسام */
.reveal-page:nth-child(1) { animation-delay: 0.05s; }
.reveal-page:nth-child(2) { animation-delay: 0.10s; }
.reveal-page:nth-child(3) { animation-delay: 0.15s; }
.reveal-page:nth-child(4) { animation-delay: 0.20s; }
.reveal-page:nth-child(5) { animation-delay: 0.25s; }
.reveal-page:nth-child(6) { animation-delay: 0.30s; }
.reveal-page:nth-child(7) { animation-delay: 0.35s; }
.reveal-page:nth-child(8) { animation-delay: 0.40s; }
.reveal-page:nth-child(9) { animation-delay: 0.45s; }
.reveal-page:nth-child(10) { animation-delay: 0.50s; }
.reveal-page:nth-child(11) { animation-delay: 0.55s; }
.reveal-page:nth-child(12) { animation-delay: 0.60s; }

@keyframes revealPage {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.97);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================
   2. ظهور العناصر من الأسفل للأعلى (Fade In Up)
   ============================================================ */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   3. ظهور البطاقات مع تكبير (Fade In Scale)
   ============================================================ */
.fade-scale {
    opacity: 0;
    transform: scale(0.9);
    animation: fadeScale 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes fadeScale {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================================
   4. ظهور من اليسار (Fade In Left)
   ============================================================ */
.fade-left {
    opacity: 0;
    transform: translateX(-60px);
    animation: fadeLeft 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes fadeLeft {
    0% {
        opacity: 0;
        transform: translateX(-60px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================================
   5. ظهور من اليمين (Fade In Right)
   ============================================================ */
.fade-right {
    opacity: 0;
    transform: translateX(60px);
    animation: fadeRight 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes fadeRight {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================================
   6. ظهور مع دوران (Fade In Rotate)
   ============================================================ */
.fade-rotate {
    opacity: 0;
    transform: rotate(-8deg) scale(0.85);
    animation: fadeRotate 0.9s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes fadeRotate {
    0% {
        opacity: 0;
        transform: rotate(-8deg) scale(0.85);
    }
    100% {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

/* ============================================================
   7. ظهور من الأعلى للأسفل (Fade In Down)
   ============================================================ */
.fade-down {
    opacity: 0;
    transform: translateY(-40px);
    animation: fadeDown 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes fadeDown {
    0% {
        opacity: 0;
        transform: translateY(-40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   8. ظهور عند التمرير (Scroll Reveal)
   ============================================================ */

/* من الأسفل للأعلى */
.scroll-reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* من اليسار */
.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-80px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.scroll-reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* من اليمين */
.scroll-reveal-right {
    opacity: 0;
    transform: translateX(80px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.scroll-reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* مع تكبير */
.scroll-reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.scroll-reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* مع دوران */
.scroll-reveal-rotate {
    opacity: 0;
    transform: rotate(-10deg) scale(0.9);
    transition: all 0.9s cubic-bezier(0.23, 1, 0.32, 1);
}

.scroll-reveal-rotate.visible {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* ============================================================
   9. خلفية متحركة (Glow Background)
   ============================================================ */
.glow-bg {
    position: relative;
    overflow: hidden;
}

.glow-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 140%;
    height: 200%;
    background: radial-gradient(circle at 70% 50%, rgba(14, 125, 197, 0.04), transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: glowPulse 8s ease-in-out infinite alternate;
}

@keyframes glowPulse {
    0% { opacity: 0.2; transform: scale(0.95); }
    100% { opacity: 0.6; transform: scale(1.1); }
}

.glow-bg .container,
.glow-bg > * {
    position: relative;
    z-index: 1;
}

/* ============================================================
   10. تأخيرات مخصصة (Custom Delays)
   ============================================================ */
.delay-50  { animation-delay: 0.05s !important; transition-delay: 0.05s !important; }
.delay-100 { animation-delay: 0.10s !important; transition-delay: 0.10s !important; }
.delay-150 { animation-delay: 0.15s !important; transition-delay: 0.15s !important; }
.delay-200 { animation-delay: 0.20s !important; transition-delay: 0.20s !important; }
.delay-250 { animation-delay: 0.25s !important; transition-delay: 0.25s !important; }
.delay-300 { animation-delay: 0.30s !important; transition-delay: 0.30s !important; }
.delay-350 { animation-delay: 0.35s !important; transition-delay: 0.35s !important; }
.delay-400 { animation-delay: 0.40s !important; transition-delay: 0.40s !important; }
.delay-450 { animation-delay: 0.45s !important; transition-delay: 0.45s !important; }
.delay-500 { animation-delay: 0.50s !important; transition-delay: 0.50s !important; }
.delay-550 { animation-delay: 0.55s !important; transition-delay: 0.55s !important; }
.delay-600 { animation-delay: 0.60s !important; transition-delay: 0.60s !important; }
.delay-650 { animation-delay: 0.65s !important; transition-delay: 0.65s !important; }
.delay-700 { animation-delay: 0.70s !important; transition-delay: 0.70s !important; }
.delay-750 { animation-delay: 0.75s !important; transition-delay: 0.75s !important; }
.delay-800 { animation-delay: 0.80s !important; transition-delay: 0.80s !important; }
.delay-850 { animation-delay: 0.85s !important; transition-delay: 0.85s !important; }
.delay-900 { animation-delay: 0.90s !important; transition-delay: 0.90s !important; }
.delay-950 { animation-delay: 0.95s !important; transition-delay: 0.95s !important; }
.delay-1000 { animation-delay: 1.00s !important; transition-delay: 1.00s !important; }

/* ============================================================
   11. تأثيرات إضافية
   ============================================================ */

/* وميض عند الظهور */
.blink-in {
    animation: blinkIn 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes blinkIn {
    0% { opacity: 0; }
    50% { opacity: 0.3; transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1); }
}

/* قفزة عند الظهور */
.bounce-in {
    animation: bounceIn 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* ============================================================
   12. متغيرات CSS للتخصيص السريع
   ============================================================ */
:root {
    --reveal-duration: 0.8s;
    --reveal-distance: 50px;
    --reveal-scale: 0.95;
    --reveal-easing: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ============================================================
   13. تحسينات للأجهزة المحمولة
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .reveal-page,
    .fade-up,
    .fade-scale,
    .fade-left,
    .fade-right,
    .fade-rotate,
    .fade-down,
    .scroll-reveal,
    .scroll-reveal-left,
    .scroll-reveal-right,
    .scroll-reveal-scale,
    .scroll-reveal-rotate,
    .blink-in,
    .bounce-in {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 768px) {
    .reveal-page {
        transform: translateY(30px);
    }
    
    .fade-up {
        transform: translateY(25px);
    }
    
    .fade-left,
    .fade-right {
        transform: translateX(30px);
    }
    
    .scroll-reveal {
        transform: translateY(40px);
    }
    
    .scroll-reveal-left {
        transform: translateX(-40px);
    }
    
    .scroll-reveal-right {
        transform: translateX(40px);
    }
}