/* ==========================================================
   CodeCaps — طبقة الحركة (Animations & Transitions)
   حركة فقط بدون أي تغيير في التصميم. تتوقف تلقائياً عند تفعيل
   «تقليل الحركة» في جهاز الزائر.
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {

    /* ---------- انتقال ناعم بين الصفحات (المتصفحات الداعمة) ---------- */
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: ccPageOut .22s ease both; }
    ::view-transition-new(root) { animation: ccPageIn .32s ease both; }

    /* ---------- دخول الواجهة الرئيسية ---------- */
    .hero-badge, .hero-title, .hero-desc, .hero-cta, .hero-stats-row {
        animation: ccRise .8s cubic-bezier(.22, 1, .36, 1) backwards;
    }
    .hero-badge { animation-delay: .05s; }
    .hero-title { animation-delay: .15s; }
    .hero-desc { animation-delay: .27s; }
    .hero-cta { animation-delay: .38s; }
    .hero-stats-row { animation-delay: .5s; }
    .hero-visual { animation: ccSlideSide 1s cubic-bezier(.22, 1, .36, 1) .3s backwards; }
    .hero-visual .terminal-mockup {
        animation: ccFloat 7s ease-in-out 1.4s infinite;
        transition: transform .4s ease-out, box-shadow .4s ease;
    }
    /* الميل يُطبّق فقط أثناء تحريك المؤشر فوق الواجهة حتى يبقى النص حاداً كما هو */
    .hero-visual .terminal-mockup.cc-tilting {
        transform: perspective(1000px) rotateX(var(--cc-rx, 0deg)) rotateY(var(--cc-ry, 0deg));
    }
    .hero-grid { transition: transform .6s ease-out; }
    .hero-grid.cc-tilting { transform: translate(var(--cc-gx, 0), var(--cc-gy, 0)); }

    /* ---------- عنوان الصفحات الداخلية ---------- */
    .page-hero h1 { animation: ccRise .7s cubic-bezier(.22, 1, .36, 1) .05s backwards; }
    .page-hero p { animation: ccRise .7s cubic-bezier(.22, 1, .36, 1) .18s backwards; }

    /* ---------- الظهور عند التمرير ---------- */
    .cc-js [data-cc-reveal] {
        transition: opacity .75s cubic-bezier(.22, 1, .36, 1), transform .75s cubic-bezier(.22, 1, .36, 1);
        transition-delay: var(--cc-delay, 0s);
    }
    .cc-js [data-cc-reveal]:not(.cc-in) { opacity: 0; transform: translateY(26px); }
    .cc-js [data-cc-reveal="zoom"]:not(.cc-in) { transform: scale(.96) translateY(14px); }
    .cc-js [data-cc-reveal="start"]:not(.cc-in) { transform: translateX(28px); }
    .cc-js [data-cc-reveal="end"]:not(.cc-in) { transform: translateX(-28px); }
    [dir="ltr"].cc-js [data-cc-reveal="start"]:not(.cc-in), .cc-js [dir="ltr"] [data-cc-reveal="start"]:not(.cc-in) { transform: translateX(-28px); }

    /* ---------- الأزرار ---------- */
    .btn:hover { transform: translateY(-2px); }
    .btn:active { transform: translateY(0) scale(.98); }
    .btn-primary { position: relative; overflow: hidden; isolation: isolate; }
    .btn-primary::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
        transform: translateX(-120%);
        pointer-events: none;
    }
    .btn-primary:hover::after { transition: transform .75s ease; transform: translateX(120%); }
    .btn i { transition: transform .25s ease; }
    .btn:hover .fa-arrow-left, .bento-link:hover i { transform: translateX(-4px); }
    [dir="ltr"] .btn:hover .fa-arrow-left { transform: translateX(4px) rotate(180deg); }

    /* ---------- إضاءة تتبع المؤشر داخل الكروت ---------- */
    .bento-card, .why-card, .vision-mission-card, .cta-bento-block { isolation: isolate; }
    .why-card, .vision-mission-card { position: relative; }
    .cc-spot::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: radial-gradient(380px circle at var(--cc-mx, 50%) var(--cc-my, 50%), var(--color-primary-glow), transparent 65%);
        opacity: 0;
        transition: opacity .35s ease;
        pointer-events: none;
    }
    .cc-spot:hover::before { opacity: 1; }

    /* أيقونات الخدمات وأرقام «لماذا نحن» */
    .bento-icon, .why-num, .vision-mission-icon { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), color .3s ease; }
    .bento-card:hover .bento-icon, .vision-mission-card:hover .vision-mission-icon { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
    .why-card:hover .why-num { transform: scale(1.12); color: var(--color-primary); }

    /* ---------- الأعمال: ظهور عند الفلترة ---------- */
    .portfolio-card.cc-pop { animation: ccPop .5s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: var(--cc-delay, 0s); }
    .portfolio-filter { transition: all .25s ease; }
    .portfolio-filter:active { transform: scale(.95); }

    /* ---------- روابط القوائم وأيقونات التواصل ---------- */
    .footer-links-list a { display: inline-block; transition: transform .25s ease, color .25s ease; }
    .footer-links-list a:hover { transform: translateX(-4px); }
    [dir="ltr"] .footer-links-list a:hover { transform: translateX(4px); }
    .footer-socials a { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .25s ease, color .25s ease; }
    .footer-socials a:hover { transform: translateY(-4px); }

    /* ---------- زر واتساب العائم: نبضة هادئة ---------- */
    .whatsapp-floating-bubble::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        box-shadow: 0 0 0 0 rgba(37, 211, 102, .45);
        animation: ccPulse 3.2s ease-out 2s infinite;
        pointer-events: none;
    }

    /* ---------- حقول النماذج ---------- */
    .contact-form input, .contact-form textarea, .booking-form-inner input, .booking-form-inner textarea, .comment-form input, .comment-form textarea {
        transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    }
    .contact-form input:focus, .contact-form textarea:focus, .booking-form-inner input:focus, .booking-form-inner textarea:focus {
        transform: translateY(-1px);
    }
    .time-slot { transition: all .2s ease; }
    .time-slot:not(.disabled):hover { transform: translateY(-2px); }
}

@keyframes ccRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes ccSlideSide { from { opacity: 0; transform: translateX(-40px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ccFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes ccPop { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ccPulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .45); } 70%, 100% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } }
@keyframes ccPageOut { to { opacity: 0; } }
@keyframes ccPageIn { from { opacity: 0; transform: translateY(8px); } }