/**
 * Animation & Transition System
 *
 * Phase 1.5: Animation 변수화
 * 작성일: 2025-10-24
 * 업데이트: 2026-02-26 (TASK-040: 미사용 변수 31건 제거)
 *
 * 일관된 애니메이션 경험 제공
 */

:root {
    /* Transition Duration */
    --duration-short: 0.1s;             /* T679 Microinteraction (Material 3 Expressive) — micro-feedback (button press, focus ring) */
    --duration-fast: 0.15s;
    --duration-normal: 0.3s;
    --duration-emphasized: 0.4s;        /* T679 — modal/page transition, complex motion */
    --duration-slow: 0.5s;

    /* Transition Timing Functions */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* T679 (2026-05-10) Microinteraction polish — Material Design 3 Expressive Motion tokens */
    /* Reference: m3.material.io/styles/motion/easing-and-duration */
    --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);              /* primary expressive — UI 요소 등장 */
    --ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);   /* decelerate — UI 요소 정착 */
    --ease-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);   /* accelerate — UI 요소 사라짐 */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);           /* spring overshoot — playful feedback */
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);       /* gentle bounce — attention */

    /* Common Transitions */
    --transition-all: all var(--duration-normal) var(--ease-in-out);
    --transition-colors: background-color var(--duration-normal) var(--ease-in-out),
                         color var(--duration-normal) var(--ease-in-out),
                         border-color var(--duration-normal) var(--ease-in-out);
    --transition-base: all var(--duration-fast) ease-out;  /* default fallback; themes override */
    /* T679 — semantic transition tokens (성능: all 회피, specific properties만) */
    --transition-transform: transform var(--duration-fast) var(--ease-emphasized);
    --transition-opacity: opacity var(--duration-fast) var(--ease-out);
    --transition-shadow: box-shadow var(--duration-fast) var(--ease-out);
    --transition-emphasized: var(--duration-emphasized) var(--ease-emphasized);  /* duration + easing 결합 */

    /* === Micro Interaction Layer: tokens === */
    --micro-duration-fast: 120ms;
    --micro-duration-base: 160ms;
    --micro-duration-emphasized: 180ms;
    --micro-ease: cubic-bezier(.2, 0, .2, 1);
    --micro-ease-pop: cubic-bezier(.2, 0, 0, 1);
    /* === End Micro Interaction Layer === */

    /* Z-index Layers */
    --z-index-base: 0;
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-overlay: 1045;
    --z-index-max: 9999;
    --z-index-content-pop: 1080;  /* 페이지 콘텐츠 팝 크롬(회원 액션 툴바 열림/인라인 popover): column-visibility(≤1070) 위, 탑네비 아래 */
    --z-index-topnav: 1082;       /* 탑네비 바 + 드롭다운: 콘텐츠 팝 크롬(1080) 위, modal-backdrop(1085) 아래 */
    --z-index-local-raised: 3;
    --z-index-local-elevated: 4;
    --z-index-local-floating: 5;
    --z-index-local-scrim: 7;
    --z-index-local-matrix: 8;
    --z-index-inline-overlay: 10;
    --z-index-inline-sticky: 12;
    --z-index-toolbar-raised: 20;
    --z-index-toolbar-menu: 25;
    --z-index-sticky-action-bar: 50;
    --z-index-editor-resize-handle: 90;
    --z-index-table-sticky: 1010;
    --z-index-table-sticky-head: 1030;
    --z-index-overlay-under: 1040;
    --z-index-dropdown-floating: 1050;
    --z-index-dropdown-context: 1060;
    --z-index-column-visibility: 1065;
    --z-index-page-backdrop: 1069;
    --z-index-page-popup: 1070;
    --z-index-modal-backdrop: 1085;
    --z-index-modal: 1090;
    --z-index-swal-container: 1100;
    --z-index-editor-popup: 1200;
    --z-index-drag-indicator: 1999;
    --z-index-page-toast: 3000;
    --z-index-widget-backdrop: 3040;
    --z-index-widget-catalog: 3050;
    --z-index-widget-modal-backdrop: 3060;
    --z-index-widget-modal: 3070;
    --z-index-ai-helper-panel: 1076;  /* 페이지 플로팅 보조 UI: page-popup 위, topnav/modal 아래 */
    --z-index-ai-helper-tab: 1077;
    --z-index-skip-link: 10000;
    --z-index-template-modal-backdrop: 1091;  /* Bootstrap modal 위에 중첩될 수 있으나 SweetAlert 아래 */
    --z-index-template-modal: 1092;
    --z-index-toast-overlay: 99999;
    --z-index-toast-container: 100000;
    --z-index-select2-dropdown: 2147483647;

    /* === Phase 1 (cycle 26) — Alert / Urgency Animation tokens === */
    /* 사용처: 사이드바 alarm badge level별 시각 차별화 (badge-urgent / badge-attention) */
    --anim-alert-pulse-urgent: alert-pulse-urgent 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --anim-alert-pulse-attention: alert-pulse-attention 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* D군 값결정 (2026-07-23 사용자 승인·L1.2 hold 해제): dark --transition-fast 커버리지 결손 보충 —
   default 동일값(150ms). 위치가 여기(01-design-tokens·정적 로드)여야 하는 이유:
   themes/dark/theme.css는 런타임 lazy-append라 02-foundations/reduced-motion.css의
   [data-theme="dark"] 0.01ms override(동일 특이성·source order 승부)를 이겨버림 — 실측으로 확정 */
[data-theme="dark"] {
    --transition-fast: 150ms var(--micro-ease);
}

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

@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: 0 0 0 0 color-mix(in oklch, var(--color-danger-500, #dc2626) 60%, transparent);
    }
    50% {
        box-shadow: 0 0 0 8px color-mix(in oklch, var(--color-danger-500, #dc2626) 0%, transparent);
    }
}

/* badge-attention (신규가입/고객센터/실시간 채팅): warning 부드러운 pulse */
@keyframes alert-pulse-attention {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-warning-500, #f59e0b) 50%, transparent);
    }
    50% {
        box-shadow: 0 0 0 6px color-mix(in oklch, var(--color-warning-500, #f59e0b) 0%, transparent);
    }
}

/* 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-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;
    }
}