/* 
 * 介護ナイン - アニメーションスタイルシート
 * animations.css
 */

/* ========== 点滅アニメーション ========== */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 140, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 140, 0, 0);
    }
}

.pulse-animation {
    animation: pulse 1.5s infinite;
}

.pulse-animation:focus {
    animation: none;
    box-shadow: 0 0 5px rgba(255, 140, 0, 0.5);
}

.option-item.pulse-animation {
    transition: all 0.3s;
}

.option-item.pulse-animation:hover,
.option-item.selected {
    animation: none;
}

/* ========== フェードインアニメーション ========== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

/* ========== ページ切り替えアニメーション ========== */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

.slide-in-left {
    animation: slideInLeft 0.3s ease-out;
}

/* ========== ボタンアニメーション ========== */
@keyframes buttonPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.submit-button {
    animation: buttonPulse 2s infinite;
}

.submit-button:hover {
    animation: none;
}

/* ========== 入力フォーム強調アニメーション ========== */
@keyframes inputHighlight {
    0% {
        border-color: #ddd;
    }
    50% {
        border-color: #FF8C00;
    }
    100% {
        border-color: #ddd;
    }
}

.input-highlight {
    animation: inputHighlight 1.5s infinite;
}

.input-highlight:focus {
    animation: none;
    border-color: #FF8C00;
}

/* ========== ポップアップアニメーション ========== */
@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    70% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.popup-animation {
    animation: popIn 0.4s ease-out;
}

/* ========== ステップナビゲーションアニメーション ========== */
@keyframes stepActive {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.step-active-animation {
    animation: stepActive 0.5s ease-out;
}