/* ============================================================
   YunOS9 液态玻璃材质系统
   高透 / 背景折射 / 镜面高光 / 果冻形变 / 液态轨道
   ============================================================ */

.glass {
  position: relative;
  isolation: isolate;
  background: linear-gradient(142deg, var(--glass-hi) 0%, var(--glass-lo) 100%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(1.07);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(1.07);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-md);
  box-shadow:
    inset 0 1px 0 var(--glass-inner-top),
    inset 0 -1px 0 var(--glass-inner-bottom),
    0 12px 38px -14px var(--glass-shadow),
    0 2px 8px -4px var(--glass-shadow);
}
/* 顶部镜面弧形高光 */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(158deg,
    rgba(var(--c-white-rgb), 0.62) 0%,
    rgba(var(--c-white-rgb), 0.10) 26%,
    rgba(var(--c-white-rgb), 0) 52%);
  pointer-events: none;
  z-index: 0;
}
/* 底部折射亮边 */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 -1px 0 rgba(var(--c-white-rgb), 0.62),
    inset 0 0 0 0.5px rgba(var(--c-white-rgb), 0.28);
  pointer-events: none;
  z-index: 0;
}
.glass > * { position: relative; z-index: 1; }

/* ---- 果冻关键帧：仅形变，不使用过冲型 back 缓动 ---- */
@keyframes jelly-press {
  0%   { transform: scale(1, 1); }
  28%  { transform: scale(1.16, 0.84); }
  55%  { transform: scale(0.93, 1.09); }
  78%  { transform: scale(1.04, 0.97); }
  100% { transform: scale(1, 1); }
}
@keyframes jelly-release {
  0%   { transform: scale(1.14, 0.88); }
  40%  { transform: scale(0.94, 1.07); }
  70%  { transform: scale(1.03, 0.98); }
  100% { transform: scale(1, 1); }
}
@keyframes liquid-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes orb-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(3%, -4%, 0) scale(1.08); }
}
@keyframes loupe-in {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.55); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.09); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes loupe-out {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
}
.jelly-press   { animation: jelly-press var(--t-mid) var(--ease-smooth) both; }
.jelly-release { animation: jelly-release var(--t-slow) var(--ease-smooth) both; }

/* ---- 液态轨道（导航栏滑动键 + 调节滑动共用） ---- */
.lq-track {
  position: relative;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(var(--c-brand-rgb), 0.10), rgba(var(--c-white-rgb), 0.42));
  box-shadow:
    inset 0 1px 3px rgba(var(--c-deep-rgb), 0.16),
    inset 0 -1px 0 rgba(var(--c-white-rgb), 0.8);
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.lq-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c-brand-light), var(--c-brand), var(--c-med-green));
  background-size: 200% 100%;
  box-shadow: 0 0 18px -4px var(--c-brand);
  animation: liquid-flow 5s linear infinite;
  pointer-events: none;
}
.lq-thumb {
  position: absolute;
  top: 50%; left: 0;
  width: 30px; height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(var(--c-white-rgb), 0.96), rgba(var(--c-white-rgb), 0.34));
  -webkit-backdrop-filter: blur(12px) saturate(1.8);
  backdrop-filter: blur(12px) saturate(1.8);
  border: 1px solid rgba(var(--c-white-rgb), 0.9);
  box-shadow:
    0 4px 14px -3px var(--glass-shadow-lift),
    inset 0 1px 0 var(--c-white),
    inset 0 -2px 4px rgba(var(--c-brand-rgb), 0.18);
  cursor: grab;
  will-change: transform;
  pointer-events: none;
}
.lq-thumb::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--c-white), var(--c-brand-light) 62%, var(--c-brand));
  opacity: 0.9;
}
.lq-track.is-active .lq-thumb {
  box-shadow:
    0 8px 26px -4px var(--glass-shadow-lift),
    0 0 0 8px rgba(var(--c-light-rgb), 0.14),
    inset 0 1px 0 var(--c-white),
    inset 0 -2px 4px rgba(var(--c-brand-rgb), 0.2);
}
.lq-track.is-active .lq-fill { box-shadow: 0 0 26px -2px var(--c-brand); }

/* ---- 长按文字 · 液态玻璃放大镜 ---- */
.loupe {
  position: fixed;
  width: 176px; height: 176px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.55);
  overflow: hidden;
  background: rgba(var(--c-white-rgb), 0.26);
  -webkit-backdrop-filter: blur(5px) saturate(2.2) brightness(1.14);
  backdrop-filter: blur(5px) saturate(2.2) brightness(1.14);
  border: 1px solid rgba(var(--c-white-rgb), 0.92);
  box-shadow:
    0 18px 46px -10px rgba(var(--c-deep-rgb), 0.42),
    0 0 0 6px rgba(var(--c-white-rgb), 0.18),
    inset 0 2px 3px rgba(var(--c-white-rgb), 0.98),
    inset 0 -8px 18px rgba(var(--c-brand-rgb), 0.16);
}
.loupe.is-on  { animation: loupe-in var(--t-mid) var(--ease-smooth) both; }
.loupe.is-off { animation: loupe-out var(--t-fast) var(--ease-soft) both; }
.loupe-zoom {
  position: absolute;
  left: 50%; top: 50%;
  width: 1000px;
  margin-left: -500px;
  padding: 10px 16px;
  text-align: center;
  color: var(--c-ink);
  font-weight: 600;
  line-height: 1.45;
  word-break: break-word;
  filter: url(#liquid-refract);
  will-change: transform;
}
.loupe-glare {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    linear-gradient(150deg, rgba(var(--c-white-rgb), 0.60), rgba(var(--c-white-rgb), 0) 44%),
    radial-gradient(circle at 30% 22%, rgba(var(--c-white-rgb), 0.88), transparent 38%);
  mix-blend-mode: screen;
}
.loupe-rim {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 2px rgba(var(--c-white-rgb), 0.55),
    inset 0 0 22px rgba(var(--c-white-rgb), 0.55);
}
body.loupe-active { user-select: none; -webkit-user-select: none; }