/* animations.css — 점멸, 스무스 슬라이딩, 롤링 등 모든 애니메이션 명세 */

/* 비트 점멸 */
@keyframes led-flash {
    0% { opacity: 1; }
    100% { opacity: 0.15; }
}

.led.flash {
    animation: led-flash 0.12s var(--ease-smooth) forwards;
}

/* 타이머 완료 경고 점멸 */
@keyframes led-warning-blink {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 1; }
}

.led.warning {
    background: radial-gradient(circle at 35% 35%, #ff4d4d 0%, #a80000 100%) !important;
    box-shadow: 
        0 0 12px var(--led-red-glow), 
        0 0 4px var(--led-red-glow),
        inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
    animation: led-warning-blink 0.6s ease infinite;
}

/* 재생 단추 펄스 효과 */
@keyframes pulse-btn {
    0%, 100% { box-shadow: 0 4px 15px rgba(255, 102, 68, 0.25); }
    50% { box-shadow: 0 4px 25px rgba(255, 102, 68, 0.55); }
}

.btn-start-tap.playing {
    animation: pulse-btn 1.2s ease-in-out infinite;
}

/* 모드 패널 트랜지션 */
.mode-panel {
    transition: 
        opacity 0.25s var(--ease-smooth),
        transform 0.25s var(--ease-smooth);
}

.mode-panel.hidden {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    position: absolute;
}

.mode-panel.visible {
    opacity: 1;
    transform: translateY(0);
}

/* LCD 값 롤링 효과 */
.lcd-value-change-up {
    animation: roll-up 0.1s ease-out;
}

.lcd-value-change-down {
    animation: roll-down 0.1s ease-out;
}

@keyframes roll-up {
    from { transform: translateY(4px); opacity: 0.5; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes roll-down {
    from { transform: translateY(-4px); opacity: 0.5; }
    to { transform: translateY(0); opacity: 1; }
}