/* ============================================================
   SWELL Custom - animations.css
   主婦でもできるAI アニメーション定義
   ============================================================ */

/* ティッカースクロール */
@keyframes ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* フェードイン（カテゴリタブ切替） */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

/* スクロールアニメーション */
.scroll-anim {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.scroll-anim.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* カードホバー */
.article-card,
.product-card,
.hero-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ボタンホバー */
.btn-primary,
.btn-secondary,
.buy-btn,
.follow-btn {
    transition: background 0.2s ease, color 0.2s ease;
}

/* ナビリンクホバー */
.site-nav a {
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

/* タブ切替 */
.cat-tab {
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
}

/* ヒーローカード */
.hero-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}