/* HIDESIGN TOP / PROCESS 6工程 スクロールフェード */
/* JS未対応・JS無効の環境では通常表示したままにします。 */

html.hidesign-top-process-motion .top-process__steps .top-process__item {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
    transition-delay: var(--hidesign-step-delay, 0ms);
}

html.hidesign-top-process-motion .top-process__steps .top-process__item.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* PC・タブレットは01→06の順番でゆっくり登場 */
.top-process__item:nth-child(1) { --hidesign-step-delay: 0ms; }
.top-process__item:nth-child(2) { --hidesign-step-delay: 120ms; }
.top-process__item:nth-child(3) { --hidesign-step-delay: 240ms; }
.top-process__item:nth-child(4) { --hidesign-step-delay: 360ms; }
.top-process__item:nth-child(5) { --hidesign-step-delay: 480ms; }
.top-process__item:nth-child(6) { --hidesign-step-delay: 600ms; }

/* スマホは縦並びなので、各工程が画面に入った時点で自然に表示 */
@media (max-width: 800px) {
    .top-process__item { --hidesign-step-delay: 0ms; }
}

/* 端末側で「動きを減らす」が有効ならアニメーションしません */
@media (prefers-reduced-motion: reduce) {
    html.hidesign-top-process-motion .top-process__steps .top-process__item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ========================================
   TOP WORKS 3枚 スクロールフェード
======================================== */

/* JavaScript有効時のみ待機状態にする。未対応環境では通常表示。 */
html.hidesign-top-works-motion .top-works__list .top-works__card {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity 0.75s ease,
        transform 0.75s ease;
    transition-delay: var(--hidesign-works-delay, 0ms);
}

html.hidesign-top-works-motion .top-works__list .top-works__card.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* PCでは左から順に現れる */
.top-works__list .top-works__card:nth-child(1) { --hidesign-works-delay: 0ms; }
.top-works__list .top-works__card:nth-child(2) { --hidesign-works-delay: 160ms; }
.top-works__list .top-works__card:nth-child(3) { --hidesign-works-delay: 320ms; }

/* スマホは縦並びになるため、見えた画像をそれぞれ表示 */
@media (max-width: 800px) {
    .top-works__list .top-works__card {
        --hidesign-works-delay: 0ms;
    }
}

/* 「視差効果を減らす」設定を尊重 */
@media (prefers-reduced-motion: reduce) {
    html.hidesign-top-works-motion .top-works__list .top-works__card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}