/* スクロール演出の見た目（js/motion.js と対）

   .mo-on は JavaScript が付ける印。付いていないときは何も隠さないので、
   JavaScript が動かない環境でも中身はそのまま読める。 */

.mo-on .mo-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mo-on .mo-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* リンクカードは元々 hover で動くので、演出と喧嘩しないようにする */
.mo-on .link-card.mo-reveal {
    transition:
        opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 180ms ease;
}

@media (prefers-reduced-motion: reduce) {

    .mo-on .mo-reveal,
    .mo-on .mo-reveal.is-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}