/* SNEK 跟隨式鼠標：樣式。指標符號由 cursor.js 以 CSS cursor 設定，這裡只負責跟隨層。 */
html.sk-on,
html.sk-on * {
  cursor: var(--sk-cur, auto) !important;
}

/* Decorative layers and their images must never become a tap target. */
.sk, .sk *, .sk-rip, .sk-pop, .sk-pop * {
  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
}

.sk {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  will-change: transform;
  --sk-size: 56px;
}
.sk.is-on { opacity: 1; }
html:not(.sk-on) .sk { display: none; }

.sk-tilt { transform-origin: 50% 90%; will-change: transform; }
.sk-bob {
  display: grid;
  align-items: end;       /* 不同表情的畫布高度不同，統一貼齊底部 */
  justify-items: center;
  animation: sk-bob 2.6s ease-in-out infinite;
}
.sk[data-s="no"] .sk-bob { animation: sk-shake 0.5s ease-in-out infinite; }

/* 圖片疊在同一格，用 opacity 切換，避免換圖時閃一下。
   寬度由高度和原始長寬比決定，所以一定要 width:auto 與 max-width:none，才不會被壓扁。 */
.sk img {
  grid-area: 1 / 1;
  display: block;
  height: calc(var(--sk-size) * var(--r, 1));   /* --r：該檔案高度 ÷ 112，讓每個表情裡的角色一樣大 */
  width: auto;
  max-width: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.sk img.is-active { opacity: 1; }

@keyframes sk-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes sk-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

/* 點擊波紋 */
.sk-rip {
  position: fixed;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 2px solid var(--sk-accent, #22d3ee);
  pointer-events: none;
  z-index: 2147482999;
  animation: sk-rip 0.5s ease-out forwards;
}
@keyframes sk-rip {
  from { transform: scale(0.3); opacity: 0.85; }
  to { transform: scale(1.5); opacity: 0; }
}

/* 觸控裝置：點一下跳出 SNEK */
.sk-pop {
  position: fixed;
  pointer-events: none;
  z-index: 2147482998;
  animation: sk-pop 0.9s ease-out forwards;
}
.sk-pop img {
  display: block;
  height: var(--sk-pop-size, 56px);
  width: auto;
  max-width: none;
}
@keyframes sk-pop {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.7); }
  20% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -26px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sk-bob,
  .sk[data-s="no"] .sk-bob { animation: none; }
  .sk-rip,
  .sk-pop { animation-duration: 0.01s; }
}