/* =========================================================
   Tech Journey
   animation.css
========================================================= */


/* =========================================================
   Reveal
========================================================= */

/*
 * JavaScriptで .is-visible が付かなくても
 * コンテンツ自体は表示されるようにする。
 */

.reveal {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


/*
 * JavaScriptが正常に動作した場合の
 * アニメーション用
 */

.reveal.reveal-ready {
    opacity: 0;
    transform: translateY(20px);
}


.reveal.reveal-ready.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   Hover
========================================================= */

a {
    transition:
        opacity 0.2s ease;
}


a:hover {
    opacity: 0.75;
}


/* =========================================================
   Reduced Motion
========================================================= */

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

    html {
        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}