/* ========================================
   ANIMATIONS STYLES - Independent Animation Definitions
   アニメーション - 独立アニメーション定義群
   ======================================== */

/* ========== キャラクター・エフェクト系アニメーション ========== */

/* 「ぷちっ」の傾きアニメーション - 一回傾いて戻る */
@keyframes puchiShake {
    0%, 85%, 100% {
        transform: rotate(0deg);
    }
    12% {
        transform: rotate(-15deg);
    }
    16% {
        transform: rotate(-18deg);
    }
    20% {
        transform: rotate(-15deg);
    }
    26% {
        transform: rotate(0deg);
    }
}

/* モバイル版の傾きアニメーション - 一回傾いて戻る */
@keyframes puchiShakeMobile {
    0%, 85%, 100% {
        transform: rotate(0deg);
    }
    12% {
        transform: rotate(-12deg);
    }
    16% {
        transform: rotate(-15deg);
    }
    20% {
        transform: rotate(-12deg);
    }
    26% {
        transform: rotate(0deg);
    }
}

/* 文字スライドインアニメーション */
@keyframes titleCharSlide {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.5) rotate(10deg);
    }
    50% {
        opacity: 0.7;
        transform: translateY(-10px) scale(1.1) rotate(-5deg);
    }
    100% {
        opacity: 0.9;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

/* ========== 矢印・テキスト系アニメーション ========== */

/* 矢印パルス */
@keyframes arrowPulse {
    0%, 100% { transform: scaleY(1); opacity: 1; }
    50% { transform: scaleY(1.1); opacity: 0.8; }
}

/* テキストバウンス */
@keyframes textBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* 矢印ヘッドバウンス */
@keyframes arrowHeadBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.1); }
}

/* ========== ロゴ・UI系アニメーション ========== */

/* 3つのロゴの浮遊アニメーション */
@keyframes logoFloat1 {
    0%, 100% { transform: rotate(-10deg) scale(1.1) translateY(0); }
    50% { transform: rotate(-8deg) scale(1.15) translateY(-3px); }
}

@keyframes logoFloat2 {
    0%, 100% { transform: rotate(5deg) scale(1.0) translateY(0); }
    50% { transform: rotate(7deg) scale(1.05) translateY(-2px); }
}

@keyframes logoFloat3 {
    0%, 100% { transform: rotate(8deg) scale(1.05) translateY(0); }
    50% { transform: rotate(6deg) scale(1.1) translateY(-4px); }
}

/* ========== システム・プログレス系アニメーション ========== */

/* パルスアニメーション */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.2); }
}

/* バー成長アニメーション */
@keyframes barGrow {
    0% { height: 0; }
    100% { height: var(--height); }
}

/* プログレススピン */
@keyframes progressSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ウィジェット出現 */
@keyframes widgetAppear {
    0% { 
        opacity: 0; 
        transform: scale(0.3) translateY(20px); 
    }
    50% { 
        opacity: 0.7; 
        transform: scale(1.1) translateY(-5px); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}

/* ステータス点滅 */
@keyframes statusBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ステータス同期 */
@keyframes statusSync {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* カウント発光 */
@keyframes countGlow {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(78, 205, 196, 0.3); 
        transform: scale(1); 
    }
    50% { 
        box-shadow: 0 0 20px rgba(78, 205, 196, 0.8); 
        transform: scale(1.05); 
    }
}

/* ========== 装飾・エフェクト系アニメーション ========== */

/* 回転アニメーション（bubble_rotate風） */
@keyframes bubble_rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ナビゲーションボタン風アニメーション */
@keyframes navBtn {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(180deg); }
    100% { transform: translateY(0) rotate(360deg); }
}

/* SVG風アニメーション */
@keyframes svg {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(90deg); }
    50% { transform: scale(1.2) rotate(180deg); }
    75% { transform: scale(1.1) rotate(270deg); }
    100% { transform: scale(1) rotate(360deg); }
}

/* 色変更アニメーション */
@keyframes colorChange {
    0% { background-color: #ff6b6b; }
    25% { background-color: #4ecdc4; }
    50% { background-color: #45b7d1; }
    75% { background-color: #f9ca24; }
    100% { background-color: #ff6b6b; }
}

/* 円形アニメーション */
@keyframes circle {
    0% { 
        transform: translateY(0) rotate(0deg);
        border-radius: 50%;
        background-color: #ff6b6b;
    }
    25% { 
        transform: translateY(-20px) rotate(90deg);
        border-radius: 25% 75% 25% 75%;
        background-color: #4ecdc4;
    }
    50% { 
        transform: translateY(-40px) rotate(180deg);
        border-radius: 20% 80% 20% 80%;
        background-color: #45b7d1;
    }
    75% { 
        transform: translateY(-20px) rotate(270deg);
        border-radius: 25% 75% 25% 75%;
        background-color: #f9ca24;
    }
    100% { 
        transform: translateY(0) rotate(360deg);
        border-radius: 50%;
        background-color: #ff6b6b;
    }
}

/* 矢印アニメーション */
@keyframes arrow {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(10px); }
}

/* 複合変形アニメーション */
@keyframes complexTransform {
    0% { 
        transform: scale(1) rotate(0deg) translateX(0);
        opacity: 1;
        border-radius: 50%;
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    }
    25% { 
        transform: scale(1.2) rotate(90deg) translateX(20px);
        opacity: 0.8;
        border-radius: 25% 75% 25% 75%;
        background: linear-gradient(135deg, #4ecdc4, #45b7d1);
    }
    50% { 
        transform: scale(0.8) rotate(180deg) translateX(40px);
        opacity: 0.6;
        border-radius: 20% 80% 20% 80%;
        background: linear-gradient(225deg, #45b7d1, #f9ca24);
    }
    75% { 
        transform: scale(1.3) rotate(270deg) translateX(20px);
        opacity: 0.8;
        border-radius: 25% 75% 25% 75%;
        background: linear-gradient(315deg, #f9ca24, #ff6b6b);
    }
    100% { 
        transform: scale(1) rotate(360deg) translateX(0);
        opacity: 1;
        border-radius: 50%;
        background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    }
}