[data-scroll-animation] {
  /* display: block;
  inline-size: fit-content;
  margin-inline: auto; */
}

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  [data-scroll-animation] {
    transition-property: var(--property);
    transition-timing-function: var(--easing);

    &[data-animated="true"]:not(:focus-within) {
      transition-delay: var(--delay);
      transition-duration: var(--duration);
    }
  }
}

/* ======================================================
// Clip - 端から表示する
// ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  [data-scroll-animation|="clip"] {
    --property: clip-path;
    --easing: cubic-bezier(0.19, 1, 0.22, 1);
    --delay: 0s;
    --duration: 1s;
    --stating-path: inset(0 100% 0 0);
    --end-path: inset(0 0 0 0);

    &:not([data-animated="true"]) {
      clip-path: var(--stating-path);
    }

    &[data-animated="true"] {
      clip-path: var(--end-path);
    }
  }
}

/* ======================================================
// Slide in with overlay - オーバーレイと一緒に表示する
// ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  [data-scroll-animation="clip-with-overlay"] {
    --overlay-color: var(--c-gray);
    --overlay-delay: var(--delay);
    --overlay-duration: var(--duration);
    --overlay-delay: calc(var(--overlay-duration) / 2);

    position: relative;

    &::after {
      position: absolute;
      inset: 0;
      content: "";
      background-color: var(--overlay-color);
      transition-timing-function: var(--easing);
      transition-property: var(--property);
      rotate: 180deg; /* アニメーションをvar(--stating-path)のみで完結させるために疑似要素を180度回転 */
    }

    &:not(:focus-within)::after {
      transition-duration: var(--duration);
      transition-delay: calc(var(--duration) / 2);
    }

    &:not([data-animated="true"])::after {
      clip-path: var(--end-path);
    }

    &[data-animated="true"]::after {
      clip-path: var(--stating-path);
    }
  }
}

/* ======================================================
// Fade in - ふわっと表示する
// ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  [data-scroll-animation="fade-in"] {
    --property: opacity;
    --easing: ease;
    --delay: 0s;
    --duration: 1s;

    &:not([data-animated="true"]) {
      opacity: 0;
    }
  }
}

/* ======================================================
// Fade in up - 下からふわっと表示する
// ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  :where([data-scroll-animation="fade-in-up"]) {
    --property: opacity, translate;
    --easing: ease-in-out;
    --delay: 0s;
    --duration: 1s;
    --starting-position: 40px;

    &:not([data-animated="true"]) {
      opacity: 0;
      translate: 0 var(--starting-position);
    }
  }
}

/* ======================================================
// Fade in up Fast - 下からふわっと表示する（高速版）
// ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  :where([data-scroll-animation="fade-in-up-fast"]) {
    --property: opacity, translate;
    --easing: ease-in-out;
    --delay: 0s;
    --duration: 0.5s;
    --starting-position: 40px;

    &:not([data-animated="true"]) {
      opacity: 0;
      translate: 0 var(--starting-position);
    }
  }
}

/* ======================================================
// Fade in down - 上からふわっと表示する
// ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  :where([data-scroll-animation="fade-in-down"]) {
    --property: opacity, translate;
    --easing: ease-in-out;
    --delay: 0s;
    --duration: 1s;
    --starting-position: 40px;

    &:not([data-animated="true"]) {
      opacity: 0;
      translate: 0 calc(-1 * var(--starting-position));
    }
  }
}

/* ======================================================
// Fade in left - 右からふわっと表示する
// ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  :where([data-scroll-animation="fade-in-left"]) {
    --property: opacity, translate;
    --easing: ease-in-out;
    --delay: 0s;
    --duration: 1s;
    --starting-position: 40px;

    &:not([data-animated="true"]) {
      opacity: 0;
      translate: var(--starting-position) 0;
    }
  }
}

/* ======================================================
// Fade in right - 左からふわっと表示する
// ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  :where([data-scroll-animation="fade-in-right"]) {
    --property: opacity, translate;
    --easing: ease-in-out;
    --delay: 0s;
    --duration: 1s;
    --starting-position: 40px;

    &:not([data-animated="true"]) {
      opacity: 0;
      translate: calc(-1 * var(--starting-position)) 0;
    }
  }
}

/* ======================================================
// Scale in - 拡大しながらふわっと表示する
// ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  :where([data-scroll-animation="scale-in"]) {
    --property: opacity, scale;
    --easing: cubic-bezier(0.19, 1, 0.22, 1);
    --delay: 0s;
    --duration: 1s;
    --starting-scale: 0.9;

    &:not([data-animated="true"]) {
      opacity: 0;
      scale: var(--starting-scale);
    }
  }
}

@layer defaults {
  :root {
    --c-black: #3a3a3a;
    --c-white: #f7f8f8;
    --c-gray: #676f79;
    --c-smoke: #ddd;
    --font-sans: "Helvetica Neue", "Segoe UI", "Hiragino Sans",
      "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    --gutter: max(5vi, 20px);
  }
}