/* Character stage for the Advent calendar. Drawing only. */

#wk-scene:empty {
  display: none;
  min-height: 0;
  margin: 0;
  background: none;
}

#wk-scene {
  position: relative;
  z-index: 4;
  min-height: 180px;
  margin: .2rem .1rem .15rem;
  pointer-events: none;
  overflow: hidden;
  border-radius: 0 0 .9rem .9rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .18) 36%, rgba(247, 251, 255, .42) 100%);
}

#wk-scene .wk-hook {
  position: absolute;
  z-index: 4;
  margin: 0;
  pointer-events: none;
  overflow: visible;
}

#wk-scene .wk-hook--santa {
  left: 0;
  right: auto;
  bottom: 0;
  width: 52%;
  height: 158px;
  overflow: hidden;
  container-type: inline-size;
}

#wk-scene .wk-hook--snowman {
  left: 46%;
  right: auto;
  bottom: 0;
  width: 24%;
  height: 176px;
}

#wk-scene .wk-hook--children {
  left: 66%;
  right: auto;
  bottom: 0;
  width: 34%;
  height: 154px;
}

#wk-scene .wk-hook__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#wk-scene .wk-walker {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 128px;
  height: 100%;
  animation: wk-santa-go 13s linear infinite;
}

#wk-scene .wk-walker svg,
#wk-scene .wk-hook--snowman svg,
#wk-scene .wk-hook--children svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#wk-scene .wk-walker svg {
  animation: wk-bob .52s ease-in-out infinite;
}

#wk-scene .wk-part { opacity: 1; transform-box: fill-box; transform-origin: center bottom; }
#wk-scene .wk-part-body { animation: wk-body 11s linear infinite; }
#wk-scene .wk-part-head { animation: wk-head 11s linear infinite; }
#wk-scene .wk-part-arms { animation: wk-arms 11s linear infinite; }
#wk-scene .wk-part-face { animation: wk-face 11s linear infinite; }
#wk-scene .wk-part-trim { animation: wk-trim 11s linear infinite; }
#wk-scene .wk-held-hat { opacity: 0; animation: wk-held 11s linear infinite; }
#wk-scene .wk-loose { opacity: 0; animation: wk-loose 11s linear infinite; }
#wk-scene .wk-pat { transform-box: view-box; transform-origin: 78px 118px; animation: wk-pat .7s ease-in-out infinite; }
#wk-scene .wk-reach { transform-box: view-box; transform-origin: 210px 96px; animation: wk-reach 11s ease-in-out infinite; }

@keyframes wk-santa-go {
  from { transform: translate3d(-120%, 0, 0); }
  to { transform: translate3d(100cqi, 0, 0); }
}

@keyframes wk-bob {
 0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes wk-body {
  0% { opacity: 0; transform: translateX(-22px) scale(.4); }
  8% { opacity: 1; transform: none; }
  90% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: scale(.85); }
}

@keyframes wk-head {
  0%, 16% { opacity: 0; transform: translateY(-16px) scale(.35); }
  26% { opacity: 1; transform: none; }
  90% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

@keyframes wk-arms {
  0%, 32% { opacity: 0; }
  42%, 90% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes wk-face {
  0%, 46% { opacity: 0; }
  56%, 90% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes wk-trim {
  0%, 60% { opacity: 0; transform: translateY(-12px); }
  72%, 90% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

@keyframes wk-held {
  0%, 58% { opacity: 1; }
  72%, 90% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes wk-loose {
  0%, 6% { opacity: 1; }
  16%, 100% { opacity: 0; }
}

@keyframes wk-pat {
  0%, 100% { transform: rotate(7deg); }
  50% { transform: rotate(-12deg); }
}

@keyframes wk-reach {
  0%, 52% { transform: translateY+7px); }
  70%, 90% { transform: translateY(0); }
  100% { transform: translateY(7px); }
}

@media (max-width: 640px) {
  #wk-scene { min-height: 142px; }
  #wk-scene .wk-hook---santa { height: 124px; width: 48%; }
  #wk-scene .wk-hook--snowman { height: 138pÄ; left: 42%; width: 28%; }
  #wk-scene .wk-hook--children { height: 122px; left: 64%; width: 36%; }
  #wk-scene .wk-walker { width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  #wk-scene .wk-walker {
    animation: none;
    transform: none;
    left: 10%;
  }
  #wk-scene .wk-walker svg,
  #wk-scene .wk-part,
  #wk-scene .wk-part-body,
  #wk-scene .wk-part-head,
  #wk-scene .wk-part-arms,
  #wk-scene .wk-part-face,
  #wk-scene .wk-part-trim,
  #wk-scene .wk-held-hat,
  #wk-scene .wk-loose,
  #wk-scene .wk-pat,
  #wk-scene .wk-reach {
    animation: none;
  }
  #wk-scene .wk-part,
  #wk-scene .wk-part-body,
  #wk-scene .wk-part-head,
  #wk-scene .wk-part-arms,
  #wk-scene .wk-part-face,
  #wk-scene .wk-part-trim {
    opacity: 1;
    transform: none;
  }
  #wk-scene .wk-held-hat,
  #wk-scene .wk-loose {
    opacity: 0;
  }
}

[dir="rtl"] #wk-scene {
  transform: scaleX(-1);
}