/* =============================================================================
   电商 App 产品规划演示原型 · jelly.css
   内容：果冻开关 Jelly Switch / 角标弹跳 / 按压果冻 / gooey 滤镜
   ========================================================================== */

/* ---------- 1. 果冻开关 ---------- */
/* 结构（与 HTML 严格对应）：
   label.jelly-switch > input[type=checkbox] + span.track + span.thumb + span.goo  */
.jelly-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 30px;
  flex: 0 0 auto;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}
.jelly-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 4;
  cursor: pointer;
}
.jelly-switch input:disabled { cursor: not-allowed; }

/* 轨道：关闭=灰底；开启=品牌渐变 + 渐变流动 */
.jelly-switch .track {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
  transition: background var(--dur-base) var(--ease-fluid),
              box-shadow var(--dur-base) var(--ease-fluid),
              transform var(--dur-base) var(--ease-jelly);
}
.jelly-switch .track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-cta);
  background-size: 220% 100%;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-fluid);
  animation: gradFlow 2.6s linear infinite;
}
.jelly-switch input:checked ~ .track {
  box-shadow: inset 0 0 0 1px transparent, 0 4px 14px rgba(255, 59, 92, 0.28);
}
.jelly-switch input:checked ~ .track::after { opacity: 1; }

@keyframes gradFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* 滑块 */
.jelly-switch .thumb {
  --tx: 0px;
  position: absolute;
  left: 3px;
  top: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.22), 0 1px 1px rgba(16, 24, 40, 0.08);
  transform: translateX(var(--tx));
  transform-origin: center;
  z-index: 2;
  transition: transform var(--dur-slow) var(--ease-jelly),
              border-radius var(--dur-slow) var(--ease-jelly);
}
.jelly-switch input:checked ~ .thumb { --tx: 22px; }
[data-theme="dark"] .jelly-switch .thumb { background: #f4f5f8; }

/* goo 层：切换瞬间出现一团被挤压的流体，让轨道与滑块「藕断丝连」 */
.jelly-switch .goo {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--grad-cta);
  opacity: 0;
  filter: blur(4px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
.jelly-switch.is-on .goo { animation: gooOn 460ms var(--ease-jelly); }
.jelly-switch.is-off .goo { animation: gooOff 460ms var(--ease-jelly); }
@keyframes gooOn {
  0% { width: 0; height: 0; opacity: 0; }
  35% { width: 46px; height: 22px; opacity: 0.9; }
  70% { width: 30px; height: 26px; opacity: 0.55; }
  100% { width: 0; height: 0; opacity: 0; }
}
@keyframes gooOff {
  0% { width: 30px; height: 26px; opacity: 0.55; }
  60% { width: 40px; height: 20px; opacity: 0.42; }
  100% { width: 0; height: 0; opacity: 0; }
}

/* 开启：轨道先横向压缩 8% 再回弹 */
.jelly-switch.is-on .track { animation: trackSquash 420ms var(--ease-jelly); }
.jelly-switch.is-off .track { animation: trackSquash 360ms var(--ease-jelly); }
@keyframes trackSquash {
  0% { transform: scaleX(1); }
  32% { transform: scaleX(0.92) scaleY(1.06); }
  62% { transform: scaleX(1.045) scaleY(0.97); }
  100% { transform: scaleX(1) scaleY(1); }
}

/* 滑块先拉长 1.35 倍、过冲 12%、再回弹；开启/关闭方向不同 */
.jelly-switch.is-on .thumb { animation: thumbOn 480ms var(--ease-jelly); }
.jelly-switch.is-off .thumb { animation: thumbOff 420ms var(--ease-jelly); }
@keyframes thumbOn {
  0% { transform: translateX(0) scale(1); border-radius: 50%; }
  38% { transform: translateX(14px) scale(1.35, 0.78); border-radius: 45% 55% 52% 48% / 56% 44% 54% 46%; }
  64% { transform: translateX(25px) scale(0.86, 1.12); border-radius: 58% 42% 46% 54% / 42% 58% 46% 54%; }
  84% { transform: translateX(20.5px) scale(1.06, 0.96); border-radius: 52% 48% 50% 50% / 48% 52% 50% 50%; }
  100% { transform: translateX(22px) scale(1); border-radius: 50%; }
}
@keyframes thumbOff {
  0% { transform: translateX(22px) scale(1); border-radius: 50%; }
  38% { transform: translateX(8px) scale(1.35, 0.78); border-radius: 55% 45% 48% 52% / 44% 56% 46% 54%; }
  64% { transform: translateX(-3px) scale(0.86, 1.12); border-radius: 42% 58% 54% 46% / 58% 42% 54% 46%; }
  84% { transform: translateX(1.5px) scale(1.06, 0.96); }
  100% { transform: translateX(0) scale(1); border-radius: 50%; }
}

/* 键盘焦点：轨道外圈可见 */
.jelly-switch input:focus-visible ~ .track {
  box-shadow: inset 0 0 0 1px var(--border), 0 0 0 3px rgba(124, 92, 255, 0.35);
}
/* 按下时整体轻微缩，松手果冻回弹 */
.jelly-switch input:active ~ .thumb { transform: translateX(var(--tx)) scale(0.9); }

/* 设置行的排版 */
.setting-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--surface);
  cursor: pointer;
}
.setting-row + .setting-row { border-top: 1px solid var(--line); }
.setting-row .main { flex: 1 1 auto; min-width: 0; }
.setting-row .title { font-size: 14px; font-weight: 600; }
.setting-row .desc { font-size: 11px; color: var(--muted); }

/* ---------- 2. 角标果冻弹跳（数量变化 1 → 1.35 → 1） ---------- */
.badge.is-bump { animation: badgeBump var(--dur-slow) var(--ease-jelly); }
@keyframes badgeBump {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  62% { transform: scale(0.9); }
  82% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ---------- 3. 通用果冻弹跳（用于图标、爱心、金币等） ---------- */
.jelly-pop { animation: jellyPop 480ms var(--ease-jelly); }
@keyframes jellyPop {
  0% { transform: scale(1); }
  32% { transform: scale(1.28, 0.82); border-radius: 44% 56% 52% 48% / 56% 44% 52% 48%; }
  58% { transform: scale(0.9, 1.14); border-radius: 58% 42% 46% 54% / 44% 56% 48% 52%; }
  80% { transform: scale(1.06, 0.96); }
  100% { transform: scale(1); }
}
.jelly-nudge { animation: jellyNudge 520ms var(--ease-jelly); }
@keyframes jellyNudge {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-4px) rotate(-9deg) scale(1.12); }
  60% { transform: translateY(0) rotate(7deg) scale(0.94); }
  82% { transform: rotate(-3deg) scale(1.03); }
}

/* ---------- 4. 按压液感：主按钮 / 卡片 ---------- */
.pressable { position: relative; overflow: hidden; }
.pressable .ripple {
  position: absolute;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: scale(0);
  opacity: 0.8;
  pointer-events: none;
  animation: rippleOut 620ms var(--ease-fluid) forwards;
}
@keyframes rippleOut {
  to { transform: scale(24); opacity: 0; }
}
.btn-ghost .ripple, .chip .ripple { background: rgba(124, 92, 255, 0.28); }

/* ---------- 5. 爱心 / 收藏点按反馈 ---------- */
.fav-btn.is-on svg { animation: heartBeat 620ms var(--ease-jelly); }
@keyframes heartBeat {
  0% { transform: scale(1); }
  25% { transform: scale(1.42, 0.82); }
  50% { transform: scale(0.88, 1.16); }
  75% { transform: scale(1.08, 0.96); }
  100% { transform: scale(1); }
}

/* ---------- 6. gooey 滤镜容器（Tab 胶囊 / 流体球共用） ---------- */
.goo-host { filter: url(#goo); }
.js-lowfx .goo-host { filter: none; }
@media (prefers-reduced-motion: reduce) {
  .goo-host { filter: none; }
}