/* ============================================================
   春景智能主站 www.qmes.cn · 微交互层 (ui.css)
   - 统一过渡时长 300ms ease-out
   - 优先 transform / opacity，避免重排
   - hover 上浮仅在可悬停设备(PC)启用，移动端自动屏蔽
   - html.js .reveal 由 site.js 滚动监听控制（无 JS 时内容始终可见）
   ============================================================ */

/* ---------- 1. 统一过渡时长基准（覆盖 Tailwind 默认 150ms） ---------- */
.qmes-btn-primary,
.qmes-btn-secondary,
a[class*="qmes-btn"],
button,
a[class*="rounded-md"],
a[class*="rounded-lg"],
a[class*="rounded-xl"],
input:not([type="hidden"]),
select,
textarea {
  transition-duration: 300ms !important;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
}

/* ---------- 2. 卡片 hover：上浮 + 微加深阴影（仅 PC） ---------- */
@media (hover: hover) and (pointer: fine) {
  .ui-card {
    will-change: transform;
    transition-property: transform, box-shadow, border-color !important;
  }

  /* 统一上浮幅度 4px，覆盖已有 Tailwind hover:-translate-y-* 的 2px 差异 */
  .ui-card:hover {
    transform: translateY(-4px) !important;
  }

  /* 若卡片自身未带 hover:shadow-*，补一档微加深阴影 */
  .ui-card:not([class*="hover:shadow"]):hover {
    box-shadow: 0 12px 24px -12px rgba(15, 23, 42, 0.18);
  }

  /* group 卡片内箭头/图标微跟随 */
  .ui-card .ui-arrow {
    transition: transform 300ms ease-out;
  }
  .ui-card:hover .ui-arrow {
    transform: translateX(3px);
  }
}

/* ---------- 3. 按钮按压反馈（PC + 移动） ---------- */
.qmes-btn-primary:active,
.qmes-btn-secondary:active,
button:active,
a[class*="qmes-btn"]:active,
.ui-btn:active {
  transform: translateY(1px) scale(0.97) !important;
}

/* 移动端去系统高亮 */
@media (hover: none), (pointer: coarse) {
  a,
  button {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ---------- 4. 输入框 focus（兜底：已有 Tailwind focus:ring 的不覆盖） ---------- */
input:not([type="hidden"]):focus,
select:focus,
textarea:focus {
  outline: none;
}
/* 仅对未自带 focus:border/focus:ring 类的输入做兜底高亮（橙色主站主题） */
input:not([type="hidden"]):focus:not([class*="focus:border"]):not([class*="focus:ring"]),
select:focus:not([class*="focus:border"]):not([class*="focus:ring"]),
textarea:focus:not([class*="focus:border"]):not([class*="focus:ring"]) {
  border-color: #0f6b4c;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15);
}

/* ---------- 5. 滚动视口入场 ----------
   html.js 存在时 .reveal 初始隐藏；进入视口加 .reveal-in */
html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition-property: opacity, transform;
  transition-duration: 300ms !important;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important;
  will-change: opacity, transform;
}

html.js .reveal.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* 级联错峰（克制：最长 300ms） */
.reveal[data-delay="1"] { transition-delay: 60ms !important; }
.reveal[data-delay="2"] { transition-delay: 120ms !important; }
.reveal[data-delay="3"] { transition-delay: 180ms !important; }
.reveal[data-delay="4"] { transition-delay: 240ms !important; }
.reveal[data-delay="5"] { transition-delay: 300ms !important; }

/* ============================================================
   增强交互（v2：卡片放大上浮 / 图片蒙版 / 图表高亮 / 图标动 / 表单态）
   全部：300ms ease-out，transform+opacity+filter，无重排，商务克制
   ============================================================ */

/* ---------- 7. 卡片：上浮 + 微放大 + 阴影加深（仅 PC） ---------- */
@media (hover: hover) and (pointer: fine) {
  /* 卡片整体动效：上移+放大，阴影由既有 hover 规则负责 */
  .ui-card:hover {
    transform: translateY(-4px) scale(1.02) !important;
  }
  .ui-card:not([class*="hover:shadow"]):hover {
    box-shadow: 0 14px 30px -12px rgba(15, 23, 42, 0.2);
  }
  .ui-card:active {
    transform: translateY(-2px) scale(0.99) !important;
  }
  .ui-card.ui-card-static:hover,
  .ui-card.ui-card-static:active {
    transform: none !important;
  }
}

/* ---------- 8. 图片 / 封面微交互（仅 PC） ----------
   .ui-media 由 JS 标记（封面 img 的父容器或 img 本身）
   方案A(默认)：图上有蒙版渐变，hover 浮现
   方案B：图片自身 scale 放大（容器 overflow-hidden 时安全） */
@media (hover: hover) and (pointer: fine) {
  .ui-media {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
  }
  .ui-media img {
    display: block;
    width: 100%;
    transition: transform 300ms ease-out, filter 300ms ease-out;
    will-change: transform;
  }
  .ui-media:hover img {
    transform: scale(1.035);
    filter: brightness(1.04) saturate(1.06);
  }
  .ui-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12, 30, 53, 0.28), rgba(12, 30, 53, 0) 52%);
    opacity: 0;
    transition: opacity 300ms ease-out;
    pointer-events: none;
  }
  .ui-media:hover::after {
    opacity: 1;
  }
  /* 容器自带 padding（内容卡内嵌图）时不加蒙版，仅缩放提亮，避免蒙版盖到留白 */
  .ui-media[class*="p-"]::after,
  .ui-media[class*="px-"]::after {
    display: none;
  }
}

/* 图片型数据卡（资质/荣誉/报告封面）：悬停加深 */
@media (hover: hover) and (pointer: fine) {
  .ui-cover img {
    transition: transform 300ms ease-out, filter 300ms ease-out;
    will-change: transform;
  }
  .ui-cover:hover img {
    transform: scale(1.04);
    filter: brightness(1.05);
  }
}

/* ---------- 9. 图表/数据块微交互 ----------
   主站数字统计卡：hover 高亮数字色 + 轻微放大 */
@media (hover: hover) and (pointer: fine) {
  .ui-chart,
  .ui-stat {
    transition: background-color 300ms ease-out, box-shadow 300ms ease-out;
  }
  .ui-chart:hover,
  .ui-stat:hover {
    background-color: rgba(234, 88, 12, 0.05);
  }
  .ui-stat:hover .ui-stat-value {
    color: var(--qmes-orange);
    transform: scale(1.06);
  }
  .ui-stat-value {
    transition: color 300ms ease-out, transform 300ms ease-out;
    display: inline-block;
  }
  /* 趋势/标签行 hover 提示 */
  .ui-chart .ui-chart-bar {
    transform-origin: bottom;
    transition: transform 300ms ease-out, opacity 300ms ease-out;
  }
  .ui-chart:hover .ui-chart-bar {
    transform: scaleY(1.04);
  }
}

/* ---------- 10. 图标动画（仅 PC） ---------- */
@media (hover: hover) and (pointer: fine) {
  .ui-icon {
    display: inline-flex;
    transition: transform 300ms ease-out, color 300ms ease-out, background-color 300ms ease-out;
    will-change: transform;
  }
  .ui-icon:hover {
    transform: translateY(-2px) scale(1.08);
  }
  /* 旋转图标（设置/刷新语义） */
  .ui-icon-spin-slow:hover {
    transform: rotate(30deg) scale(1.08);
  }
  /* 箭头图标：hover 前移 */
  .ui-icon-arrow:hover {
    transform: translateX(3px);
  }
}

/* ---------- 11. 表单交互 ---------- */
/* 输入框 focus：高亮发光（兜底增强：仅无自带 ring 的控件） */
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus:not([class*="focus:ring"]),
select:focus:not([class*="focus:ring"]),
textarea:focus:not([class*="focus:ring"]) {
  border-color: var(--qmes-orange);
  box-shadow:
    0 0 0 3px rgba(234, 88, 12, 0.16),
    0 0 14px rgba(234, 88, 12, 0.18);
}

/* checkbox：勾选动画（accent 主题色 + 不透明度过渡） */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--qmes-orange);
  transition: transform 300ms ease-out, opacity 300ms ease-out;
}
input[type="checkbox"]:active,
input[type="radio"]:active {
  transform: scale(0.92);
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  transform: scale(1.06);
}

/* 提交按钮 loading / disabled 状态 */
button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
.qmes-btn-primary:disabled {
  filter: grayscale(0.2) brightness(0.95);
}

/* 按钮 hover 变色（Qmes 主按钮已在 brand.css 变深，此处统一补亮/暗） */
@media (hover: hover) and (pointer: fine) {
  .qmes-btn-primary:hover {
    filter: brightness(1.05);
  }
  .qmes-btn-secondary:hover {
    filter: brightness(1.1);
  }
}

/* ---------- 12. 状态切换微过渡 ---------- */
.swap-fade {
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.swap-fade.swap-out {
  opacity: 0;
  transform: translateY(4px);
}
.swap-fade.swap-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 导航下拉：点击 / 键盘 / 触屏锁定展开 ---------- */
.js-dropdown.is-open > .js-dropdown-panel {
  visibility: visible !important;
  opacity: 1 !important;
}
.js-dropdown.is-open > .js-dropdown-btn svg {
  transform: rotate(180deg);
}
.js-dropdown-btn svg {
  transition: transform 200ms ease-out;
}

/* 产品封面：铺满画面，裁切偏上（界面/工位在画面中部偏上） */
.qmes-cover {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0b1220;
}
.qmes-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}
@media (hover: hover) and (pointer: fine) {
  .qmes-cover .qmes-cover-img {
    transition: transform 300ms ease-out;
  }
  .qmes-cover:hover .qmes-cover-img {
    transform: scale(1.04);
  }
}

/* ---------- 6. 尊重系统"减弱动态"偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  html.js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}