[data-trigger] {
  --duration: 0.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'] {
    filter: blur(10px);
    opacity: 0;
    translate: 0 2rem;
  }

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

[data-trigger='slideLeftIn'] {
  --property: opacity, transform;

  &[data-inview='false'] {
    filter: blur(20px);
    opacity: 0;
    transform: translateX(-2rem);
  }

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

[data-trigger='slideRightIn'] {
  --property: opacity, transform;

  &[data-inview='false'] {
    filter: blur(20px);
    opacity: 0;
    transform: translateX(2rem);
  }

  &[data-inview='true'] {
    filter: blur(0);
    opacity: 1;
    transform: translateX(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%;
  }
}

[data-trigger='about1'] {
  --property: opacity, translate;

  transition: filter 1s ease, opacity 1s ease, transform 1s ease;
  will-change: opacity, transform;

  &[data-inview='false'] {
    filter: blur(10px);
    opacity: 0;
    transform: translate(0, 3rem); /* translateに変更 */
  }

  &[data-inview='true'] {
    filter: blur(0);
    opacity: 1;
    transform: translate(0, 0);
  }
}

[data-trigger='about2'] {
  --property: opacity, translate;

  transition: filter 1s ease, opacity 1s ease, transform 1s ease;
  will-change: opacity, transform;

  &[data-inview='false'] {
    filter: blur(10px);
    opacity: 0;
    transform: translate(0, 3rem); /* translateに変更 */
  }

  &[data-inview='true'] {
    filter: blur(0);
    opacity: 1;
    transition-delay: 0.3s; /* 1秒後に開始 */
    transform: translate(0, 0);
  }
}

[data-trigger='about3'] {
  --property: opacity, translate;

  transition: filter 1s ease, opacity 1s ease, transform 1s ease;
  will-change: opacity, transform;

  &[data-inview='false'] {
    filter: blur(10px);
    opacity: 0;
    transform: translate(0, 3rem); /* translateに変更 */
  }

  &[data-inview='true'] {
    filter: blur(0);
    opacity: 1;
    transition-delay: 0.6s; /* 1秒後に開始 */
    transform: translate(0, 0);
  }
}

@media (width <= 768px) {
  [data-trigger='slideLeftIn'] {
    &[data-inview='false'] {
      transform: translateX(-15px);
    }
  }

  [data-trigger='slideRightIn'] {
    &[data-inview='false'] {
      transform: translateX(15px);
    }
  }
}