/* ============================================
   Site Motion Skinner · 动效预设
   强度维度：data-motion="off|normal|rich"
   风格维度：data-motion-style="basic|butterfly|spring|cinematic"
   ============================================ */

/* ---------- 风格包：CSS 变量定义 ---------- */
:root {
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-duration-fast: 180ms;
  --motion-duration-base: 300ms;
  --motion-duration-slow: 500ms;
  --motion-hover-lift: -2px;
}

/* butterfly：长 easeOut，丝滑 */
[data-motion-style='butterfly'] {
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-duration-base: 500ms;
  --motion-duration-slow: 800ms;
  --motion-hover-lift: -4px;
}

/* spring：快速回弹（配合 Motion JS 库） */
[data-motion-style='spring'] {
  --motion-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-duration-base: 250ms;
  --motion-hover-lift: -3px;
}

/* cinematic：慢入慢出，戏剧化 */
[data-motion-style='cinematic'] {
  --motion-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-duration-base: 700ms;
  --motion-duration-slow: 1000ms;
  --motion-hover-lift: -2px;
}

/* ---------- 无障碍基线：系统级减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- off：无动效 ---------- */
[data-motion='off'] *,
[data-motion='off'] *::before,
[data-motion='off'] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* 关闭背景漂浮 */
[data-motion='off'] [class*='animate-drift'],
[data-motion='off'] [class*='animate-float'],
[data-motion='off'] [class*='animate-pulse-glow'] {
  animation: none !important;
}

/* Reveal / route-fade 直接显示 */
[data-motion='off'] .reveal,
[data-motion='off'] .route-fade {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* expand-panel 立即展开 */
[data-motion='off'] .expand-panel {
  transition: none !important;
}

/* pressable 保留颜色反馈，仅去掉缩放 */
[data-motion='off'] .pressable:active {
  transform: none !important;
}

/* 禁用 View Transitions 圆形扩散 */
[data-motion='off']::view-transition-new(root) {
  animation: none !important;
  clip-path: none !important;
}

/* ---------- rich：丰富动效 ---------- */
[data-motion='rich'] .route-fade {
  animation-duration: 0.7s;
}

[data-motion='rich'] .pressable {
  transition:
    transform 0.25s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

[data-motion='rich'] .card,
[data-motion='rich'] [class*='rounded-card'] {
  transition:
    transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

[data-motion='rich'] .card:hover,
[data-motion='rich'] [class*='rounded-card']:hover {
  transform: translateY(-3px);
}

/* ---------- View Transitions API：圆形扩散主题切换 ---------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  z-index: 1;
}
::view-transition-new(root) {
  z-index: 2;
  clip-path: circle(0 at var(--view-x, 50%) var(--view-y, 50%));
  animation: view-transition-circle 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes view-transition-circle {
  to {
    clip-path: circle(150% at var(--view-x, 50%) var(--view-y, 50%));
  }
}