[data-trigger] {
  --duration: .8s;
  --easing: ease-out;
  --property: opacity;

  transition: var(--duration) var(--easing);
  transition-property: var(--property);
}

[data-scrub] {
  --progress: 0;
}

[data-trigger="fadeIn"] {
  &[data-inview="false"] {
    opacity: 0;
  }

  &[data-inview="true"] {
    opacity: 1;
  }
}

[data-trigger="blurIn"] {
  --property: opacity, filter;

  &[data-inview="false"] {
    filter: blur(10px);
    opacity: 0;
  }

  &[data-inview="true"] {
    filter: blur(0);
    opacity: 1;
  }
}

[data-trigger="slideUpIn"] {
  --property: opacity, translate;

  &[data-inview="false"] {
    opacity: 0;
    translate: 0 3rem;
  }

  &[data-inview="true"] {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  [data-effect="parallax"] {
    --range: 300;
    --translate: calc((var(--range) * -1px) + (var(--range) * 2px) * var(--progress, 0));

    translate: 0 var(--translate);
  }

  [data-clip-item] {
    clip-path: inset(calc((1 - var(--progress)) * 30%));
  }

  [data-scrub="textClipIn"] {
    color: transparent;
    background-image: linear-gradient(90deg, #000 50%, #ccc 50%, #ccc 100%);
    background-position: calc(100% * (1 - var(--progress))) 0;
    background-clip: text;
    background-size: 200% 100%;
  }
}