/* * assets/css/animations.css
 * نظام الحركة المتقدم (Premium Animation System) لموقع ناز القابضة
 */

:root {
    /* منحنيات الحركة الاحترافية (Modern Easing Curves) */
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* حركة ناعمة جداً وطبيعية */
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* ارتداد خفيف ومميز */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

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

/* الإعدادات الأساسية لجميع عناصر الظهور */
.reveal-up, 
.reveal-down, 
.reveal-left, 
.reveal-right, 
.reveal-scale, 
.reveal-blur {
    opacity: 0;
    will-change: opacity, transform, filter; /* تسريع الأداء عبر معالج الرسوميات GPU */
    transition: opacity 1s var(--ease-smooth), 
                transform 1s var(--ease-smooth), 
                filter 1s var(--ease-smooth);
}

/* الحالات الابتدائية (قبل الظهور) */
.reveal-up { transform: translateY(60px); }
.reveal-down { transform: translateY(-60px); }
.reveal-right { transform: translateX(60px); } /* لليمين (لأن الموقع RTL) */
.reveal-left { transform: translateX(-60px); } /* لليسار */
.reveal-scale { transform: scale(0.9); }
.reveal-blur { transform: translateY(40px) scale(0.98); filter: blur(15px); }

/* الحالات النشطة (عند وصول المستخدم إليها) */
.reveal-up.active, 
.reveal-down.active, 
.reveal-left.active, 
.reveal-right.active, 
.reveal-scale.active, 
.reveal-blur.active {
    opacity: 1;
    transform: translate(0) scale(1);
    filter: blur(0);
}

/* ==========================================================================
   2. تأثيرات التمرير المستمر (Continuous Animations) - للأيقونات والخلفيات
   ========================================================================== */

/* حركة طفو ناعمة (للأيقونات والصور) */
.anim-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* توهج ونبض (للأزرار وشارات التنبيه) */
.anim-pulse-glow {
    animation: pulseGlow 3s infinite var(--ease-smooth);
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(168, 133, 189, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(168, 133, 189, 0); }
    100% { box-shadow: 0 0 0 0 rgba(168, 133, 189, 0); }
}

/* دوران بطيء (لخلفيات الزخرفة أو التروس) */
.anim-spin-slow {
    animation: spinSlow 15s linear infinite;
}

@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   3. تأثيرات التفاعل عند مرور الماوس (Hover Interactions)
   ========================================================================== */

/* رفع البطاقة مع توهج زجاجي */
.hover-lift-glass {
    transition: all 0.4s var(--ease-spring);
}

.hover-lift-glass:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(54, 35, 93, 0.15);
    border-color: var(--accent-color, #a885bd);
}

/* تأثير لمعان معدني / زجاجي يمر عبر العنصر */
.hover-shine {
    position: relative;
    overflow: hidden;
}

.hover-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    transition: all 0.7s;
    z-index: 2;
}

.hover-shine:hover::before {
    left: 200%;
}

/* ==========================================================================
   4. تأثيرات النصوص الفاخرة للشركات القابضة (Premium Text Reveals)
   ========================================================================== */
.text-reveal-wrapper {
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
}

.text-reveal-inner {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    transition: transform 1.2s var(--ease-smooth), opacity 1.2s var(--ease-smooth);
    will-change: transform, opacity;
}

.text-reveal-wrapper.active .text-reveal-inner {
    transform: translateY(0);
    opacity: 1;
}

/* ==========================================================================
   5. الظهور المتسلسل للشبكات والبطاقات (Staggered Reveals)
   ========================================================================== */
/* أضف هذه الكلاسات للبطاقات داخل الـ Grid */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }

/* ==========================================================================
   6. تأثير رسم الحدود الاحترافي (Border Draw Hover)
   ========================================================================== */
.hover-border-draw {
    position: relative;
    background: var(--white, #fff);
    transition: color 0.3s;
    z-index: 1;
}

.hover-border-draw::before,
.hover-border-draw::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 2px solid transparent;
    box-sizing: border-box;
    z-index: -1;
}

/* التمركز من الزاوية العلوية اليمنى (للمواقع العربية) */
.hover-border-draw::before {
    top: 0;
    right: 0;
}

.hover-border-draw::after {
    bottom: 0;
    left: 0;
}

.hover-border-draw:hover::before {
    width: 100%;
    height: 100%;
    border-top-color: var(--secondary-color, #a34e9f);
    border-right-color: var(--secondary-color, #a34e9f);
    transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
}

.hover-border-draw:hover::after {
    width: 100%;
    height: 100%;
    border-bottom-color: var(--secondary-color, #a34e9f);
    border-left-color: var(--secondary-color, #a34e9f);
    transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
}

/* ==========================================================================
   7. الكشف الفاخر للصور (Image Mask Reveal)
   ========================================================================== */
.img-reveal-container {
    position: relative;
    overflow: hidden;
}

.img-reveal-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color, #36235d);
    transform-origin: left; /* من اليسار لليمين */
    transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 2;
}

.img-reveal-container img {
    transform: scale(1.2);
    transition: transform 1.5s var(--ease-smooth);
    width: 100%;
    display: block;
}

.img-reveal-container.active::after {
    transform: scaleX(0);
    transform-origin: right;
}

.img-reveal-container.active img {
    transform: scale(1);
}