/**
 * microfx.css — 统一微交互库（12 项动效）
 * 1 按压回弹 2 弹性开关 3 波纹跟手 5 勾选画出来 6 液态滑块
 * 8 骨架屏 9 卡片翻面 10 汉堡变叉 11 卡片堆叠 12 底部抽屉
 * 4 点赞烟花 / 7 数字滚动 的关键帧辅助也在本文件
 * 品牌色: sh #e85a4f / ropeart #e0930a / sizuwang #4a9eea（由 --fx-brand 覆盖）
 */
:root {
  --fx-spring: cubic-bezier(.34, 1.56, .64, 1);
  --fx-brand: #e85a4f;
  --fx-brand2: #d14a40;
}

/* ---------- 1. 按压回弹按钮 ---------- */
.fx-press {
  transition: transform .22s var(--fx-spring);
  will-change: transform;
}
.fx-press:active {
  transform: scale(.94);
  transition-duration: .07s;
}
.fx-press.fx-pop {
  animation: fxPop .45s var(--fx-spring);
}
@keyframes fxPop {
  0%   { transform: scale(.94); }
  55%  { transform: scale(1.07); } /* 过度弹起大于原尺寸 */
  100% { transform: scale(1); }
}

/* ---------- 3. 波纹跟手 ---------- */
.fx-ripple-host {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
span.fx-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: currentColor;
  opacity: .25;
  transform: scale(0);
  animation: fxRipple .55s ease-out forwards;
}
@keyframes fxRipple {
  to { transform: scale(1); opacity: 0; }
}

/* ---------- 4. 点赞烟花（粒子容器，仅点赞/收藏调用） ---------- */
.fx-burst-box {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 30;
}
.fx-burst-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  pointer-events: none;
}

/* ---------- 2. 弹性开关 ---------- */
.fx-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 30px;
  flex: none;
}
.fx-switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.fx-switch .fx-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  transition: background .25s ease;
}
.fx-switch input:checked ~ .fx-track {
  background: linear-gradient(90deg, var(--fx-brand), var(--fx-brand2));
}
.fx-switch .fx-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  transition: left .34s var(--fx-spring);
  will-change: left, transform;
}
.fx-switch input:checked ~ .fx-knob {
  left: 25px;
  animation: fxStretchR .34s ease; /* 移动中横向拉长成胶囊 */
}
.fx-switch input:not(:checked) ~ .fx-knob {
  left: 3px;
  animation: fxStretchL .34s ease;
}
@keyframes fxStretchR {
  0%   { transform: scaleX(1); }
  45%  { transform: scaleX(1.5); }
  100% { transform: scaleX(1); }
}
@keyframes fxStretchL {
  0%   { transform: scaleX(1); }
  45%  { transform: scaleX(1.5); }
  100% { transform: scaleX(1); }
}

/* ---------- 5. 勾选画出来 ---------- */
.fx-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fx-check svg { display: block; }
.fx-check .fx-tick {
  fill: none;
  stroke: #2ecc71;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 27;
  stroke-dashoffset: 27;
}
.fx-check.is-on .fx-tick {
  animation: fxDraw .5s cubic-bezier(.65, 0, .35, 1) forwards;
}
.fx-check:not(.is-on) .fx-tick {
  stroke-dashoffset: 27;
  transition: stroke-dashoffset .25s ease;
}
@keyframes fxDraw {
  to { stroke-dashoffset: 0; }
}

/* ---------- 6. 液态滑块 ---------- */
.fx-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  outline: none;
  background: linear-gradient(90deg,
      var(--fx-brand) 0%,
      var(--fx-brand2) var(--fx-fill, 50%),
      rgba(255,255,255,.14) var(--fx-fill, 50%),
      rgba(255,255,255,.14) 100%);
  cursor: pointer;
}
.fx-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  transition: transform .25s var(--fx-spring);
}
.fx-range:active::-webkit-slider-thumb {
  transform: scale(1.3);
}
.fx-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.fx-range-val {
  font-variant-numeric: tabular-nums;
  min-width: 3.2em;
  text-align: right;
  display: inline-block;
}

/* ---------- 7. 数字滚动 ---------- */
.fx-num {
  font-variant-numeric: tabular-nums;
}

/* ---------- 8. 骨架屏 ---------- */
.fx-skel {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  border-radius: 6px;
}
.fx-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
  animation: fxShimmer 1.2s infinite;
}
@keyframes fxShimmer {
  to { transform: translateX(100%); }
}
/* 骨架容器与真实内容同尺寸：真实内容先 hidden 占位，填充时淡入无跳动 */
.fx-skel-zone .fx-real.is-hidden { display: none; }
.fx-real {
  opacity: 1;
  transition: opacity .35s ease;
}
.fx-real.fx-fadein {
  animation: fxFadein .35s ease;
}
@keyframes fxFadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 9. 卡片翻面 ---------- */
.fx-flip {
  perspective: 1000px;
  cursor: pointer;
}
.fx-flip-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4, .1, .2, 1);
}
.fx-flip.is-flipped .fx-flip-inner {
  transform: rotateY(180deg);
}
.fx-face {
  backface-visibility: hidden;       /* 翻转中途背面不透光不镜像 */
  -webkit-backface-visibility: hidden;
}
.fx-face-front { position: relative; }
.fx-face-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: rgba(20, 22, 28, .98); /* 不透明底，防穿帮 */
  overflow: hidden;
}

/* ---------- 10. 汉堡变叉 ---------- */
.fx-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fx-burger span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: currentColor;
  transition: transform .32s var(--fx-spring), opacity .22s ease;
  transform-origin: center;
}
.fx-burger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.fx-burger.is-open span:nth-child(2) {
  opacity: 0;               /* 中间线淡出 */
}
.fx-burger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- 11. 卡片堆叠 ---------- */
.fx-stack {
  position: relative;
  height: 240px;
  touch-action: pan-y;
}
.fx-stack-card {
  position: absolute;
  left: 50%;
  top: 0;
  width: 240px;
  margin-left: -120px;
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  padding: 20px;
  transition: transform .4s var(--fx-spring), opacity .4s ease;
  will-change: transform;
  user-select: none;
}
.fx-stack-card.is-dragging {
  transition: none;
  z-index: 10;
}
.fx-stack-card.is-gone {
  transition: transform .35s ease-in, opacity .35s ease-in;
}

/* ---------- 12. 底部抽屉 ---------- */
.fx-drawer-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 998;
}
.fx-drawer-mask.is-show {
  opacity: 1;
  pointer-events: auto;
}
.fx-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: #1a1d24;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -6px 30px rgba(0,0,0,.4);
  transform: translateY(100%);
  transition: transform .38s var(--fx-spring);
  will-change: transform;
}
.fx-drawer.is-peek { transform: translateY(calc(100% - var(--fx-peek, 45vh))); }
.fx-drawer.is-full { transform: translateY(var(--fx-top-gap, 6vh)); }
.fx-drawer.is-dragging { transition: none; }
.fx-drawer-handle {
  display: flex;
  justify-content: center;
  padding: 10px 0 6px;
  cursor: grab;
  touch-action: none;
}
.fx-drawer-handle::before {
  content: '';
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
}
.fx-drawer-body {
  padding: 8px 18px 24px;
  overflow-y: auto;
  max-height: calc(var(--fx-peek, 45vh) - 40px);
}
.fx-drawer.is-full .fx-drawer-body {
  max-height: 82vh;
}