/* ============================================================
   Custom Scroll Animations for PageBuilder (AOS extensions)
   ------------------------------------------------------------
   These effects extend AOS (Animate On Scroll). An element with
   [data-aos="..."] starts in a hidden state; AOS adds the class
   ".aos-animate" when the element enters the viewport, which we
   transition to the visible state.

   IMPORTANT: All custom effects are TRANSITION-based (not one-shot
   keyframe `animation`) so they reverse cleanly when AOS removes
   ".aos-animate" on scroll-up (the global AOS.init uses mirror:true).

   AOS applies the inline transition-duration / transition-delay /
   transition-timing-function (from data-aos-duration / -delay /
   -easing) to each animated node, so duration, delay and easing
   settings are respected. We declare transition-property here so
   the right properties animate, plus a sensible fallback timing.

   Intensity / distance: the editor renders an inline
   `style="--aos-distance:<n>px"` on the animated wrapper. Translate
   based effects below use var(--aos-distance, 100px) so the chosen
   intensity controls how far the element travels.
   ============================================================ */

/* ---------- bounce-in : نطّ للداخل (scale overshoot) ---------- */
[data-aos="bounce-in"] {
    opacity: 0;
    transform: scale(0.3);
    transition-property: transform, opacity;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
[data-aos="bounce-in"].aos-animate {
    opacity: 1;
    transform: scale(1);
}

/* ---------- rotate-in : دخول مع دوران ---------- */
[data-aos="rotate-in"] {
    opacity: 0;
    transform: rotate(-200deg) scale(0.5);
    transform-origin: center center;
    transition-property: transform, opacity;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
}
[data-aos="rotate-in"].aos-animate {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* ---------- blur-in : ظهور من ضبابية ---------- */
[data-aos="blur-in"] {
    opacity: 0;
    filter: blur(20px);
    transition-property: filter, opacity;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
}
[data-aos="blur-in"].aos-animate {
    opacity: 1;
    filter: blur(0);
}

/* ---------- swing-in : تمايل / أرجحة (hangs from top, swings down) ---------- */
[data-aos="swing-in"] {
    opacity: 0;
    transform: rotate(-12deg) translateY(calc(-1 * var(--aos-distance, 60px)));
    transform-origin: top center;
    transition-property: transform, opacity;
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
[data-aos="swing-in"].aos-animate {
    opacity: 1;
    transform: rotate(0) translateY(0);
}

/* ---------- skew-in : دخول مع إمالة ---------- */
[data-aos="skew-in"] {
    opacity: 0;
    transform: skewX(20deg) translateX(var(--aos-distance, 100px));
    transition-property: transform, opacity;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
}
[data-aos="skew-in"].aos-animate {
    opacity: 1;
    transform: skewX(0) translateX(0);
}

/* ---------- flip-diagonal : انقلاب قطري ---------- */
[data-aos="flip-diagonal"] {
    opacity: 0;
    transform: perspective(1000px) rotate3d(1, 1, 0, -80deg);
    transform-origin: center center;
    transition-property: transform, opacity;
    transition-duration: 0.6s;
    transition-timing-function: ease-out;
    backface-visibility: hidden;
}
[data-aos="flip-diagonal"].aos-animate {
    opacity: 1;
    transform: perspective(1000px) rotate3d(1, 1, 0, 0deg);
}

/* ============================================================
   Intensity override for NATIVE AOS fade-* effects.
   ------------------------------------------------------------
   AOS's own fade-* initial transforms are a fixed 100px. By
   re-declaring the initial (non-animated) transform with
   var(--aos-distance, 100px) the intensity control also affects
   native fade directions. The fallback (100px) matches AOS's
   default, so blocks without an intensity setting behave exactly
   as before. The ".aos-animate" reset (transform:translate3d(0,0,0))
   has higher specificity in aos.css, so the visible state is
   unchanged.

   NOTE: native zoom-* and slide-* distances remain AOS-fixed
   (zoom uses scale, slide uses translate(100%)); intensity does
   NOT affect those — see report for details.
   ============================================================ */
[data-aos="fade-up"]         { transform: translate3d(0, var(--aos-distance, 100px), 0); }
[data-aos="fade-down"]       { transform: translate3d(0, calc(-1 * var(--aos-distance, 100px)), 0); }
[data-aos="fade-left"]       { transform: translate3d(var(--aos-distance, 100px), 0, 0); }
[data-aos="fade-right"]      { transform: translate3d(calc(-1 * var(--aos-distance, 100px)), 0, 0); }
[data-aos="fade-up-right"]   { transform: translate3d(calc(-1 * var(--aos-distance, 100px)), var(--aos-distance, 100px), 0); }
[data-aos="fade-up-left"]    { transform: translate3d(var(--aos-distance, 100px), var(--aos-distance, 100px), 0); }
[data-aos="fade-down-right"] { transform: translate3d(calc(-1 * var(--aos-distance, 100px)), calc(-1 * var(--aos-distance, 100px)), 0); }
[data-aos="fade-down-left"]  { transform: translate3d(var(--aos-distance, 100px), calc(-1 * var(--aos-distance, 100px)), 0); }