/* =====================================================
   الحركات والمؤثرات - Animations
   ===================================================== */

/* ===== Keyframes ===== */
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-right {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

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

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

@keyframes glow-gold {
    0%, 100% {
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(212, 175, 55, 0.5);
    }
}

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

@keyframes shake-horizontal {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* ===== Animation Utility Classes ===== */
.animate-fade-in {
    animation: fade-in 0.6s ease-out both;
}

.animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out both;
}

.animate-fade-in-right {
    animation: fade-in-right 0.6s ease-out both;
}

.animate-fade-in-left {
    animation: fade-in-left 0.6s ease-out both;
}

.animate-scale-in {
    animation: scale-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animate-float {
    animation: float 4s ease-in-out infinite;
}

.animate-glow {
    animation: glow-gold 3s ease-in-out infinite;
}

/* Stagger delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }

/* ===== On-scroll reveal (handled by JS) ===== */
/* Default: visible — ensures content shows even if JS fails */
[data-reveal] {
    opacity: 1;
    transform: none;
    transition:
        opacity 800ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Only hide initially when JS is enabled */
/*
 * الإخفاء المسبق لا يشمل أوّل قسمين.
 *
 * كان كل قسم شفافاً حتى يعمل الجافاسكربت ويكشفه، فيرى الزائر فراغاً
 * بين وصول الصفحة وتنفيذ السكربت — وهذا ما يُقرأ «تعليقاً» وإن كان
 * الخادم قد أنهى عمله. والأسوأ أن أي خطأ في السكربت كان يترك الصفحة
 * فارغة تماماً. أوّل قسمين هما ما يراه الزائر أوّلاً، فيظهران فوراً.
 */
html.js-enabled [data-reveal]:not(.is-revealed):not(:nth-of-type(-n + 2)) {
    opacity: 0;
    transform: translateY(30px);
}

html.js-enabled [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}

[data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal-delay="300"] { transition-delay: 300ms; }
[data-reveal-delay="400"] { transition-delay: 400ms; }
[data-reveal-delay="500"] { transition-delay: 500ms; }
[data-reveal-delay="600"] { transition-delay: 600ms; }

/* ===== Loading Skeleton ===== */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-cream-warm) 25%,
        var(--color-cream-mist) 50%,
        var(--color-cream-warm) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s infinite;
    border-radius: var(--radius-md);
}

/* ===== Hover lift ===== */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

/* ===== Hover glow ===== */
.hover-glow {
    transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
    box-shadow: 0 0 0 1px var(--color-gold-soft), 0 8px 24px rgba(201, 169, 97, 0.25);
}

/* ===== Reduced motion preference ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ===== Page transition ===== */
.app-content {
    animation: fade-in 0.5s ease-out;
}

/* ===== Filter result animation ===== */
.filter-result-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.96);
    transition: all var(--transition-base);
}

.filter-result-visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
    transition: all var(--transition-base);
}

/* ===========================================
   حركة الفاصل — تُشغَّل عند الظهور لا دائماً
   ===========================================
   الزخرفة القديمة كانت تطفو بلا انقطاع (ornament-drift, 6s infinite)
   فتسحب المُركِّب طولَ عمر الصفحة. وهذه تُرسم مرّةً عند الدخول، ثمّ
   تبقى العقدة وحدها تتنفّس بنبضةٍ بطيئة لا تكاد تُرى.
   =========================================== */
.js-enabled .rule[data-reveal] .rule__line { transform: scaleX(0); }

.js-enabled .rule[data-reveal].is-revealed .rule__line {
    transform: scaleX(1);
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js-enabled .rule[data-reveal] .rule__node {
    opacity: 0;
    transform: scale(0.4) rotate(45deg);
}

.js-enabled .rule[data-reveal].is-revealed .rule__node {
    opacity: 1;
    transform: scale(1) rotate(45deg);
    transition: opacity 500ms ease 250ms, transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 250ms;
    animation: rule-node-breathe 4.5s ease-in-out 1.4s infinite;
}

@keyframes rule-node-breathe {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.40); }
    50%      { box-shadow: 0 0 0 6px rgba(201, 169, 97, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .js-enabled .rule[data-reveal] .rule__line,
    .js-enabled .rule[data-reveal].is-revealed .rule__line { transform: none; transition: none; }
    .js-enabled .rule[data-reveal] .rule__node,
    .js-enabled .rule[data-reveal].is-revealed .rule__node {
        opacity: 1; transform: rotate(45deg); transition: none; animation: none;
    }
}

/* يُرسم مرّةً عند تحميل الصفحة، ثمّ يسكن */
.js-enabled .hero__underline {
    transform: scaleX(0);
    animation: hero-underline-draw 1100ms cubic-bezier(0.22, 1, 0.36, 1) 320ms forwards;
}

@keyframes hero-underline-draw {
    to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .js-enabled .hero__underline { transform: none; animation: none; }
}