/* 공통 애니메이션 정의 */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* === Phase 1 (cycle 26) — Alert / Urgency keyframes === */

/* badge-urgent (충전요청/환전요청): danger 강한 pulse */

@keyframes alert-pulse-urgent {
    0%, 100% {
        box-shadow: var(--motion-alert-pulse-urgent-shadow-rest);
    }
    50% {
        box-shadow: var(--motion-alert-pulse-urgent-shadow-peak);
    }
}

/* badge-attention (신규가입/고객센터/실시간 채팅): warning 부드러운 pulse */

@keyframes alert-pulse-attention {
    0%, 100% {
        box-shadow: var(--motion-alert-pulse-attention-shadow-rest);
    }
    50% {
        box-shadow: var(--motion-alert-pulse-attention-shadow-peak);
    }
}

/* 늘 떠 있는 배지(사이드바 충전·환전 요청 등, 상단 채팅)용 — 위 펄스와 같은 퍼짐을 배지 뒤 ::after 의
   transform·opacity 로만 그린다. box-shadow 를 움직이면 창마다 1초에 60번 다시 그려서, 창을 여러 개 띄우면
   화면이 끊겼다(10-22 여왕벌, 5초 동안 다시 그리기 1.2초 → 0). 배율은 배지 크기에 맞춰 쓰는 쪽이 정한다. */

@keyframes alert-ring {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(var(--alert-ring-scale-x, 1.5), var(--alert-ring-scale-y, 1.5)); /* 배율을 안 정한 배지도 고리가 보이게 */
        opacity: 0;
    }
}

/* fadeIn + 위로 슬라이드 (많은 컴포넌트에서 사용) */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* slideIn X축 버전 (수평 슬라이드) */

@keyframes slideInX {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* === Micro Interaction Layer: keyframes === */

@keyframes micro-fade-slide-down {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes micro-pop-in {
    from {
        opacity: 0.72;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes micro-modal-in {
    from {
        opacity: 0.72;
        transform: translateY(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes micro-keyboard-locator {
    from {
        opacity: 0;
        transform: scale(0.985);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* === End Micro Interaction Layer === */

/* [Phase 7A] 스켈레톤 shimmer — pulse보다 프리미엄 로딩 경험 */

@keyframes shimmer {
    from {
        background-position: -200% 0;
    }

    to {
        background-position: 200% 0;
    }
}

/* [Phase 7A] 페이지 콘텐츠 진입 — 부드러운 등장 */

@keyframes contentEnter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* [Phase 7A] 버튼 클릭 pulse — ripple 대안 */

@keyframes clickPulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-primary-500) 40%, transparent);
    }

    70% {
        box-shadow: 0 0 0 8px transparent;
    }

    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

/* ========================================
   Reduced Motion — 접근성 (A11Y)
   [Sprint 1] prefers-reduced-motion 지원

   모든 애니메이션/전환을 0.01ms로 축소하여
   모션 감도가 있는 사용자에게 시각적 편의 제공.
   specificity 기반 override — !important 미사용 (RG-2 준수).
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-short: 0.01ms;       /* T679 — 신규 토큰 reduced-motion 정합 */
        --duration-fast: 0.01ms;
        --duration-base: 0.01ms;
        --duration-normal: 0.01ms;
        --duration-emphasized: 0.01ms;  /* T679 */
        --duration-slow: 0.01ms;
        --transition-all: all 0.01ms var(--ease-in-out);
        --transition-colors: background-color 0.01ms var(--ease-in-out),
                             color 0.01ms var(--ease-in-out),
                             border-color 0.01ms var(--ease-in-out);
        --transition-base: all 0.01ms ease-out;
        --transition-transform: transform 0.01ms ease-out;     /* T679 */
        --transition-opacity: opacity 0.01ms ease-out;         /* T679 */
        --transition-shadow: box-shadow 0.01ms ease-out;       /* T679 */
        --transition-emphasized: 0.01ms ease-out;              /* T679 */
        --micro-duration-fast: 0.01ms;
        --micro-duration-base: 0.01ms;
        --micro-duration-emphasized: 0.01ms;
    }

    /* Keyframe 애니메이션 즉시 완료 */
    *, *::before, *::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        transition-duration: 0.01ms;
    }
}