/* =====================================================================
   呆宝工具箱 - 交互动效层
   ---------------------------------------------------------------------
   独立于 style.css，只负责「动」与「质感」，不改动任何布局尺寸。
   强度档位：克制。位移 2px，时长 120-260ms，缓动带轻微超调。

   设计原则：
   1. 只动 transform / opacity，避免触发重排与重绘
   2. prefers-reduced-motion 下全量降级（见文件末尾）
   3. 不引入任何第三方库
   ===================================================================== */

:root {
  /* 时长 */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --dur-enter: 240ms;

  /* 缓动：out = 收尾平滑；spring = 轻微超调，手感更弹 */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  /* 位移量 */
  --lift-sm: 1px;
  --lift: 2px;
  --lift-lg: 4px;

  /* 焦点光环 */
  --ring: 0 0 0 3px rgba(59, 130, 246, 0.14);
  --ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.14);
}

/* =====================================================================
   第 1 层 · 微交互
   ===================================================================== */

/* --- 按钮：hover 抬升 + active 回弹 --- */
.tool-btn,
.vat-submit,
.effect-toggle,
.theme-toggle {
  transition:
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}

.tool-btn:hover,
.vat-submit:hover {
  transform: translateY(calc(var(--lift) * -1));
  box-shadow: var(--shadow-lg);
}

.tool-btn:active,
.vat-submit:active {
  transform: translateY(0) scale(0.975);
  transition-duration: var(--dur-fast);
}

/* 键盘操作也要有反馈 */
.tool-btn:focus-visible,
.vat-submit:focus-visible,
.effect-toggle:focus-visible,
.theme-toggle:focus-visible,
.nav-item:focus-visible,
.sub-nav-item:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* 禁用态不参与动效 */
.tool-btn:disabled,
.vat-submit:disabled {
  transform: none;
  box-shadow: none;
}

/* --- 导航项：hover 抬升 + 图标微动 --- */
.nav-item,
.sub-nav-item {
  transition:
    transform var(--dur-base) var(--ease-spring),
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.nav-item:hover {
  transform: translateY(calc(var(--lift-sm) * -1));
}

.nav-icon {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-spring);
}

.nav-item:hover .nav-icon {
  transform: scale(1.16) rotate(-6deg);
}

.sub-nav-item:hover {
  transform: translateY(calc(var(--lift-sm) * -1));
}

/* --- 输入框：焦点光环 --- */
.tool-input,
.tool-select,
.tool-textarea,
.vat-input,
.vat-select {
  transition:
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.tool-input:focus,
.tool-select:focus,
.tool-textarea:focus,
.vat-input:focus,
.vat-select:focus {
  box-shadow: var(--ring);
}

/* --- 统计卡：hover 微抬升 --- */
.tool-stat {
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.tool-stat:hover {
  transform: translateY(calc(var(--lift) * -1));
  box-shadow: var(--shadow);
}

/* --- 滑块：拖动时 thumb 放大 --- */
input[type='range'] {
  transition: opacity var(--dur-base) var(--ease-out);
}

input[type='range']::-webkit-slider-thumb {
  transition: transform var(--dur-fast) var(--ease-spring);
}

input[type='range']:active::-webkit-slider-thumb {
  transform: scale(1.18);
}

input[type='range']::-moz-range-thumb {
  transition: transform var(--dur-fast) var(--ease-spring);
}

input[type='range']:active::-moz-range-thumb {
  transform: scale(1.18);
}

/* --- 水波纹 --- */
.ripple-host {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  opacity: 0.32;
  background: currentColor;
  animation: ripple-spread 520ms var(--ease-out) forwards;
}

@keyframes ripple-spread {
  to {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* =====================================================================
   第 2 层 · 转场与入场
   ===================================================================== */

/* 工具切换：容器淡入上移 */
.tool-enter {
  animation: tool-enter var(--dur-enter) var(--ease-out) both;
}

@keyframes tool-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 卡片错峰入场：子元素依次浮起 */
.stagger > * {
  animation: stagger-in var(--dur-enter) var(--ease-out) both;
  animation-delay: calc(var(--stagger-i, 0) * 40ms);
}

@keyframes stagger-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 首屏三段依次入场 */
.app-header,
.sub-nav-bar,
.app-main {
  animation: page-boot 420ms var(--ease-out) both;
}

.sub-nav-bar {
  animation-delay: 60ms;
}

.app-main {
  animation-delay: 110ms;
}

@keyframes page-boot {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- 导航滑动指示条 --- */
.nav-list,
.sub-nav-list {
  position: relative;
}

.nav-indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 2px;
  background: var(--primary);
  pointer-events: none;
  opacity: 0;
  transition:
    transform var(--dur-slow) var(--ease-out),
    width var(--dur-slow) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}

.nav-indicator.is-ready {
  opacity: 1;
}

.sub-nav-list .nav-indicator {
  height: 2px;
  background: var(--primary);
}

/* 顶部按钮组 */
.header-actions {
  display: flex;
  align-items: center;
  flex: none;
  margin-left: 16px;
}

.header-actions .effect-toggle {
  margin-left: 8px;
}

.theme-toggle {
  flex: none;
  width: 34px;
  height: 34px;
  margin-left: 8px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--text-main);
  background: var(--bg-page);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}

.theme-toggle:hover {
  transform: translateY(-1px);
}

/* =====================================================================
   第 3 层 · 数据反馈
   ===================================================================== */

/* 结果值出现：轻微缩放淡入 */
.value-pop {
  animation: value-pop 300ms var(--ease-spring) both;
}

@keyframes value-pop {
  0% {
    opacity: 0;
    transform: scale(0.94);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 校验失败：左右抖动 */
.shake {
  animation: shake 320ms var(--ease-inout) both;
}

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

/* 复制成功：打勾闪光 */
.copy-ok {
  position: relative;
  animation: copy-ok 620ms var(--ease-out) both;
}

@keyframes copy-ok {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

.copy-ok::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 500;
  color: #16a34a;
  background: var(--bg-card);
  border-radius: inherit;
  animation: copy-ok-mask 620ms var(--ease-out) both;
}

@keyframes copy-ok-mask {
  0%,
  55% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* 统计卡 3D 倾斜（由 JS 注入 transform） */
.tilt {
  transform-style: preserve-3d;
  will-change: transform;
}

.tool-tilt-wrap {
  perspective: 700px;
}

/* =====================================================================
   第 4 层 · 质感与氛围
   ===================================================================== */

/* --- 顶栏毛玻璃 + 滚动加深阴影 --- */
.app-header {
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  background: rgba(255, 255, 255, 0.82);
  transition:
    box-shadow var(--dur-slow) var(--ease-out),
    background-color var(--dur-slow) var(--ease-out);
}

.app-header.is-scrolled {
  box-shadow: 0 6px 20px -6px rgba(15, 23, 42, 0.14);
}

.sub-nav-bar {
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

/* 让内容层压在柔光之上，柔光只从卡片间隙透出，避免糊住文字 */
.app {
  position: relative;
  z-index: 1;
}

/* --- 跟随光标的柔光 --- */
#cursorGlow {
  position: fixed;
  top: 0;
  left: 0;
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.07) 0%, rgba(59, 130, 246, 0) 68%);
  transition: opacity 500ms var(--ease-out);
  will-change: transform;
}

#cursorGlow.is-active {
  opacity: 1;
}

/* --- 自定义滚动条 --- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.28);
  border: 3px solid transparent;
  border-radius: 8px;
  background-clip: content-box;
  transition: background-color var(--dur-base) var(--ease-out);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.5);
  background-clip: content-box;
}

/* --- 暗色模式：只覆盖变量，不改任何结构 --- */
html[data-theme='dark'] {
  --primary: #60a5fa;
  --primary-dark: #3b82f6;
  --accent: #fb923c;
  --accent-hover: #f97316;
  --text-main: #cbd5e1;
  --text-title: #f1f5f9;
  --text-muted: #94a3b8;
  --border: #334155;
  --bg-page: #0f172a;
  --bg-card: #1e293b;
  --bg-input: #172033;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.35);
  --ring: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

html[data-theme='dark'] .app-header {
  background: rgba(30, 41, 59, 0.82);
}

html[data-theme='dark'] #cursorGlow {
  background: radial-gradient(circle, rgba(96, 165, 250, 0.1) 0%, rgba(96, 165, 250, 0) 68%);
}

html[data-theme='dark'] .brand-icon,
html[data-theme='dark'] img {
  filter: brightness(0.92);
}

/* 主题切换瞬间给全页一层极短的过渡，避免硬切 */
html.theme-transition,
html.theme-transition * {
  transition:
    background-color 240ms var(--ease-out),
    border-color 240ms var(--ease-out),
    color 240ms var(--ease-out) !important;
}

/* =====================================================================
   降级：系统开启「减少动态效果」时关闭全部非必要动画
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .tool-btn:hover,
  .vat-submit:hover,
  .nav-item:hover,
  .sub-nav-item:hover,
  .tool-stat:hover {
    transform: none;
  }

  #cursorGlow {
    display: none;
  }
}