/* 拉线开关：木座 / 孔 / 绳 / 坠子随页面 data-theme，贴近背景、低视觉干扰（不跟系统） */
.hetu-pull-switch {
  position: fixed;
  right: clamp(16px, 4vw, 100px);
  top: 108px;
  z-index: 9999;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* 深色页：几乎吃进背景 #050814 / #1c2440；悬停再浮起、轮廓变清晰 */
.hetu-switch-base {
  width: 42px;
  height: 54px;
  --hetu-wood-a: rgba(26, 34, 54, 0.82);
  --hetu-wood-b: rgba(18, 24, 40, 0.88);
  --hetu-wood-border: rgba(100, 116, 148, 0.12);
  --hetu-wood-drop: rgba(0, 0, 0, 0.1);
  --hetu-wood-drop-y: 1px;
  --hetu-wood-drop-blur: 5px;
  --hetu-wood-inset: rgba(255, 255, 255, 0.035);
  --hetu-hole: rgba(8, 10, 18, 0.72);
  --hetu-hole-rim: rgba(255, 255, 255, 0.03);
  background: linear-gradient(135deg, var(--hetu-wood-a), var(--hetu-wood-b));
  border-radius: 8px;
  box-shadow:
    0 var(--hetu-wood-drop-y) var(--hetu-wood-drop-blur) var(--hetu-wood-drop),
    inset 0 2px 3px var(--hetu-wood-inset);
  position: relative;
  border: 2px solid var(--hetu-wood-border);
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

html[data-theme='light'] .hetu-switch-base {
  --hetu-wood-a: rgba(218, 224, 232, 0.92);
  --hetu-wood-b: rgba(207, 215, 224, 0.9);
  --hetu-wood-border: rgba(114, 127, 144, 0.22);
  --hetu-wood-drop: rgba(15, 23, 42, 0.052);
  --hetu-wood-drop-y: 1px;
  --hetu-wood-drop-blur: 6px;
  --hetu-wood-inset: rgba(255, 255, 255, 0.3);
  --hetu-hole: rgba(107, 118, 135, 0.38);
  --hetu-hole-rim: rgba(255, 255, 255, 0.21);
}

.hetu-pull-switch:hover .hetu-switch-base {
  --hetu-wood-a: rgba(46, 56, 78, 0.96);
  --hetu-wood-b: rgba(34, 42, 64, 0.98);
  --hetu-wood-border: rgba(148, 163, 184, 0.42);
  --hetu-wood-drop: rgba(0, 0, 0, 0.32);
  --hetu-wood-drop-y: 4px;
  --hetu-wood-drop-blur: 12px;
  --hetu-wood-inset: rgba(255, 255, 255, 0.12);
  --hetu-hole: rgba(4, 6, 12, 0.92);
  --hetu-hole-rim: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 var(--hetu-wood-drop-y) var(--hetu-wood-drop-blur) var(--hetu-wood-drop),
    inset 0 2px 3px var(--hetu-wood-inset),
    0 0 0 1px rgba(148, 163, 184, 0.22);
}

html[data-theme='light'] .hetu-pull-switch:hover .hetu-switch-base {
  --hetu-wood-a: rgba(226, 230, 236, 0.97);
  --hetu-wood-b: rgba(213, 220, 230, 0.96);
  --hetu-wood-border: rgba(78, 89, 106, 0.42);
  --hetu-wood-drop: rgba(15, 23, 42, 0.11);
  --hetu-wood-drop-y: 3px;
  --hetu-wood-drop-blur: 12px;
  --hetu-wood-inset: rgba(255, 255, 255, 0.46);
  --hetu-hole: rgba(67, 77, 93, 0.52);
  --hetu-hole-rim: rgba(255, 255, 255, 0.3);
  box-shadow:
    0 var(--hetu-wood-drop-y) var(--hetu-wood-drop-blur) var(--hetu-wood-drop),
    inset 0 2px 3px var(--hetu-wood-inset),
    0 0 0 1px rgba(124, 135, 150, 0.29);
}

.hetu-switch-hole {
  width: 6px;
  height: 6px;
  background: radial-gradient(circle at 35% 30%, var(--hetu-hole-rim), var(--hetu-hole));
  border-radius: 50%;
  position: absolute;
  bottom: 9px;
  left: 50%;
  transform: translateX(-50%);
  transition: background 0.22s ease, box-shadow 0.22s ease;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.32);
}

html[data-theme='light'] .hetu-switch-hole {
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.16);
}

.hetu-pull-switch:hover .hetu-switch-hole {
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.55);
}

html[data-theme='light'] .hetu-pull-switch:hover .hetu-switch-hole {
  box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.28);
}

/* 绳、坠子：深色页低饱和金属灰，避免金黄抢戏 */
.hetu-pull-cord {
  width: 2px;
  height: 88px;
  background: linear-gradient(90deg, #303748, #363e52, #303748);
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  transform-origin: top center;
  transition: transform 0.2s ease, background 0.22s ease, box-shadow 0.22s ease;
  box-shadow: none;
}

.hetu-pull-knob {
  width: 15px;
  height: 19px;
  background: radial-gradient(circle at 30% 30%, #3e4658, #2c3242);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  position: absolute;
  bottom: -19px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
  transition: transform 0.12s ease, background 0.22s ease, box-shadow 0.22s ease;
}

html[data-theme='light'] .hetu-pull-cord {
  background: linear-gradient(90deg, #c7cfd9, #d0d8e0, #c7cfd9);
}

html[data-theme='light'] .hetu-pull-knob {
  background: radial-gradient(circle at 30% 30%, #dce2ea, #aebac9);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.085);
}

.hetu-pull-switch:hover .hetu-pull-cord {
  background: linear-gradient(90deg, #627592, #7386a4, #627592);
  box-shadow: 0 0 6px rgba(148, 163, 184, 0.35);
}

.hetu-pull-switch:hover .hetu-pull-knob {
  background: radial-gradient(circle at 30% 30%, #949fb4, #5c6a82);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

html[data-theme='light'] .hetu-pull-switch:hover .hetu-pull-cord {
  background: linear-gradient(90deg, #8392a3, #748193, #8392a3);
  box-shadow: 0 0 6px rgba(15, 23, 42, 0.095);
}

html[data-theme='light'] .hetu-pull-switch:hover .hetu-pull-knob {
  background: radial-gradient(circle at 30% 30%, #e3e6ea, #667182);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.15);
}

.hetu-pull-switch.hetu-pulling .hetu-pull-cord {
  transform: translateX(-50%) scaleY(1.14);
}
.hetu-pull-switch.hetu-pulling .hetu-pull-knob {
  transform: translateX(-50%) translateY(10px);
}
@keyframes hetu-lamp-swing-pull {
  0% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(3deg); }
  50% { transform: translateX(-50%) rotate(0deg); }
  75% { transform: translateX(-50%) rotate(-2deg); }
  100% { transform: translateX(-50%) rotate(0deg); }
}
.hetu-pull-cord.hetu-swinging {
  animation: hetu-lamp-swing-pull 1.5s ease-out;
}
@media (max-width: 640px) {
  .hetu-pull-switch {
    top: 96px;
  }
}