/* ==========================================
   スクロールアニメーション 初期状態
   ========================================== */

/* JS有効時のみ非表示にする（フォールバック対応） */
.js-ready .js-fade-up,
.js-ready .js-fade-left,
.js-ready .js-fade-in,
.js-ready .js-scale-in,
.js-ready .js-stagger {
    opacity: 0;
    will-change: transform, opacity;
}

.js-ready .js-fade-up {
    transform: translateY(30px);
}

.js-ready .js-fade-left {
    transform: translateX(-40px);
}

.js-ready .js-scale-in {
    transform: scale(0.97);
}

/* アニメーション発火後 */
.js-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-fade-left.is-visible {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-fade-in.is-visible {
    opacity: 1;
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-scale-in.is-visible {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-stagger.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-ready .js-stagger {
    transform: translateY(24px);
}

/* story-emotional: ゆっくりとしたフェードイン */
.js-ready .story-emotional.js-fade-up {
    transform: translateY(20px);
}

.story-emotional.js-fade-up.is-visible {
    transition: opacity 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.story-emotional.js-fade-up.is-visible .story-emotional-line {
    animation: line-grow 1.2s 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes line-grow {
    from {
        transform: scaleY(0);
        opacity: 0;
    }
    to {
        transform: scaleY(1);
        opacity: 0.4;
    }
}

/* タイムラインの線 伸長アニメーション */
.js-ready .flow-step:not(:last-child)::after {
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}

.flow-step.is-visible:not(:last-child)::after {
    transform: scaleY(1);
}

/* ==========================================
   ホバーエフェクト
   ========================================== */

/* 画像のみホバーズーム（カード自体は動かさない） */

/* 画像ズーム */
.craft-card .img-wrap img,
.product-item .img-wrap img,
.story-img-box img,
.story-visual-mid img {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.craft-card:hover .img-wrap img,
.product-item:hover .img-wrap img,
.story-img-box:hover img,
.story-visual-mid:hover > img {
    transform: scale(1.05);
}

/* ボタン */
.btn {
    transition: opacity 0.3s;
}

.btn:hover {
    opacity: 0.85;
}

.btn:active {
    opacity: 0.7;
}

/* ==========================================
   Sticky ヘッダー
   ========================================== */
header {
    position: sticky !important;
    top: 0;
    transition: height 0.3s, box-shadow 0.3s, background-color 0.3s;
}

header.is-scrolled {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    background: rgba(255, 255, 255, 0.95);
}

header.is-scrolled .header-inner {
    height: 52px;
    transition: height 0.3s;
}

/* ==========================================
   スムーズスクロール
   ========================================== */
html {
    scroll-behavior: smooth;
}

/* ==========================================
   スクロールダウンインジケーター
   ========================================== */
.scroll-indicator {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    animation: bounce 2s infinite;
    opacity: 0.8;
}

.scroll-indicator span {
    display: block;
    width: 20px;
    height: 20px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(8px);
    }
    60% {
        transform: translateX(-50%) translateY(4px);
    }
}

/* ==========================================
   アクセシビリティ: モーション軽減
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    .js-ready .js-fade-up,
    .js-ready .js-fade-left,
    .js-ready .js-fade-in,
    .js-ready .js-scale-in,
    .js-ready .js-stagger {
        opacity: 1;
        transform: none;
    }

    .js-fade-up.is-visible,
    .js-fade-left.is-visible,
    .js-fade-in.is-visible,
    .js-scale-in.is-visible,
    .js-stagger.is-visible {
        transition: none;
    }

    .scroll-indicator {
        animation: none;
    }

    html {
        scroll-behavior: auto;
    }
}