/**
 * 汎用アニメーションCSS
 * 他のサイトでもコピペで使用可能
 * 依存関係: なし
 */

/* ==========================================
   1. マーカーラインアニメーション
   ========================================== */
.animate-marker-line {
    background: linear-gradient(transparent calc(100% - 10px), #c9b279 calc(100% - 10px));
    background-size: 0 100%;
    background-repeat: no-repeat;
    line-height: 1.2;
    transition: background-size 1s ease-in-out;
    display: inline-block;
    padding: 2px 4px 10px 4px;
    position: relative;
}

/* カスタマイズ用CSS変数 */
.animate-marker-line {
    --marker-color: #c9b279; /* マーカーの色 */
    --marker-height: 10px;    /* マーカーの高さ */
    --marker-duration: 1s;    /* アニメーション時間 */
}

/* CSS変数を使用したバージョン */
.animate-marker-line-custom {
    background: linear-gradient(
        transparent calc(100% - var(--marker-height, 10px)), 
        var(--marker-color, #c9b279) calc(100% - var(--marker-height, 10px))
    );
    background-size: 0 100%;
    background-repeat: no-repeat;
    line-height: 1.2;
    transition: background-size var(--marker-duration, 1s) ease-in-out;
    display: inline-block;
    padding: 2px 4px var(--marker-height, 10px) 4px;
}

.animate-marker-line.is-animated,
.animate-marker-line-custom.is-animated {
    animation: markerAnimation 1s ease-in-out forwards;
    background-size: 100% 100%;
}

@keyframes markerAnimation {
    0% {
        background-size: 0 100%;
    }
    100% {
        background-size: 100% 100%;
    }
}

/* ==========================================
   2. スライドインアニメーション
   ========================================== */
.animate-slide-in-left,
.animate-slide-in-right {
    opacity: 0;
    transition: all 0.8s ease-out;
}

.animate-slide-in-left {
    transform: translateX(-50px);
}

.animate-slide-in-right {
    transform: translateX(50px);
}

.animate-slide-in-left.is-animated,
.animate-slide-in-right.is-animated {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================
   3. フェードインアニメーション
   ========================================== */
.animate-fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.animate-fade-in.is-animated {
    opacity: 1;
}

/* ==========================================
   4. ズームインアニメーション
   ========================================== */
.animate-zoom-in {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.8s ease-out;
}

.animate-zoom-in.is-animated {
    opacity: 1;
    transform: scale(1);
}

/* ==========================================
   4-2. ズームインアップアニメーション（下から上へ）
   ========================================== */
.animate-zoom-in-up {
    opacity: 0;
    transform: scale(0.9) translateY(30px);
    transition: all 0.8s ease-out;
}

.animate-zoom-in-up.is-animated {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ==========================================
   5. 上からフェードイン
   ========================================== */
.animate-fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

.animate-fade-in-up.is-animated {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   6. 下からフェードイン
   ========================================== */
.animate-fade-in-down {
    opacity: 0;
    transform: translateY(-30px);
    transition: all 0.8s ease-out;
}

.animate-fade-in-down.is-animated {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   7. 遅延アニメーション用クラス
   ========================================== */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }
.delay-600 { transition-delay: 0.6s; }

/* ==========================================
   8. アニメーション速度調整用クラス
   ========================================== */
.animate-fast { transition-duration: 0.4s !important; }
.animate-normal { transition-duration: 0.8s !important; }
.animate-slow { transition-duration: 1.2s !important; }

/* ==========================================
   9. メニューセクション専用（オプション）
   ========================================== */
.animate-menu-left,
.animate-menu-right {
    opacity: 0;
    transition: all 0.8s ease-out;
}

.animate-menu-left {
    transform: translateX(-50px);
}

.animate-menu-right {
    transform: translateX(50px);
}

.animate-menu-left.is-animated,
.animate-menu-right.is-animated {
    opacity: 1;
    transform: translateX(0);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .animate-slide-in-left,
    .animate-slide-in-right {
        transform: translateX(0) translateY(20px);
    }
    
    .animate-slide-in-left.is-animated,
    .animate-slide-in-right.is-animated {
        transform: translateX(0) translateY(0);
    }
}