* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  outline-color: transparent;
}
body {
  align-items: center;
  background: #fafafa;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  transform-style: preserve-3d;
}
:root {
  --speed: 0.25;
  --scale-step: 8;
  --base-width: 100;
  --base-height: calc(var(--base-width) * 1.83333333333);
  --slide-distance: 60;
  --pop-height: 60;
  --base-slide: calc(var(--base-width) * 1);
}
@media (min-width: 768px) {
  :root {
    --base-width: 200;
  }
}
.instruction {
  font-weight: bold;
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  color: #ccc;
  font-size: 2rem;
  font-variant: small-caps;
}
.bears {
  align-items: flex-end;
  border-bottom: 4px solid #aaa;
  display: flex;
  height: calc(var(--base-height) * 1px);
  justify-content: center;
  margin: 0;
  width: calc(var(--base-width) * 2px);
}
.bears__container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bear {
  --bear-color: hsl(25, 80%, calc(var(--lightness) * 1%));
  --claw-color: hsl(25, 80%, calc((var(--lightness) - 20) * 1%));
  --shirt-color: hsl(var(--shirt-hue), 50%, 50%);
  --height: calc((var(--base-height) * ((100 - (var(--bear-index) + 1) * var(--scale-step)) / 100)));
  --width: calc((var(--base-width) * ((100 - (var(--bear-index) + 1) * var(--scale-step)) / 100)));
  --dummy-height: calc((var(--base-height) * ((100 - (var(--bear-index) + 2) * var(--scale-step)) / 100)));
  --dummy-width: calc((var(--base-width) * ((100 - (var(--bear-index) + 2) * var(--scale-step)) / 100)));
  height: calc(var(--height) * 1px);
  display: none;
  position: absolute;
  transform-origin: bottom center;
  transition: transform 0.25s ease;
  width: calc(var(--width) * 1px);
  z-index: calc(var(--bear-count) - var(--bear-index));
/**
   * Bear is actually used as a container
   * We use two half elements to mimic top and bottom
  */
}
.bear .bear-body {
  fill: var(--bear-color);
}
.bear .bear-shirt {
  fill: var(--shirt-color);
}
.bear .bear-claw {
  fill: var(--claw-color);
}
.bear .bear-foot {
  stroke: var(--claw-color);
}
.bear--dummy {
  bottom: 0;
  display: block;
  height: 100%;
  left: 50%;
  transform: translate(-50%, 0) translate(0, 0);
  width: 100%;
  z-index: auto;
}
.bear--dummy--half {
  bottom: 0;
  height: calc(var(--dummy-height) * 0.5px);
  left: 50%;
  overflow: hidden;
  position: absolute;
  transform: translate(-50%, calc(var(--translation) * 1%));
  transform-origin: bottom center;
  width: calc(var(--dummy-width) * 1px);
  z-index: 2;
}
.bear--dummy svg {
  height: 200%;
  position: absolute;
  width: 100%;
}
.bear--dummy--top {
  --translation: -100;
}
.bear--dummy--top svg {
  top: 0;
}
.bear--dummy--bottom {
  --translation: 0;
}
.bear--dummy--bottom svg {
  bottom: 0;
}
.bear__half {
  height: 50%;
  left: 50%;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-50%, calc(var(--translation) * 1%));
  width: 100%;
}
.bear__half svg {
  height: 200%;
  position: absolute;
  width: 100%;
}
.bear__half--top {
  --translation: -100;
}
.bear__half--top svg {
  top: 0;
}
.bear__half--bottom {
  --translation: 0;
}
.bear__half--bottom svg {
  bottom: 0;
}
[type='checkbox'],
[type='reset'] {
  display: none;
}
label {
  cursor: var(--cursor, 'pointer');
}
[for='reset'] {
  height: 44px;
  cursor: pointer;
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  transition: transform calc(var(--speed) * 1s) ease;
  width: 44px;
}
[for='reset']:hover {
  transform: translate(0, -5%) scale(1.1);
}
[for='reset']:hover svg path {
  fill: #111;
}
[for='reset'] svg {
  height: 44px;
  width: 44px;
}
[for='reset'] svg path {
  transition: fill calc(var(--speed) * 1s) ease;
  fill: #aaa;
}
/**
 * A lot needs to happen when we check the box
 * 1. Disable clicking til animation finished
 * 2. Move the parent bear
 * 3. Reveal the baby bear
 * 4. Move the baby bear
 * 5. Show the real baby bear
 * 6. Show the new input
 * 7. Hide the dummy baby bear
 * 8. Fade out the parent bear
*/
input:checked + .bear {
  pointer-events: none;
  -webkit-animation: slideLeft calc(var(--speed) * 1s) forwards, slideOut calc(var(--speed) * 1s) calc(var(--speed) * 5s) forwards;
          animation: slideLeft calc(var(--speed) * 1s) forwards, slideOut calc(var(--speed) * 1s) calc(var(--speed) * 5s) forwards;
}
input:checked + .bear .bear__half--top {
  transform-origin: bottom left;
  -webkit-animation: open calc(var(--speed) * 2s) calc(var(--speed) * 1s) forwards;
          animation: open calc(var(--speed) * 2s) calc(var(--speed) * 1s) forwards;
}
input:checked + .bear .bear--dummy {
  -webkit-animation: popOut calc(var(--speed) * 1s) calc(var(--speed) * 2s) forwards, slideRight calc(var(--speed) * 1s) calc(var(--speed) * 3s) forwards, popDown calc(var(--speed) * 1s) calc(var(--speed) * 4s) forwards, disappear 0s calc(var(--speed) * 5s) forwards;
          animation: popOut calc(var(--speed) * 1s) calc(var(--speed) * 2s) forwards, slideRight calc(var(--speed) * 1s) calc(var(--speed) * 3s) forwards, popDown calc(var(--speed) * 1s) calc(var(--speed) * 4s) forwards, disappear 0s calc(var(--speed) * 5s) forwards;
}
input:checked + .bear + .bear {
  display: block;
  -webkit-animation: appear 0s calc(var(--speed) * 5s) both;
          animation: appear 0s calc(var(--speed) * 5s) both;
}
input:checked + .bear + input:checked + .bear {
  -webkit-animation: slideLeft calc(var(--speed) * 1s) forwards, slideOut calc(var(--speed) * 1s) calc(var(--speed) * 6s) forwards;
          animation: slideLeft calc(var(--speed) * 1s) forwards, slideOut calc(var(--speed) * 1s) calc(var(--speed) * 6s) forwards;
}
input:checked + .bear + input + .bear {
  display: block;
  -webkit-animation: appear 0s calc(var(--speed) * 5s) both;
          animation: appear 0s calc(var(--speed) * 5s) both;
}
@-webkit-keyframes disappear {
  to {
    transform: scale(0);
  }
}
@keyframes disappear {
  to {
    transform: scale(0);
  }
}
@-webkit-keyframes appear {
  from {
    transform: scale(0);
  }
}
@keyframes appear {
  from {
    transform: scale(0);
  }
}
@-webkit-keyframes slideLeft {
  to {
    transform: translate(calc((var(--base-slide) * -1px) + var(--slide-distance) * -1%), 0);
  }
}
@keyframes slideLeft {
  to {
    transform: translate(calc((var(--base-slide) * -1px) + var(--slide-distance) * -1%), 0);
  }
}
@-webkit-keyframes slideOut {
  from {
    transform: translate(calc((var(--base-slide) * -1px) + var(--slide-distance) * -1%), 0);
  }
  to {
    opacity: 0;
    transform: translate(calc((var(--base-slide) * -1px) + var(--slide-distance) * -2%), 0);
  }
}
@keyframes slideOut {
  from {
    transform: translate(calc((var(--base-slide) * -1px) + var(--slide-distance) * -1%), 0);
  }
  to {
    opacity: 0;
    transform: translate(calc((var(--base-slide) * -1px) + var(--slide-distance) * -2%), 0);
  }
}
@-webkit-keyframes open {
  0% {
    transform: translate(-50%, calc(var(--translation) * 1%)) translate(0, 0);
  }
  33.333333333333336% {
    transform: translate(-50%, calc(var(--translation) * 1%)) translate(0, -100%);
  }
  66.66666666666667% {
    transform: translate(-50%, calc(var(--translation) * 1%)) translate(-100%, -100%);
  }
  100% {
    transform: translate(-50%, calc(var(--translation) * 1%)) translate(-100%, 100%);
  }
}
@keyframes open {
  0% {
    transform: translate(-50%, calc(var(--translation) * 1%)) translate(0, 0);
  }
  33.333333333333336% {
    transform: translate(-50%, calc(var(--translation) * 1%)) translate(0, -100%);
  }
  66.66666666666667% {
    transform: translate(-50%, calc(var(--translation) * 1%)) translate(-100%, -100%);
  }
  100% {
    transform: translate(-50%, calc(var(--translation) * 1%)) translate(-100%, 100%);
  }
}
@-webkit-keyframes popOut {
  to {
    transform: translate(-50%, calc(var(--pop-height) * -1%)) translate(0, 0);
  }
}
@keyframes popOut {
  to {
    transform: translate(-50%, calc(var(--pop-height) * -1%)) translate(0, 0);
  }
}
@-webkit-keyframes slideRight {
  from {
    transform: translate(-50%, calc(var(--pop-height) * -1%)) translate(0, 0);
  }
  to {
    transform: translate(-50%, calc(var(--pop-height) * -1%)) translate(calc((var(--base-slide) * 1px) + var(--slide-distance) * 1%), 0);
  }
}
@keyframes slideRight {
  from {
    transform: translate(-50%, calc(var(--pop-height) * -1%)) translate(0, 0);
  }
  to {
    transform: translate(-50%, calc(var(--pop-height) * -1%)) translate(calc((var(--base-slide) * 1px) + var(--slide-distance) * 1%), 0);
  }
}
@-webkit-keyframes popDown {
  from {
    transform: translate(-50%, calc(var(--pop-height) * -1%)) translate(calc((var(--base-slide) * 1px) + var(--slide-distance) * 1%), 0);
  }
  to {
    transform: translate(-50%, calc(var(--pop-height) * -1%)) translate(calc((var(--base-slide) * 1px) + var(--slide-distance) * 1%), calc(var(--pop-height) * 1%));
  }
}
@keyframes popDown {
  from {
    transform: translate(-50%, calc(var(--pop-height) * -1%)) translate(calc((var(--base-slide) * 1px) + var(--slide-distance) * 1%), 0);
  }
  to {
    transform: translate(-50%, calc(var(--pop-height) * -1%)) translate(calc((var(--base-slide) * 1px) + var(--slide-distance) * 1%), calc(var(--pop-height) * 1%));
  }
}