/* ===== Scroll Reveal - base（記事コピペ用と同内容） ===== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transition-property: opacity, transform, filter, clip-path;
    transition-duration: 0.7s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0s;
    will-change: opacity, transform;
  }

  .reveal.is-inview {
    opacity: 1;
    transform: none;
    filter: none;
    /* clip-path は none にしない（clip 系のトランジションが死ぬため。終了値は各バリエーション側で指定） */
  }

  .reveal--fade { transform: none; }
  .reveal--up { transform: translateY(32px); }
  .reveal--down { transform: translateY(-32px); }
  .reveal--left { transform: translateX(-40px); }
  .reveal--right { transform: translateX(40px); }

  .reveal--scale { transform: scale(0.88); }
  .reveal--zoomout { transform: scale(1.12); }
  .reveal--blur { filter: blur(12px); transform: translateY(12px); }
  .reveal--rotate { transform: rotate(-8deg) translateY(24px); }
  .reveal--flip {
    transform: perspective(800px) rotateX(72deg);
    transform-origin: center bottom;
  }

  .reveal--clip-up {
    opacity: 1;
    clip-path: inset(100% 0 0 0);
  }
  .reveal--clip-left {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
  }
  .reveal--circle {
    opacity: 1;
    clip-path: circle(0% at 50% 50%);
  }
  .reveal--clip-up.is-inview,
  .reveal--clip-left.is-inview {
    clip-path: inset(0 0 0 0);
  }
  .reveal--circle.is-inview {
    clip-path: circle(75% at 50% 50%);
  }

  .reveal--wipe {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
  }
  .reveal--wipe.is-inview {
    clip-path: inset(0 0 0 0);
  }
  .reveal--kenburns > img {
    transform: scale(1.15);
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal--kenburns.is-inview > img {
    transform: scale(1);
  }

  .reveal--underline {
    opacity: 1;
    display: inline;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 2px;
    transition: background-size 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal--underline.is-inview {
    background-size: 100% 2px;
  }

  .reveal--stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal--stagger.is-inview > *:nth-child(1) { transition-delay: 0.05s; }
  .reveal--stagger.is-inview > *:nth-child(2) { transition-delay: 0.12s; }
  .reveal--stagger.is-inview > *:nth-child(3) { transition-delay: 0.19s; }
  .reveal--stagger.is-inview > *:nth-child(4) { transition-delay: 0.26s; }
  .reveal--stagger.is-inview > *:nth-child(5) { transition-delay: 0.33s; }
  .reveal--stagger.is-inview > *:nth-child(6) { transition-delay: 0.40s; }
  .reveal--stagger.is-inview > * {
    opacity: 1;
    transform: none;
  }

  .reveal--lines > * {
    opacity: 0;
    transform: translateY(1em);
    transition:
      opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .reveal--lines.is-inview > *:nth-child(1) { transition-delay: 0.05s; }
  .reveal--lines.is-inview > *:nth-child(2) { transition-delay: 0.15s; }
  .reveal--lines.is-inview > *:nth-child(3) { transition-delay: 0.25s; }
  .reveal--lines.is-inview > *:nth-child(4) { transition-delay: 0.35s; }
  .reveal--lines.is-inview > * {
    opacity: 1;
    transform: none;
  }

  .reveal--delay-1 { transition-delay: 0.1s; }
  .reveal--delay-2 { transition-delay: 0.2s; }
  .reveal--delay-3 { transition-delay: 0.35s; }
  .reveal--delay-4 { transition-delay: 0.5s; }

  .reveal--fast { transition-duration: 0.4s; }
  .reveal--slow { transition-duration: 1.1s; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--stagger > *,
  .reveal--lines > *,
  .reveal--kenburns > img {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}