/* liquid-glass.css — 浮光（AirLumen）统一液态玻璃设计令牌
 *
 * 设计语言来源：skills/APPLE_DESIGN_SKILL.md（液态玻璃 / 半透明分层 + 边缘受光）
 * 统一色系：浅色白蓝基底 #eef5ff、天蓝主色 #2f8fff。
 * 本文件在 acrylic.css 之后加载，统一以下视觉：
 *   1. 默认背景（无自定义壁纸时）使用 AirLumen 浅蓝渐变
 *   2. 浮层（工具栏 / 菜单 / 模态 / 提示 / 用户面板）使用液态玻璃材质
 *      —— 分层半透明 + backdrop-filter 模糊 + 饱和提升 + 顶部高光边
 *   3. 按压/入场动效贴近 Apple 弹簧参数（临界阻尼，< 300ms）
 */

:root {
  /* 基底与品牌色 */
  --lg-bg: #eef5ff;
  --lg-primary: #2f8fff;
  --lg-primary-strong: #1763d6;

  /* 玻璃材质令牌 */
  --lg-glass-bg: rgba(255, 255, 255, 0.60);
  --lg-glass-bg-strong: rgba(255, 255, 255, 0.72);
  --lg-glass-border: rgba(255, 255, 255, 0.55);
  --lg-glass-hairline: rgba(255, 255, 255, 0.65);
  --lg-glass-shadow: 0 16px 40px rgba(23, 99, 214, 0.14), 0 2px 8px rgba(15, 23, 42, 0.06);
  --lg-blur: 20px;
  --lg-saturate: 180%;

  /* 动效令牌（与 ANIMATE_SKILL 对齐） */
  --lg-ease-spring: cubic-bezier(0.32, 0.72, 1);
  --lg-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --lg-press: 100ms;
  --lg-pop: 200ms;
}

/* 默认背景：无自定义壁纸时使用 AirLumen 浅蓝渐变（替代原 acrylic 渐变） */
.acrylic-backdrop {
  background-color: var(--lg-bg);
  background-image:
    radial-gradient(at 12% 8%, rgba(47, 143, 255, 0.18) 0px, transparent 55%),
    radial-gradient(at 88% 12%, rgba(99, 179, 255, 0.16) 0px, transparent 50%),
    radial-gradient(at 78% 92%, rgba(160, 200, 255, 0.20) 0px, transparent 55%),
    radial-gradient(at 10% 90%, rgba(47, 143, 255, 0.12) 0px, transparent 50%);
  background-attachment: fixed;
}

/* 液态玻璃材质：所有浮层统一套用 */
.uc-toolbar,
.uc-menu,
.uc-ctx-menu,
.uc-login-prompt,
.uc-unlock,
.uc-toast,
.uc-alert,
#userAuthModal > div > div,
#userBookmarkModal > div > div,
#ucFolderModal > div > div,
#ucFolderPickerModal > div > div,
#ucCryptoModal > div > div,
#ucOfflineModal > div > div,
#ucReaderModal > div > div {
  background: var(--lg-glass-bg);
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border: 1px solid var(--lg-glass-border);
  /* 顶部高光边 + 柔和投影，体现玻璃受光 */
  box-shadow: inset 0 1px 0 var(--lg-glass-hairline), var(--lg-glass-shadow);
  border-radius: 20px;
}

/* 主按钮：天蓝液态玻璃质感 */
.uc-btn-primary {
  background: linear-gradient(140deg, #5a9dff, var(--lg-primary));
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 16px rgba(47, 143, 255, 0.28);
}
.uc-btn-primary:hover {
  background: linear-gradient(140deg, #4f93ff, var(--lg-primary-strong));
}
.uc-btn-primary:active {
  transform: scale(0.98);
}

/* 按压反馈：所有可点击元素即时缩放（Apple 设计原则：响应在按下时） */
.uc-btn,
.uc-icon-btn,
.uc-top-action,
.uc-avatar,
[data-auth-open],
#ucLoginBtn {
  transition: transform var(--lg-press) ease-out, background-color 160ms ease, box-shadow 200ms ease;
}
.uc-btn:active,
.uc-icon-btn:active,
.uc-top-action:active,
.uc-avatar:active {
  transform: scale(0.97);
}

/* 模态入场：用 transform/opacity 而非纯显隐，贴近弹簧手感 */
#userAuthModal > div,
#userBookmarkModal > div,
#ucFolderModal > div,
#ucFolderPickerModal > div,
#ucCryptoModal > div,
#ucOfflineModal > div,
#ucReaderModal > div {
  transition: transform var(--lg-pop) var(--lg-ease-spring), opacity var(--lg-pop) var(--lg-ease-out);
}

/* 用户面板（右上角浮层）强化玻璃 */
#ucUserPanel .uc-menu {
  background: var(--lg-glass-bg-strong);
}

/* 登录提示主按钮对齐浮光品牌 */
.uc-login-prompt-actions .uc-btn-primary {
  min-width: 120px;
}

/* 降低动效偏好：取消缩放/位移，仅保留淡入 */
@media (prefers-reduced-motion: reduce) {
  .uc-btn,
  .uc-icon-btn,
  .uc-top-action,
  .uc-avatar,
  [data-auth-open],
  #ucLoginBtn {
    transition: none;
  }
  .uc-btn:active,
  .uc-icon-btn:active,
  .uc-top-action:active,
  .uc-avatar:active {
    transform: none;
  }
  #userAuthModal > div,
  #userBookmarkModal > div,
  #ucFolderModal > div,
  #ucFolderPickerModal > div,
  #ucCryptoModal > div,
  #ucOfflineModal > div,
  #ucReaderModal > div {
    transition: opacity 200ms ease;
  }
}

/* 降低透明度偏好：玻璃更实，弱化模糊 */
@media (prefers-reduced-transparency: reduce) {
  .uc-toolbar,
  .uc-menu,
  .uc-ctx-menu,
  .uc-login-prompt,
  .uc-unlock,
  .uc-toast,
  .uc-alert,
  #userAuthModal > div > div,
  #userBookmarkModal > div > div,
  #ucFolderModal > div > div,
  #ucFolderPickerModal > div > div,
  #ucCryptoModal > div > div,
  #ucOfflineModal > div > div,
  #ucReaderModal > div > div {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}