/* PUDDLE - Halloween splash skeleton (shown only when html.hw; see skeleton.js) */
.hw-skel { --sk-bone: #e9e4f5; --sk-hole: var(--bg-0, #0f212e); --sk-time: 3.2s; }
.hw-skel .poodle, .hw-skel .puddle { display: none; }
.hw-skel .splash-scene { width: 170px; height: 140px; }
.hw-skel .sk-svg { width: 160px; height: 140px; max-width: 100%; overflow: visible; display: block; color: var(--sk-bone); position: relative; z-index: 2; }
.hw-skel .sk-floor { stroke: var(--sk-bone); stroke-opacity: .22; stroke-width: 1.2; stroke-dasharray: 3 4; }
.hw-skel .sk-shadow { fill: var(--sk-bone); fill-opacity: .08; }
.hw-skel .sk-hole { fill: var(--sk-hole); }
.hw-skel .sk-gap { stroke: var(--sk-hole); }
.hw-skel .sk-body { transform-origin: 80px 130px; animation: skWobble var(--sk-time) linear infinite; }
.hw-skel .sk-part { animation: skFall var(--sk-time) linear infinite; }
.hw-skel .sk-jaw-in { transform-origin: 80px 33px; animation: skJaw var(--sk-time) linear infinite; }
.hw-skel .sk-shadow { animation: skShadow var(--sk-time) ease-in-out infinite; transform-origin: 80px 131px; }

/* standing (0-28%) wobble, then still while the bones are loose */
@keyframes skWobble {
    0% { transform: rotate(0); }
    5% { transform: rotate(-1.6deg); }
    10% { transform: rotate(1.6deg); }
    15% { transform: rotate(-1.6deg); }
    20% { transform: rotate(1.4deg); }
    25% { transform: rotate(-.8deg); }
    28%, 100% { transform: rotate(0); }
}
/* jaw clatters while standing; during the fall the part itself moves */
@keyframes skJaw {
    0%, 3%, 8%, 13%, 18%, 23%, 28%, 100% { transform: rotate(0); }
    5.5%, 10.5%, 15.5%, 20.5%, 25% { transform: rotate(14deg); }
}
/* fall (gravity ease-in), bounce on the floor, rest, then pull back together (ease-in-out) */
@keyframes skFall {
    0%, 28% { transform: translate(0, 0) rotate(0); animation-timing-function: cubic-bezier(.55, 0, 1, .55); }
    44% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); animation-timing-function: cubic-bezier(0, .5, .5, 1); }
    50% { transform: translate(calc(var(--dx) * 1.1), calc(var(--dy) - var(--b))) rotate(calc(var(--rot) * 1.12)); animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
    55% { transform: translate(calc(var(--dx) * 1.18), var(--dy)) rotate(calc(var(--rot) * 1.2)); animation-timing-function: cubic-bezier(0, .5, .5, 1); }
    58% { transform: translate(calc(var(--dx) * 1.2), calc(var(--dy) - var(--b) * .3)) rotate(calc(var(--rot) * 1.22)); animation-timing-function: cubic-bezier(.5, 0, 1, .5); }
    61%, 72% { transform: translate(calc(var(--dx) * 1.22), var(--dy)) rotate(calc(var(--rot) * 1.22)); animation-timing-function: cubic-bezier(.65, 0, .3, 1); }
    92%, 100% { transform: translate(0, 0) rotate(0); }
}
@keyframes skShadow {
    0%, 28%, 92%, 100% { transform: scaleX(.7); opacity: .8; }
    50%, 72% { transform: scaleX(1.1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .hw-skel .sk-body, .hw-skel .sk-part, .hw-skel .sk-jaw-in, .hw-skel .sk-shadow { animation: none !important; transform: none !important; }
}
@media (max-width: 400px) {
    .hw-skel .splash-scene { width: 150px; height: 124px; }
    .hw-skel .sk-svg { width: 142px; height: 124px; }
}