/* ============================================================
   VŨ CÔNG 3D — khối thật, xoay người vẫn thấy bề dày
   Dùng cho bản giao diện Club Neon
   ============================================================ */

.d3 {
  position: relative;
  width: 96px;
  height: 178px;
  transform-style: preserve-3d;
  transform: scale(var(--s, 1));
  transform-origin: center bottom;
  user-select: none;
}

/* Bộ khung: mọi bộ phận treo vào đây, gốc toạ độ ở gót chân */
.d3__rig {
  position: absolute;
  bottom: 12px;
  left: 50%;
  width: 0;
  height: 152px;
  transform-style: preserve-3d;
  /* Nhịp dài hơn + easing mượt để nhảy không bị giật */
  animation: var(--move, d3shuffle) calc(var(--beat, 0.55s) * 2.2) cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  animation-delay: var(--delay, 0s);
}

/* Bóng đổ dưới sàn kính */
.d3__shadow {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 62px;
  height: 16px;
  margin-left: -31px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 72%);
  filter: blur(2px);
  animation: d3shadow calc(var(--beat, 0.5s) * 2) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes d3shadow {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(0.82); opacity: 0.35; }
}

/* ---------- Khối hộp dùng chung ---------- */
.d3box {
  position: absolute;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
}

.d3box > span {
  position: absolute;
  display: block;
  background: var(--face, var(--main, #ff2e88));
  border-radius: inherit;
}

.d3box__f,
.d3box__b {
  inset: 0;
}

.d3box__f { transform: translateZ(calc(var(--d) / 2)); }

.d3box__b {
  transform: translateZ(calc(var(--d) / -2)) rotateY(180deg);
  filter: brightness(0.55);
}

.d3box__l,
.d3box__r {
  top: 0;
  left: 50%;
  width: var(--d);
  height: var(--h);
  margin-left: calc(var(--d) / -2);
}

.d3box__r {
  transform: translateX(calc(var(--w) / 2)) rotateY(90deg);
  filter: brightness(0.78);
}

.d3box__l {
  transform: translateX(calc(var(--w) / -2)) rotateY(-90deg);
  filter: brightness(0.68);
}

/* ---------- Thân ---------- */
.d3__torso {
  --w: 52px;
  --h: 58px;
  --d: 30px;
  top: 44px;
  left: -26px;
  border-radius: 10px 10px 6px 6px;
}

/* Áo hai tông + vệt neon chạy dọc ngực */
.d3__torso .d3box__f {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 45%),
    linear-gradient(105deg, var(--trim, #00e5ff) 0 26%, var(--main, #ff2e88) 27%);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.35);
}

/* ---------- Đầu ---------- */
.d3__head {
  position: absolute;
  top: -2px;
  left: -23px;
  width: 46px;
  height: 46px;
  transform-style: preserve-3d;
  animation: d3head var(--beat, 0.5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* Mặt trước = avatar TikTok thật */
.d3__face {
  position: absolute;
  inset: 0;
  transform: translateZ(20px);
  border-radius: 8px;
  overflow: hidden;
  background: #241c2e;
  box-shadow:
    inset 0 0 0 2px var(--trim, #00e5ff),
    0 0 12px rgba(0, 229, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.d3__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.d3__face--fallback {
  font-family: system-ui, sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(160deg, var(--main, #ff2e88), var(--trim, #00e5ff));
}

.d3__headside {
  position: absolute;
  display: block;
  background: #2b2136;
  border-radius: 6px;
}

.d3__headside--b {
  inset: 0;
  transform: translateZ(-20px) rotateY(180deg);
  background: #1d1626;
}

.d3__headside--l,
.d3__headside--r {
  top: 0;
  left: 50%;
  width: 40px;
  height: 46px;
  margin-left: -20px;
  background: linear-gradient(180deg, #342842, #1f1829);
}

.d3__headside--r { transform: translateX(23px) rotateY(90deg); }
.d3__headside--l { transform: translateX(-23px) rotateY(-90deg); }

/* Nóc đầu — hắt sáng đèn trần xuống */
.d3__headside--t {
  top: 0;
  left: 50%;
  width: 46px;
  height: 40px;
  margin-left: -23px;
  transform: translateY(-20px) rotateX(90deg);
  background: linear-gradient(180deg, #3d2f4d, #241c2e);
}

/* Vương miện Top 1 */
.d3__crown {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 34px;
  height: 16px;
  margin-left: -17px;
  transform: translateZ(14px);
  background: linear-gradient(180deg, #ffe14d, #d9a521);
  clip-path: polygon(0 100%, 0 30%, 20% 62%, 50% 0, 80% 62%, 100% 30%, 100% 100%);
  filter: drop-shadow(0 0 6px rgba(255, 225, 77, 0.9));
}

/* ---------- Tay ---------- */
.d3__arm {
  --w: 14px;
  --h: 30px;
  --d: 14px;
  --face: var(--main, #ff2e88);
  top: 48px;
  border-radius: 7px;
  transform-origin: center top;
}

.d3__arm--l {
  left: -40px;
  animation: d3armL var(--beat, 0.5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.d3__arm--r {
  left: 26px;
  animation: d3armR var(--beat, 0.5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* Cẳng tay gập ở khuỷu → động tác có khớp, không phải que thẳng */
.d3__forearm {
  --w: 12px;
  --h: 28px;
  --d: 12px;
  --face: #f2c9a8;
  top: 28px;
  left: 1px;
  border-radius: 6px;
  transform-origin: center top;
  animation: d3forearm var(--beat, 0.5s) ease-in-out infinite;
  animation-delay: calc(var(--delay, 0s) + 0.08s);
}

/* ---------- Chân ---------- */
.d3__leg {
  --w: 18px;
  --h: 52px;
  --d: 18px;
  --face: #241c33;
  top: 100px;
  border-radius: 8px 8px 4px 4px;
  transform-origin: center top;
}

.d3__leg--l {
  left: -20px;
  animation: d3legL var(--beat, 0.5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.d3__leg--r {
  left: 2px;
  animation: d3legR var(--beat, 0.5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.d3__shoe {
  --w: 20px;
  --h: 12px;
  --d: 26px;
  --face: var(--trim, #00e5ff);
  top: 46px;
  left: -1px;
  border-radius: 4px 4px 6px 6px;
}

/* ---------- Viền phát sáng cho VIP / bục top ---------- */
.d3--glow .d3__torso .d3box__f,
.d3--glow .d3__face {
  box-shadow:
    inset 0 0 0 2px var(--trim, #00e5ff),
    0 0 18px var(--glow, #ff2e88);
}

.d3__label {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translate3d(-50%, 0, 60px);
  max-width: 150px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(8, 4, 20, 0.65);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  text-shadow: 0 0 6px var(--glow, #ff2e88), 0 2px 4px #000;
}

/* ============================================================
   VŨ ĐẠO — mỗi điệu là một bài, chạy trên bộ khung
   ============================================================ */

/* Shuffle: bước ngang nhanh, người đổ theo hướng bước */
@keyframes d3shuffle {
  0%, 100% { transform: translate3d(-10px, 0, 0) rotateY(-24deg) rotateZ(-4deg); }
  25% { transform: translate3d(-4px, -10px, 10px) rotateY(-8deg) rotateZ(0deg); }
  50% { transform: translate3d(10px, 0, 0) rotateY(24deg) rotateZ(4deg); }
  75% { transform: translate3d(4px, -10px, 10px) rotateY(8deg) rotateZ(0deg); }
}

/* Wave: sóng chạy dọc người, ngả trước ngả sau */
@keyframes d3wave {
  0%, 100% { transform: rotateX(-16deg) rotateY(-14deg) translateY(0); }
  30% { transform: rotateX(10deg) rotateY(4deg) translateY(-8px); }
  55% { transform: rotateX(-6deg) rotateY(18deg) translateY(-2px); }
  80% { transform: rotateX(6deg) rotateY(-4deg) translateY(-9px); }
}

/* Spin: xoay trọn vòng, nhún ở nửa vòng */
@keyframes d3spin {
  0% { transform: rotateY(0deg) translateY(0); }
  25% { transform: rotateY(90deg) translateY(-12px); }
  50% { transform: rotateY(180deg) translateY(0); }
  75% { transform: rotateY(270deg) translateY(-12px); }
  100% { transform: rotateY(360deg) translateY(0); }
}

/* Robot: chuyển động giật cục từng nấc */
@keyframes d3robot {
  0%, 24% { transform: rotateY(-30deg) rotateZ(-6deg) translateY(0); }
  25%, 49% { transform: rotateY(0deg) rotateZ(0deg) translateY(-8px); }
  50%, 74% { transform: rotateY(30deg) rotateZ(6deg) translateY(0); }
  75%, 100% { transform: rotateY(0deg) rotateZ(0deg) translateY(-8px); }
}

/* Lắc hông, vai đánh ngược chiều */
@keyframes d3hips {
  0%, 100% { transform: translateX(-6px) rotateZ(-8deg) rotateY(-16deg); }
  50% { transform: translateX(6px) rotateZ(8deg) rotateY(16deg); }
}

/* Jumpstyle: bật cao, vặn mình trên không */
@keyframes d3jumpstyle {
  0%, 100% { transform: translateY(0) rotateY(0deg) rotateZ(0deg); }
  22% { transform: translateY(-30px) rotateY(38deg) rotateZ(-8deg); }
  45% { transform: translateY(-6px) rotateY(0deg) rotateZ(0deg); }
  68% { transform: translateY(-26px) rotateY(-34deg) rotateZ(8deg); }
}

/* ---------- Chuyển động từng bộ phận ---------- */

@keyframes d3head {
  0%, 100% { transform: rotateZ(-6deg) rotateY(-8deg) translateY(0); }
  50% { transform: rotateZ(6deg) rotateY(8deg) translateY(-3px); }
}

@keyframes d3armL {
  0%, 100% { transform: rotateZ(26deg) rotateX(-20deg); }
  50% { transform: rotateZ(-52deg) rotateX(30deg); }
}

@keyframes d3armR {
  0%, 100% { transform: rotateZ(-26deg) rotateX(30deg); }
  50% { transform: rotateZ(52deg) rotateX(-20deg); }
}

@keyframes d3forearm {
  0%, 100% { transform: rotateX(-46deg) rotateZ(6deg); }
  50% { transform: rotateX(-6deg) rotateZ(-6deg); }
}

@keyframes d3legL {
  0%, 100% { transform: rotateX(24deg) rotateZ(3deg); }
  50% { transform: rotateX(-20deg) rotateZ(-2deg); }
}

@keyframes d3legR {
  0%, 100% { transform: rotateX(-20deg) rotateZ(-3deg); }
  50% { transform: rotateX(24deg) rotateZ(2deg); }
}

/* Đang tặng quà — sáng rực lên tại chỗ */
.d3.is-donating .d3__torso .d3box__f,
.d3.is-donating .d3__face {
  box-shadow:
    inset 0 0 0 2px #ffe14d,
    0 0 26px rgba(255, 225, 77, 0.95);
}

.d3.is-donating .d3__rig {
  filter: brightness(1.3) drop-shadow(0 0 14px rgba(255, 225, 77, 0.8));
}