/* ============================================================
   CAPONDEL – Text Assembly CSS  v2.0
   Companion to text-assembly.js v2.1.5
   - Defines transition properties (JS sets duration inline)
   - Works with gold-text (gradient on each item)
   - Re-triggerable with scroll (up + down)
   - Respects prefers-reduced-motion (softer, not disabled)
   ============================================================ */

/* ============================================================
   1. BASE — كل item يبدأ مبعثر ومخفي
   ============================================================ */
.assemble-item {
    display: inline-block;
    opacity: 0;
    transform:
        translate3d(var(--as-x, 0px), var(--as-y, 0px), 0)
        rotate(var(--as-r, 0deg))
        scale(var(--as-s, 1));
    filter: blur(var(--as-b, 0px));

    /* ⚠️ مهم جداً: 3 خصائص بترتيب معين — JS بيحدد الـ duration inline */
    transition-property: opacity, transform, filter;
    transition-duration: 900ms, 1215ms, 900ms;
    transition-timing-function:
        cubic-bezier(0.22, 1, 0.36, 1),
        cubic-bezier(0.22, 1, 0.36, 1),
        cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--as-i, 0) * 1ms);

    will-change: opacity, transform, filter;
    backface-visibility: hidden;
    transform-origin: center center;
}

/* ============================================================
   2. SPACES — المسافات بين الكلمات
   ============================================================ */
.assemble-space {
    display: inline-block;
    white-space: pre;
}

/* ============================================================
   3. TRIGGERED — العناصر بتتجمع في مكانها
   ============================================================ */
.assemble-ready .assemble-item {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    filter: blur(0);
}

/* ============================================================
   4. RESET GUARD — إلغاء الـ transition لحظة reset (يمنع flicker)
   ============================================================ */
.assemble-resetting .assemble-item {
    transition-duration: 0ms !important;
}

/* ============================================================
   5. MOBILE — stagger أسرع شوية
   ============================================================ */
@media (max-width: 768px) {
    .assemble-item {
        transition-duration: 700ms, 945ms, 700ms;
    }
}

/* ============================================================
   6. GOLD-TEXT — الخلفية الذهبية على كل item
   (بديل للنص الأصلي اللي بيفقد gradient بعد التقسيم)
   ============================================================ */
.gold-text.assemble-initialized {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: inherit !important;
    animation: none !important;
}

.gold-text.assemble-initialized .assemble-item {
    background: linear-gradient(90deg,
        var(--gold, #a87845) 0%,
        var(--gold, #a87845) 25%,
        #e8c9a0 45%,
        #f5deb3 50%,
        #e8c9a0 55%,
        var(--gold, #a87845) 75%,
        var(--gold, #a87845) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: goldShimmer 8s linear infinite;
}

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

/* ============================================================
   7. REDUCED MOTION — نشيل الـ blur بس ونسيب الـ translate
   (يعني الأنيميشن يفضل شغال، بس أهدى)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .assemble-item {
        filter: none !important;
    }

    /* gold text: بدون shimmer */
    .gold-text.assemble-initialized .assemble-item {
        animation: none !important;
        -webkit-text-fill-color: #c49a68 !important;
        color: #c49a68 !important;
        background: none !important;
    }
}