@keyframes bounce {
  0%, 100% {
    transform: translate(-84%, -80%) scale(0.95, 1);
  }
  25%, 75% {
    transform: translate(-85%, -80%) scale(1, 1);
  }
  50% {
    transform: translate(-86%, -80%) scale(0.95, 1);
  }
}

@media (prefers-reduced-motion) {
  div::after {
    animation: none !important;
  }
}

div {
  --barrier: gold;
  --barrier-dark: orange;
  --string: #c00;
  --string-light: #d33;
  --string-dark: #a00;
  --wall: #69c;
  --floor-start: #666;
  --floor-end: #555;
  --top: 75%;
  --door: #4a4759;
  --door2: #2a2739;
  --skin: #fca;
  --skin-light: #fdb;
  --skin-dark: #fb9;
  --shirt: #eee;
  --shirt-light: #fff;
  --shirt-dark: #ddd;
  --pants: #748500;
  --shoe: #5555FF;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    /* barrier */
    radial-gradient(50% 50% at 50% 100%, var(--barrier) 4vmin, #0000 0) calc(50% - 16.25vmin) calc(75% - 1vmin) / 35vmin 27vmin repeat-x,
    radial-gradient(50% 50% at 50% 100%, var(--barrier-dark) 4vmin, #0000 0) calc(50% - 16.5vmin) calc(75% - 1.1vmin) / 35vmin 27vmin repeat-x,
    radial-gradient(var(--barrier) 2vmin, #0000 0) calc(50% - 16.5vmin) calc(75% - 9vmin) / 35vmin 35vmin repeat-x,
    radial-gradient(var(--barrier-dark) 1.6vmin, #0000 0) calc(50% - 16.5vmin) calc(75% - 8.25vmin) / 35vmin 35vmin repeat-x,
    linear-gradient(90deg, var(--barrier-dark) 0.5vmin, var(--barrier) 0 2vmin, #0000 0) 50% 75% / 35vmin 22vmin repeat-x,
    linear-gradient(var(--door) 0 0) 50% calc(75% - 10vmin) / 35vmin 22vmin no-repeat,
    radial-gradient(60% 55% at 50% 0, #0000 80%, var(--string-light) 0, var(--string) 84% 88%, var(--string-dark)  90%, #0000 0) calc(50% + 1vmin) calc(75% - 1vmin) / 35vmin 22vmin repeat-x,

    radial-gradient(80% 50% at 50% 50%, #0003 3.5vmin, #0000 6vmin) calc(50% - 16.25vmin) calc(75% + 10vmin) / 35vmin 17vmin repeat-x,
    linear-gradient(#0000, #0002, #0000) 0 calc(75% + 6vmin) / calc(50% - 14vmin) 1.5vmin no-repeat,
    linear-gradient(#0000, #0002, #0000) 100% calc(75% + 6vmin) / calc(50% - 14vmin) 1.5vmin no-repeat,
    /* base (floor + wall) */
    linear-gradient(#0000 75%, var(--floor-start) 0, var(--floor-end)),
    /* door */
    radial-gradient(farthest-side at 50% 100%, var(--door2) 99.9%, #0000 0) calc(50% + 1vmin) calc(75% - 48vmin) / 41vmin 20vmin no-repeat,
    linear-gradient(90deg, var(--door2), #0000 12% 90%, var(--door2)) calc(50% + 1vmin) calc(75% - 10vmin) / 41vmin 45vmin no-repeat,
    linear-gradient(var(--door2) 5%, var(--door) 35%) calc(50% + 1vmin) calc(75% - 10vmin) / 41vmin 45vmin no-repeat,
    /* base */
    linear-gradient(#0000 50%, #fff2),
    linear-gradient(#85566d, #bf707f),
    var(--wall)
    ;

  &::after {
    animation: bounce 2.5s alternate linear infinite;
    content: "";
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-85%, -80%);
    width: 40vmin;
    height: 60vmin;
    background: 
      radial-gradient(100% 60% at 50% 100%, #0000 80%, var(--skin-dark) 82% 98%, #0000) 50% 12% / 4% 5%,
      /* mouth */
      radial-gradient(100% 50% at 50% 100%, #0000 80%, #0005 82% 98%, #0000) 50% 15% / 10% 5%,
      radial-gradient(100% 50% at 50% 100%, #0000 80%, var(--skin-dark) 82% 98%, #0000) 50% 15% / 10% 5%,
      /* glasses */
      radial-gradient(farthest-side at 50% 20%, #000 99%, #0000 0) 43% 10% / 11% 5%,
      radial-gradient(farthest-side at 50% 20%, #000 99%, #0000 0) 57% 10% / 11% 5%,
      radial-gradient(farthest-side at 50% 100%, #0000 80%, #000 0 99%, #0000 0) 50% 10% / 11% 3%,
      linear-gradient(#000 0 0) 50% 10% / 25% 1%,
      /* head */
      radial-gradient(farthest-side at 50% 100%, var(--skin) 99%, #0000) 50% 0 / 25% 7.5%,
      radial-gradient(farthest-side at 50% 0%, var(--skin) 99%, #0000) 50% 8.5% / 25% 14%
      ;
    background-repeat: no-repeat;
  }

  &::before {
    content: "NOPE!";
    content: "Fire Wall";
    font-family: Arial, sans-serif;
    font-size: 2.5vmin;
    font-weight: bold;
    letter-spacing: -0.1vmin;
    text-transform: uppercase;
    box-sizing: border-box;
    padding-top: 21vmin;
    text-align: center;
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-85%, -80%);
    width: 40vmin;
    height: 60vmin;
    background: 
      /* clipboard */
      radial-gradient(circle at 70% 55%, var(--skin) 5%, #0000 5.1%),
      linear-gradient(-10deg, #0000 20%, gray 0 80%, #0000 0) 64% 45% / 10% 5%,
      linear-gradient(-10deg, #0000 11%, brown 0 89%, #0000 0) 65% 55% / 20% 20%,
      linear-gradient(-10deg, #0000 11%, #dda 0 89%, #0000 0) 64.5% 54.5% / 20% 20%,
      radial-gradient( at 72% 52%, var(--skin) 6%, #0000 6.1%),
      /* glasses */
      linear-gradient(#000 0 0) 50% 10% / 25% 1%,
      /* head */
      radial-gradient(farthest-side at 50% 100%, var(--skin-dark) 99%, #0000) 50% 0 / 25% 7.5%,
      radial-gradient(farthest-side at 50% 0%, var(--skin-dark) 99%, #0000) 50% 8.5% / 25% 14%,
      radial-gradient(farthest-side at 50% 0%, #c002 99%, #0000) 50% 11% / 19% 13%,
      /* ears */
      radial-gradient(120% 100% at 39.5% 13.5%, var(--skin-dark) 3%, #0000 0),
      radial-gradient(120% 100% at 60.5% 13.5%, var(--skin-dark) 3%, #0000 0),
      /* neck */
      radial-gradient(80% 50%, var(--skin-dark) 99%, #FFFF) 50% 15% / 12% 12%,
      /* belt */
      linear-gradient(90deg, #630 40%, silver 0 60%, #630 0) 50% 56.5% / 30% 3%,
      /* torso */
      radial-gradient(100% 50% at 50% 100%, #0000 80%, #0001 0 90%, #0000 0) 50% 41% / 20% 10%,
      radial-gradient(farthest-side at 50% 130%, var(--shirt) 99%, #0000) 50% 23.75% / 48% 5%,
      radial-gradient(50% 120% at 50% 0%, var(--shirt) 99%, #0000) 50% 39% / 45% 30%,
      /* legs */
      conic-gradient(at 15.5% 170%, #0000 10deg, var(--pants) 0 19deg, #0000 0) 0 93% / 100% 50%,
      conic-gradient(at 84.5% 170%, #0000 341deg, var(--pants) 0 350deg, #0000 0) 0 93% / 100% 50%,
      linear-gradient(var(--pants) 0 0) 50% 65% / 5% 5%,
      /* arm 1 */
      radial-gradient(circle at 29% 32%, var(--skin) 6%, #0000 6.1%),
      radial-gradient(50% 50% at 34% 39%, var(--skin) 15%, #0000 15.1%) 0 0 / 80% 110%,
      radial-gradient(45% 50% at 34% 50%, var(--skin) 15%, #0000 15.1%) 0 0 / 80% 110%,
      radial-gradient(50% 50% at 20% 50%, var(--skin) 99%, #0000) 24.5% 65% / 9.5% 15%,
      radial-gradient(50% 50% at 20% 50%, var(--skin) 99%, #0000) 25% 70% / 12% 10%,
      /* arm 2*/
      radial-gradient(circle at 71% 32%, var(--skin) 6%, #0000 6.1%),
      radial-gradient(50% 50% at 66% 39%, var(--skin) 15%, #0000 15.1%) 100% 0 / 80% 110%,
      /* shoes */
      radial-gradient(farthest-side at 65% 100%, var(--shoe) 99%, #0000) 22% 100% / 15% 4.25%,
      radial-gradient(farthest-side at 40% 100%, var(--shoe) 99%, #0000) 78% 100% / 15% 4%,
      /* shadow */
      radial-gradient(40% 1% at 50% 100%, #0007, #0000),
      #f000;
    background-repeat: no-repeat;
    box-shadow:
      0 4.1vmin 1vmin -4vmin #0007;
  }
}