/* ══════════════════════════════════════════════════════════════
   OZEE MOTION — تأثيرات ثلاثية الأبعاد وحركات فاخرة
   CSS خالص · صفر مكتبات · صفر كيلوبايت إضافي
   الوجهة: assets/css/motion.css
   ══════════════════════════════════════════════════════════════ */

/* ── 0) احترام من يعطّل الحركات ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ══ 1) ظهور تدريجي عند التمرير ══
   يعمل بلا جافاسكربت — animation-timeline مدعوم بالمتصفحات الحديثة،
   ومن لا يدعمه يرى المحتوى عاديًا بلا كسر. */
@supports (animation-timeline: view()) {
    .wrap .pc,
    .sec-head,
    .trust-item,
    .brand-card,
    .tw-card,
    .svc-item,
    .cm-work,
    .wg-card,
    .tr-card,
    .jb-card {
        animation: ozRise .7s cubic-bezier(.22, 1, .36, 1) both;
        animation-timeline: view();
        animation-range: entry 0% cover 26%;
    }
}
@keyframes ozRise {
    from { opacity: 0; transform: translateY(26px) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ══ 2) بطاقات المنتجات — عمق ثلاثي الأبعاد ══ */
.wrap .grid,
.products-grid,
.pgrid,
.wg-grid,
.tr-grid,
.jb-grid {
    perspective: 1400px;
}

.wrap .pc {
    transform-style: preserve-3d;
    transition:
        transform .34s cubic-bezier(.22, 1, .36, 1),
        box-shadow .34s ease,
        border-color .24s ease;
    will-change: transform;
}

@media (hover: hover) and (min-width: 900px) {
    .wrap .pc:hover {
        transform: translateY(-9px) rotateX(4deg) scale(1.022);
        box-shadow:
            0 22px 48px rgba(0, 0, 0, .18),
            0 0 0 1px rgba(244, 163, 0, .22);
    }
    /* الصورة تتقدّم للأمام داخل البطاقة */
    .wrap .pc .im img {
        transition: transform .46s cubic-bezier(.22, 1, .36, 1);
    }
    .wrap .pc:hover .im img {
        transform: scale(1.09) translateZ(24px);
    }
    /* السعر يبرز */
    .wrap .pc .pr {
        transition: transform .3s cubic-bezier(.22, 1, .36, 1);
    }
    .wrap .pc:hover .pr {
        transform: translateZ(16px) translateY(-2px);
    }
}

/* لمسة الجوال — استجابة فورية */
@media (hover: none) {
    .wrap .pc:active {
        transform: scale(.975);
        transition: transform .12s;
    }
}

/* ══ 3) لمعة ذهبية تمرّ على البطاقة ══ */
.wrap .pc .im {
    position: relative;
    overflow: hidden;
}
.wrap .pc .im::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 38%,
        rgba(255, 255, 255, .28) 50%,
        transparent 62%
    );
    transform: translateX(-120%);
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}
@media (hover: hover) {
    .wrap .pc:hover .im::after { transform: translateX(120%); }
}

/* ══ 4) البطل — عمق وحركة ══ */
.lux-hero {
    position: relative;
    overflow: hidden;
    perspective: 1000px;
}
.lux-hero > * { position: relative; z-index: 2; }

/* هالة ذهبية تتنفّس خلف البطل */
.lux-hero::before {
    content: '';
    position: absolute;
    inset-inline-end: -14%;
    top: -32%;
    width: 62%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(244, 163, 0, .30), transparent 66%);
    animation: ozBreathe 7s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes ozBreathe {
    0%, 100% { transform: scale(1) translate(0, 0);        opacity: .75; }
    50%      { transform: scale(1.16) translate(-3%, 3%);  opacity: 1; }
}

/* شعار البطل يطفو */
.lux-hero-logo,
.lux-hero img {
    animation: ozFloat 6s ease-in-out infinite;
}
@keyframes ozFloat {
    0%, 100% { transform: translateY(0)     rotate(0deg); }
    50%      { transform: translateY(-14px) rotate(1.6deg); }
}

/* عنوان البطل يدخل بعمق */
.lux-hero h1 {
    animation: ozHeroIn .95s cubic-bezier(.22, 1, .36, 1) both;
}
.lux-hero h1 span { display: inline-block; animation: ozHeroIn .95s .12s cubic-bezier(.22,1,.36,1) both; }
.lux-hero p       { animation: ozHeroIn .95s .22s cubic-bezier(.22,1,.36,1) both; }
.hero3            { animation: ozHeroIn .95s .32s cubic-bezier(.22,1,.36,1) both; }
.lux-hero-cta     { animation: ozHeroIn .95s .42s cubic-bezier(.22,1,.36,1) both; }
@keyframes ozHeroIn {
    from { opacity: 0; transform: translateY(28px) translateZ(-70px); }
    to   { opacity: 1; transform: none; }
}

/* ══ 5) البطاقات الثلاث — دوران ثلاثي الأبعاد ══ */
.three-ways { perspective: 1300px; }
.tw-card {
    transform-style: preserve-3d;
    transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s;
}
@media (hover: hover) and (min-width: 900px) {
    .tw-card:hover {
        transform: translateY(-8px) rotateY(-5deg) rotateX(4deg) scale(1.028);
        box-shadow: 0 26px 54px rgba(0, 0, 0, .3);
    }
    .tw-card .tw-ic {
        display: inline-block;
        transition: transform .4s cubic-bezier(.34, 1.5, .64, 1);
    }
    .tw-card:hover .tw-ic { transform: translateZ(34px) scale(1.22) rotate(-7deg); }
    .tw-card:hover .tw-n  { opacity: .3; transform: scale(1.12); }
    .tw-card .tw-n { transition: opacity .4s, transform .4s; }
}

/* ══ 6) بطاقات الخدمات الجانبية ══ */
.svc-item { transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s; }
.svc-item:hover { transform: translateY(-4px) scale(1.025); box-shadow: 0 12px 28px rgba(0,0,0,.2); }
.svc-item .svc-ic { transition: transform .34s cubic-bezier(.34,1.5,.64,1); display: inline-block; }
.svc-item:hover .svc-ic { transform: scale(1.2) rotate(-8deg); }

/* ══ 7) الأزرار — عمق ولمعة ══ */
.btn, button.btn, .lux-hero-cta {
    position: relative;
    overflow: hidden;
    transition: transform .18s cubic-bezier(.34,1.5,.64,1), box-shadow .22s, filter .18s;
}
.btn:hover, .lux-hero-cta:hover {
    transform: translateY(-2.5px);
    box-shadow: 0 10px 24px rgba(244, 163, 0, .32);
}
.btn:active, .lux-hero-cta:active { transform: translateY(0) scale(.975); }

.btn::after, .lux-hero-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.42) 50%, transparent 60%);
    transform: translateX(-130%);
    transition: transform .62s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}
.btn:hover::after, .lux-hero-cta:hover::after { transform: translateX(130%); }

/* ══ 8) القلب — نبضة عند الإعجاب ══ */
.wrap .pc .heart { transition: transform .24s cubic-bezier(.34,1.7,.64,1); }
.wrap .pc .heart:hover  { transform: scale(1.22); }
.wrap .pc .heart:active { transform: scale(.85); }
.wrap .pc .heart.on, .heart.active {
    animation: ozPop .48s cubic-bezier(.34,1.7,.64,1);
}
@keyframes ozPop {
    0%   { transform: scale(1); }
    32%  { transform: scale(1.42); }
    62%  { transform: scale(.9); }
    100% { transform: scale(1); }
}

/* ══ 9) الأقسام الدائرية ══ */
.cat-item .circle {
    transition: transform .3s cubic-bezier(.34,1.5,.64,1), border-color .24s, box-shadow .3s;
}
.cat-item:hover .circle {
    transform: translateY(-6px) scale(1.09) rotate(-4deg);
    box-shadow: 0 12px 26px rgba(244,163,0,.24);
}

/* ══ 10) البانرات — انزلاق ولمعة ══ */
.used-banner, .cars-banner, .re-banner,
.craft-banner, .map-banner, .trans-banner {
    position: relative;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.used-banner:hover, .cars-banner:hover, .re-banner:hover,
.craft-banner:hover, .map-banner:hover, .trans-banner:hover {
    transform: translateY(-4px) scale(1.008);
    box-shadow: 0 16px 36px rgba(0,0,0,.24);
}
.used-banner .ub-cta, .cars-banner .ub-cta, .re-banner .ub-cta,
.craft-banner .ub-cta, .map-banner .ub-cta, .trans-banner .ub-cta {
    transition: transform .28s cubic-bezier(.34,1.5,.64,1);
}
.used-banner:hover .ub-cta, .cars-banner:hover .ub-cta, .re-banner:hover .ub-cta,
.craft-banner:hover .ub-cta, .map-banner:hover .ub-cta, .trans-banner:hover .ub-cta {
    transform: translateX(-7px);
}

/* ══ 11) دخول الصفحة — انتقال ناعم ══ */
@view-transition { navigation: auto; }

body { animation: ozPageIn .42s cubic-bezier(.22,1,.36,1) both; }
@keyframes ozPageIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ══ 12) شريط الثقة ══ */
.trust-item { transition: transform .26s cubic-bezier(.22,1,.36,1), box-shadow .26s; }
.trust-item:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0,0,0,.12); }

/* ══ 13) الشعار — دوران عند المرور ══ */
.brand:hover .brand-logo { transform: rotate(90deg) scale(1.06); }
.brand .brand-logo { transition: transform .5s cubic-bezier(.34,1.4,.64,1); }

/* ══ 14) حقول الإدخال — تركيز ناعم ══ */
input:focus, select:focus, textarea:focus {
    transform: translateY(-1px);
    transition: transform .18s, border-color .18s, box-shadow .18s;
}

/* ══ 15) الصور — تحميل ناعم بدل قفزة ══ */
img { transition: opacity .34s ease; }
img[loading="lazy"] { opacity: 0; animation: ozImgIn .5s .05s forwards; }
@keyframes ozImgIn { to { opacity: 1; } }

/* ══ 16) شارة الخصم — نبض خفيف ══ */
.wrap .pc .disc { animation: ozBadge 2.6s ease-in-out infinite; }
@keyframes ozBadge {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.055); }
}

/* ══ 17) عناوين الأقسام — خط ذهبي ينمو ══ */
.sec-head h2::before {
    transition: height .34s cubic-bezier(.22,1,.36,1);
}
.sec-head:hover h2::before { height: 130% !important; }