/* ==========================================================================
   Kiosk Transitions & Micro-interactions
   依賴: kiosk-modern.css (--km-* variables)
   ========================================================================== */

/* ------------------------------------------------------------------
   1. Page Transitions — 轉場動畫
   ------------------------------------------------------------------ */

/* Splash: 防 FOUC */
body:not(.km-page-ready) {
    opacity: 0;
}
body.km-page-ready {
    transition: opacity 200ms ease;
    opacity: 1;
}

/* 退場 */
.km-page-exit {
    animation: km-exit 250ms ease forwards;
    pointer-events: none;
}
.km-page-exit[data-transition="forward"] {
    animation-name: km-exit-left;
}
.km-page-exit[data-transition="back"] {
    animation-name: km-exit-right;
}

@keyframes km-exit {
    to { opacity: 0; transform: scale(0.96); filter: blur(4px); }
}
@keyframes km-exit-left {
    to { opacity: 0; transform: translateX(-30px) scale(0.97); }
}
@keyframes km-exit-right {
    to { opacity: 0; transform: translateX(30px) scale(0.97); }
}

/* 進場 */
.km-page-enter {
    animation: km-enter 300ms ease both;
}

@keyframes km-enter {
    from { opacity: 0; transform: scale(1.02); }
    to   { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------------
   2. Ripple 波紋效果
   ------------------------------------------------------------------ */

.km-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: km-ripple-expand 500ms ease-out forwards;
    pointer-events: none;
}

@keyframes km-ripple-expand {
    to { transform: scale(2.5); opacity: 0; }
}

/* ------------------------------------------------------------------
   3. Price Counter 價格跳動
   ------------------------------------------------------------------ */

.km-counter-up {
    animation: km-counter-increase 300ms ease;
}
.km-counter-down {
    animation: km-counter-decrease 300ms ease;
}

@keyframes km-counter-increase {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-4px) scale(1.1); color: var(--km-success); }
    100% { transform: translateY(0) scale(1); }
}
@keyframes km-counter-decrease {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(4px) scale(0.95); color: var(--km-error); }
    100% { transform: translateY(0) scale(1); }
}

/* ------------------------------------------------------------------
   4. Progress Bar 進度條動畫
   ------------------------------------------------------------------ */

.progress-step.completed .step-circle {
    animation: km-pop 0.5s ease both;
}

.progress-line {
    position: relative;
    overflow: hidden;
}
.progress-line::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    width: 0;
    background: var(--km-accent);
    transition: width 600ms ease;
}
.progress-line.completed::after {
    width: 100%;
}

/* 當前步驟脈動 */
.progress-step.active .step-circle {
    animation: km-step-pulse 2s ease-in-out infinite;
}

@keyframes km-step-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--km-accent-light); }
    50%      { box-shadow: 0 0 0 8px transparent; }
}

/* ------------------------------------------------------------------
   5. Staggered Entry 瀑布式入場
   ------------------------------------------------------------------ */

.km-stagger-item {
    opacity: 0;
    transform: translateY(20px);
    animation: km-fadeIn var(--km-duration-normal) var(--km-ease) both;
}

/* ------------------------------------------------------------------
   6. Fly-to-Cart phantom 飛入購物車
   ------------------------------------------------------------------ */

.km-fly-phantom {
    position: fixed;
    border-radius: 12px;
    z-index: 9999;
    pointer-events: none;
    transition: all 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
    object-fit: cover;
}

/* ------------------------------------------------------------------
   7. Image Progressive Load 圖片漸進載入
   ------------------------------------------------------------------ */

.km-img-lazy {
    filter: blur(8px);
    transition: filter 300ms ease;
}
.km-img-lazy.loaded {
    filter: blur(0);
}

/* ------------------------------------------------------------------
   8. Skeleton Grid 商品骨架屏
   ------------------------------------------------------------------ */

.pm-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--km-space-4);
    padding: var(--km-space-4);
}
.pm-skeleton-card {
    background: var(--km-surface);
    border-radius: var(--km-radius-lg);
    padding: var(--km-space-3);
}

/* ------------------------------------------------------------------
   9. Payment Breathing 付款等待呼吸動畫
   ------------------------------------------------------------------ */

.km-breathe-amount {
    animation: km-amount-breathe 2s ease-in-out infinite;
}

@keyframes km-amount-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}

.km-float-icon {
    animation: km-float 2s ease-in-out infinite;
}

@keyframes km-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ------------------------------------------------------------------
   10. Common Keyframes 共用動畫
   ------------------------------------------------------------------ */

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

/* ------------------------------------------------------------------
   A11y: Reduced Motion 降級
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    body:not(.km-page-ready) { opacity: 1; }
    .km-page-exit,
    .km-page-enter,
    .km-stagger-item,
    .km-ripple,
    .km-counter-up,
    .km-counter-down,
    .km-breathe-amount,
    .km-float-icon,
    .km-fly-phantom,
    .km-img-lazy {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .progress-line::after {
        transition: none !important;
        width: 100%;
    }
    .progress-step.active .step-circle {
        animation: none !important;
    }
}

/* ------------------------------------------------------------------
   A11y: High Contrast 降級
   ------------------------------------------------------------------ */

@media (prefers-contrast: high) {
    .km-ripple { background: rgba(0, 0, 0, 0.2); }
    .km-fly-phantom { border: 2px solid #000; }
    .progress-line::after { background: #000; }
}