/**!
 * CuaJs v0.0.5
 * @author phucbm
 * @homepage https://github.com/phucbm/cuajs
 * @license MIT 2024
 */
/****************************
 * Cua Animation: Fade-In
****************************/
/** FADE-IN **/
[data-cua-animate=fade-in] {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

[data-cua-animate=fade-in].cua-intersecting {
  opacity: 1;
}

/****************************
 * Cua Animation: Tilt
****************************/
.cua-wrapper {
  --scroll-velocity: 0; /* will be updated by js */
}

[data-cua-animate=tilt] {
  --tilt-max: 30; /* maximum tilt angle in degrees */
  --tilt-direction: 1; /* 1 or -1 to control direction */
  --tilt-sensitivity: 1; /* higher value = more sensitive to scroll */
  --skew: clamp(
          calc(-1 * var(--tilt-max) * 1deg),
          calc(var(--scroll-velocity) * var(--tilt-direction) * var(--tilt-sensitivity) * 1deg),
          calc(var(--tilt-max) * 1deg)
  );
  transform: skew(var(--skew), 0);
}

/****************************
 * Cua Animation: MASK
****************************/
/** MASK (clip-path) **/
[data-cua-animate=mask] {
  --tilt-range: 50px; /* can be 10% or 20px */
  --tilt-direction: -1; /* 1 or -1 to control direction */
  --tilt-max: 30; /* maximum tilt angle */
  --movement-neg: clamp(0, calc(-1 * var(--scroll-velocity) * var(--tilt-direction) / 40), var(--tilt-max));
  --movement-pos: clamp(0, calc(var(--scroll-velocity) * var(--tilt-direction) / 40), var(--tilt-max));
  clip-path: polygon(calc(0% + var(--tilt-range) * var(--movement-pos)) 0%, calc(100% - var(--tilt-range) * var(--movement-neg)) 0%, calc(100% - var(--tilt-range) * var(--movement-pos)) 100%, calc(0% + var(--tilt-range) * var(--movement-neg)) 100%);
}