/* ==========================================================================
   animations.css - الاتحاد العربي للإعلام السياحي
   نظام الأنيميشنز الموحد
   ========================================================================== */

/* --------------------------------------------------------------------------
   أنيميشنز الظهور (Entrance) - @keyframes
   -------------------------------------------------------------------------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(30px); /* RTL: من اليمين */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-30px); /* RTL: من اليسار */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --------------------------------------------------------------------------
   أنيميشنز النظام (System) - @keyframes
   -------------------------------------------------------------------------- */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

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

/* --------------------------------------------------------------------------
   كلاسات Scroll Animations - تُفعّل عبر Intersection Observer
   -------------------------------------------------------------------------- */

/* الحالة الأولية - مخفي */
.animate-on-scroll {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
    will-change: opacity, transform;
}

/* fadeInUp */
.animate-on-scroll[data-animation="fadeInUp"] {
    transform: translateY(30px);
}

/* fadeInLeft (RTL: من اليمين) */
.animate-on-scroll[data-animation="fadeInLeft"] {
    transform: translateX(30px);
}

/* fadeInRight (RTL: من اليسار) */
.animate-on-scroll[data-animation="fadeInRight"] {
    transform: translateX(-30px);
}

/* scaleIn */
.animate-on-scroll[data-animation="scaleIn"] {
    transform: scale(0.9);
}

/* الحالة النشطة - ظاهر */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* مدد مخصصة */
.animate-on-scroll[data-duration="fast"] {
    transition-duration: 0.3s;
}

.animate-on-scroll[data-duration="slow"] {
    transition-duration: 0.8s;
}

/* --------------------------------------------------------------------------
   أنيميشنز التفاعل (Interaction)
   -------------------------------------------------------------------------- */

/* رفع البطاقة عند hover */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

/* توهج الأزرار عند hover */
.hover-glow {
    transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
}

/* خط تحت الرابط عند hover */
.hover-underline {
    position: relative;
    display: inline-block;
}

.hover-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-base);
}

.hover-underline:hover::after {
    width: 100%;
}

/* ضغطة عند click */
.press-down:active {
    transform: scale(0.97);
    transition: transform 0.1s ease-in;
}

/* تكبير الصورة عند hover */
.hover-zoom:hover img {
    transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   Accessibility - احترام تفضيلات المستخدم
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hover-lift:hover {
        transform: none;
    }

    .hover-underline::after {
        transition: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}