/* ================================================================
   CAPONDEL – Living Page Motion System  v5.2.1
   Uses `translate` + `rotate` individual properties (no conflicts)
   Stronger, more visible animations
   Added: text-assembly reset guard
   Fix: particles allowed even with prefers-reduced-motion
   ================================================================ */

/* ============================================================
   0. KILL any leftover transforms on [data-parallax]
   ============================================================ */
[data-parallax],
[data-parallax-depth] {
    transform: none !important;
    will-change: auto !important;
}

/* ============================================================
   1. REVEAL SYSTEM (`translate` property – works with tilt & other transforms)
   ============================================================ */
.reveal {
    opacity: 0;
    translate: 0 80px;
    transition:
        opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
        translate 1s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, translate;
}

.reveal.from-top    { translate: 0 -80px; }
.reveal.from-bottom { translate: 0  80px; }
.reveal.from-left   { translate: -100px 0; }
.reveal.from-right  { translate:  100px 0; }

.reveal.revealed {
    opacity: 1;
    translate: 0 0;
}

/* Stagger children */
.stagger-children > * {
    opacity: 0;
    translate: 0 60px;
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.stagger-children.revealed > *:nth-child(1) { transition-delay: 0ms;   opacity: 1; translate: 0 0; }
.stagger-children.revealed > *:nth-child(2) { transition-delay: 120ms; opacity: 1; translate: 0 0; }
.stagger-children.revealed > *:nth-child(3) { transition-delay: 240ms; opacity: 1; translate: 0 0; }
.stagger-children.revealed > *:nth-child(4) { transition-delay: 360ms; opacity: 1; translate: 0 0; }
.stagger-children.revealed > *:nth-child(5) { transition-delay: 480ms; opacity: 1; translate: 0 0; }
.stagger-children.revealed > *:nth-child(6) { transition-delay: 600ms; opacity: 1; translate: 0 0; }

/* ============================================================
   2. HERO PARALLAX
   ============================================================ */
.hero {
    --hero-mx: 0px; --hero-my: 0px;
    --hero-cmx: 0px; --hero-cmy: 0px;
    --hero-scroll-y: 0px; --hero-scale-add: 0;
    --hero-content-y: 0px; --hero-content-opacity: 1;
}
.hero .hero-bg {
    transform:
        translate3d(var(--hero-mx), calc(var(--hero-my) + var(--hero-scroll-y)), 0)
        scale(calc(1.05 + var(--hero-scale-add)));
    will-change: transform;
    backface-visibility: hidden;
}
.hero .hero-content {
    transform:
        translate3d(var(--hero-cmx), calc(var(--hero-cmy) + var(--hero-content-y)), 0);
    opacity: var(--hero-content-opacity);
    will-change: transform, opacity;
    backface-visibility: hidden;
}
@media (max-width: 768px) {
    .hero .hero-bg { transform: translate3d(0, var(--hero-scroll-y), 0) scale(calc(1.02 + var(--hero-scale-add))); }
    .hero .hero-content { transform: translate3d(0, var(--hero-content-y), 0); }
}

/* ============================================================
   3. AMBIENT PARTICLES
   ============================================================ */
.ambient-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.ambient-particle {
    position: absolute;
    bottom: -20px;
    width: var(--p-size, 3px);
    height: var(--p-size, 3px);
    background: radial-gradient(circle, rgba(232, 201, 160, 1) 0%, rgba(196, 154, 104, 0.6) 40%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 8px rgba(196, 154, 104, 0.7);
    animation: particleRise var(--p-duration, 10s) linear infinite;
    animation-delay: var(--p-delay, 0s);
    will-change: transform, opacity;
}
@keyframes particleRise {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(0.5); }
    10%  { opacity: var(--p-opacity, 0.7); }
    50%  { transform: translate3d(var(--p-drift, 30px), -50vh, 0) scale(1); }
    90%  { opacity: var(--p-opacity, 0.7); }
    100% { opacity: 0; transform: translate3d(var(--p-drift-2, -30px), -110vh, 0) scale(0.6); }
}
.hero,
.signature-collection,
.story-section,
.advantages-section,
.quote-section,
.reviews-home-section,
.page-hero,
.sh-hero,
.sh-narrative,
.sh-gallery,
.sh-features,
.sh-process,
.sh-quote,
.sh-cta {
    position: relative;
}

/* ============================================================
   4. GOLD SHIMMER TEXT
   ============================================================ */
h1 .gold-text,
h2 .gold-text {
    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;
    will-change: background-position;
}
@keyframes goldShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* ============================================================
   5. CARD TILT (uses `rotate` property – no conflict with translate)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    .tilt-card {
        --tilt-x: 0deg;
        --tilt-y: 0deg;
        rotate: var(--tilt-y) var(--tilt-x);
        transition: rotate 150ms linear;
        will-change: rotate;
        position: relative;
        transform-style: preserve-3d;
    }
    .tilt-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(
            600px circle at var(--shine-x, 50%) var(--shine-y, 50%),
            rgba(196, 154, 104, 0.15),
            transparent 40%
        );
        opacity: 0;
        transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
        z-index: 10;
        border-radius: inherit;
    }
    .tilt-card:hover::after { opacity: 1; }
}

/* ============================================================
   6. MAGNETIC BUTTONS
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
    .magnetic {
        --mag-x: 0px;
        --mag-y: 0px;
        translate: var(--mag-x) var(--mag-y);
        transition: translate 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
        will-change: translate;
    }
}

/* ============================================================
   7. FLOAT
   ============================================================ */
.product-card.is-floating .product-image-link img {
    animation: cardImgFloat var(--float-duration, 6s) cubic-bezier(0.65, 0, 0.35, 1) infinite;
    animation-delay: var(--float-delay, 0s);
}
@keyframes cardImgFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-6px) scale(1.02); }
}

/* ============================================================
   8. MOBILE
   ============================================================ */
@media (max-width: 768px) {
    .reveal { translate: 0 50px; }
    .reveal.from-top { translate: 0 -50px; }
    .reveal.from-left { translate: -60px 0; }
    .reveal.from-right { translate: 60px 0; }
    .ambient-particle { box-shadow: 0 0 5px rgba(196, 154, 104, 0.5); }
    h1 .gold-text, h2 .gold-text { animation-duration: 10s; }
}

/* ============================================================
   9. REDUCED MOTION
   ⚠️ ملاحظة: .ambient-particle مش موجود هنا عن قصد
   عشان النقط الذهبية تفضل شغالة (بشكل أخف) حتى مع reduce
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .product-card.is-floating .product-image-link img,
    h1 .gold-text,
    h2 .gold-text { animation: none !important; }
    h1 .gold-text,
    h2 .gold-text {
        -webkit-text-fill-color: currentColor;
        color: inherit;
        background: none;
    }
    .reveal,
    .stagger-children,
    .stagger-children > * {
        opacity: 1 !important;
        translate: none !important;
        transition: none !important;
    }
}

/* ============================================================
   10. TEXT ASSEMBLY – Reset Guard
   يقتل الـ transition لحظة إعادة الضبط لمنع الـ flicker
   ============================================================ */
.assemble-resetting .assemble-item {
    transition-duration: 0ms !important;
}