/* ============================================================
   ios-anim.css — 全站 iOS 風 micro-interaction
   - 點擊 spring scale + ripple
   - smooth scroll + overscroll spring
   - 移除藍框 tap highlight
   - 尊重 prefers-reduced-motion
   ============================================================ */

html { scroll-behavior: smooth; }
body { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }

* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* 通用按鈕 / tab / chip / 卡片 hover 同 active 嘅 spring 反應 */
button,
.tab,
.kind,
.chip,
.card,
.row-card,
.btn,
[role="button"],
a.btn,
.toggle,
.icon-btn {
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1),
              box-shadow .18s ease,
              background-color .18s ease,
              opacity .18s ease;
  will-change: transform;
}

button:active,
.tab:active,
.kind:active,
.chip:active,
.card:active,
.row-card:active,
.btn:active,
[role="button"]:active,
a.btn:active,
.toggle:active,
.icon-btn:active {
  transform: scale(.96);
  transition-duration: .08s;
}

/* iOS-style ripple — 由 JS 注入 .ripple span */
.ios-ripple-host { position: relative; overflow: hidden; }
.ios-ripple-host > .ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, .35);
  transform: scale(0);
  animation: ios-ripple-anim .55s cubic-bezier(.4, 0, .2, 1) forwards;
  mix-blend-mode: overlay;
}
@keyframes ios-ripple-anim {
  to { transform: scale(2.4); opacity: 0; }
}

/* page transition — first paint fade-in */
@keyframes ios-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
body { animation: ios-page-in .32s cubic-bezier(.2, .8, .2, 1) both; }

/* Reduced motion — 全部關晒 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  body { animation: none !important; }
}

/* iPad/iOS 低 RAM lite-anim mode 兼容（同 r73 邏輯） */
html.lite-anim *,
html.lite-anim *::before,
html.lite-anim *::after {
  animation-duration: .001ms !important;
  transition-duration: .08s !important;
}
html.lite-anim body { animation: none !important; }