/* =========================================================================
   motion.css — 공용 모션(keyframes) + 움직임 줄이기 일괄 차단

   2026-10-23 신설 (시안 반영 계획 0단계 · 2단계에서 처음 사용).
   시안: https://claude.ai/artifact/Wh4vCnmoePcfH2oZYGbbBk — 시안은 GSAP으로 그렸지만
   실제 앱은 **새 의존성 없이 CSS 애니메이션**으로 같은 움직임을 낸다.

   규칙
   - 이름은 모두 `mo-` 접두사(기존 fadeIn·zoomPop·live-pulse 등과 충돌 방지 — 2026-10-23 grep 0건).
   - 이 파일은 keyframes와 재사용 클래스만 둔다. 어느 요소에 언제 붙일지는 각 화면 CSS/JS가 정한다.
   - 🔴 `prefers-reduced-motion: reduce`이면 이 파일을 싣는 화면의 **모든** 애니메이션·전환을 끈다.
     `animation-fill-mode: forwards`로 끝 상태를 잡아 둔 연출(득점자 카드 등)은 곧바로 끝 상태가 된다.

   사용 화면: apps/scoreboard · apps/remote-control · apps/overlay
   ========================================================================= */

/* 아래에서 위로 넘어오며 바뀌는 숫자(점수 넘김). 부모에 overflow:hidden 필요 */
@keyframes mo-flip-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* 한 번 튀기 */
@keyframes mo-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.14); }
    100% { transform: scale(1); }
}

/* 천천히 깜빡이는 상태 점 */
@keyframes mo-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* 가운데서 양옆으로 펼쳐짐 */
@keyframes mo-expand-x {
    from { transform: scaleX(0.2); opacity: 0; }
    to   { transform: scaleX(1);   opacity: 1; }
}

/* 왼쪽에서 미끄러져 들어옴 */
@keyframes mo-slide-in-left {
    from { transform: translateX(-1.5rem); opacity: 0; }
    to   { transform: translateX(0);       opacity: 1; }
}

/* 아래에서 올라옴 */
@keyframes mo-slide-up {
    from { transform: translateY(1rem); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* 위에서 내려옴(하프타임 띠) */
/* [2026-10-23 5단계] 단순 나타남(전술판 점선 자리·입력 모달 배경) */
@keyframes mo-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes mo-drop-down {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* 띠가 왼쪽 밖에서 오른쪽 밖으로 지나감(GOAL 연출) */
@keyframes mo-sweep {
    from { transform: translateX(-110%); }
    to   { transform: translateX(110%); }
}

/* 퍼지는 물결(+1 누름) */
@keyframes mo-ripple {
    from { transform: scale(0); opacity: 0.45; }
    to   { transform: scale(2.6); opacity: 0; }
}

/* 🔴 움직임 줄이기: 이 파일을 싣는 화면 전체에서 모션을 끈다 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}