/* LontonAZ Halloween: Xương Khô & Nhện 1.0.10 — lớp trang trí KHÔNG bắt chuột. */

/* ---------- Bộ xương trên thanh Lịch sử mua hàng ---------- */
/* Anchor bám đúng mép trên của #atc-history-fab (JS đo thật bằng
   getBoundingClientRect, không đoán chiều cao). z-index 999998: cao hơn
   nút lịch sử (999997) để chân xương đè lên mặt nút, nhưng khi drawer
   mở ra thì JS tự ẩn anchor, nên xương không bao giờ đè lên panel. */
.lhw2-skel-anchor {
    position: fixed;
    z-index: 999998;
    overflow: visible;
    pointer-events: none;
}
.lhw2-skel {
    position: absolute;
    left: 50%;
    top: -64px; /* hông xương ngồi đúng mép trên của thanh, thân ở trên, chân buông xuống */
    width: 62px;
    height: 158px;
    transform: translateX(-50%);
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
    animation: lhw2-skel-bob 4s ease-in-out infinite;
}
@keyframes lhw2-skel-bob {
    0%, 100% { margin-top: 0; transform: translateX(-50%) rotate(-1.5deg); }
    50%      { margin-top: 2px; transform: translateX(-50%) rotate(1.5deg); }
}
/* Chân đung đưa: mỗi chân xoay quanh hông, lệch pha nhau. */
.lhw2-leg {
    transform-box: fill-box;
    transform-origin: 50% 0;
    animation: lhw2-leg-swing 2.2s ease-in-out infinite alternate;
}
.lhw2-leg-2 { animation-delay: -1.1s; }
@keyframes lhw2-leg-swing {
    from { transform: rotate(-11deg); }
    to   { transform: rotate(13deg); }
}
/* Lồng đèn lắc nhẹ quanh tay cầm, ánh sáng nhấp nháy như lửa. */
.lhw2-lantern {
    transform-box: fill-box;
    transform-origin: 50% 0;
    animation: lhw2-lantern-sway 3s ease-in-out infinite alternate;
}
@keyframes lhw2-lantern-sway {
    from { transform: rotate(-7deg); }
    to   { transform: rotate(7deg); }
}
.lhw2-glow {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: lhw2-flicker 1.6s ease-in-out infinite alternate;
}
@keyframes lhw2-flicker {
    from { opacity: .45; transform: scale(.92); }
    to   { opacity: .9; transform: scale(1.06); }
}

/* ---------- Nhện ở logo ---------- */
.lhw2-web {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 84px;
    height: 84px;
    opacity: .9;
    z-index: 10;
    pointer-events: none;
}
.lhw2-spider-wrap {
    position: absolute;
    top: 2px;
    right: 16px;
    width: 30px;
    z-index: 11;
    pointer-events: none;
}
.lhw2-thread {
    width: 1.5px;
    height: 12px;
    margin: 0 auto;
    background: rgba(220, 210, 240, .9);
    transition: height 1.1s ease-in-out;
}
/* Đu xuống một chút: sợi dây dài ra, nhện tự tụt theo (không cần translate). */
.lhw2-spider-wrap.lhw2-drop .lhw2-thread { height: 44px; }
.lhw2-spider {
    display: block;
    width: 30px;
    height: 36px;
    animation: lhw2-spider-sway 5s ease-in-out infinite alternate;
}
@keyframes lhw2-spider-sway {
    from { transform: rotate(-4deg); }
    to   { transform: rotate(4deg); }
}

.lhw2-hidden { display: none !important; }

@media (max-width: 600px) {
    .lhw2-skel { top: -52px; width: 52px; height: 132px; }
    .lhw2-web { width: 56px; height: 56px; }
    .lhw2-spider-wrap { width: 24px; right: 10px; }
    .lhw2-spider { width: 24px; height: 29px; }
    .lhw2-spider-wrap.lhw2-drop .lhw2-thread { height: 34px; }
}

/* Tôn trọng người dùng giảm chuyển động: hai nhân vật đứng yên. */
@media (prefers-reduced-motion: reduce) {
    .lhw2-skel, .lhw2-leg, .lhw2-lantern, .lhw2-glow, .lhw2-spider {
        animation: none !important;
    }
    .lhw2-thread { transition: none !important; }
}