@use postcss-nested;

:root {
  --background-color: #636480;
  --gastly-background-color: #3a3434;
  --gastly-shine-color: #635759;
  --gastly-border-color: #3b343b;
  --gastly-eye-shadow-color: #d6d6d6;
  --gastly-eye-color: #342e30;
  --gastly-brow-color: #9f929b;
  --gastly-mouth-color: #bfa4b3;
  --gastly-shape-color: #a0879d;
  --gastly-size: 225px;
  --gastly-mouth-width: 75px;
  --gastly-shape: polygon(65% 0, 90% 20%, 100% 45%, 90% 80%, 65% 100%, 35% 100%, 10% 80%, 0 45%, 10% 20%, 35% 0);
  --gastly-inner-shape: polygon(62% 0, 97% 20%, 100% 45%, 90% 80%, 65% 100%, 35% 100%, 10% 80%, 0 45%, 3% 20%, 38% 0);
  --eye-shape: polygon(0 38%, 16% 0%, 50% 40%, 90% 57%, 81% 88%, 54% 100%, 24% 90%);
  --custom-border:
    drop-shadow(0 -5px var(--gastly-border-color))
    drop-shadow(0 5px 0 var(--gastly-border-color))
    drop-shadow(5px 0 0 var(--gastly-border-color))
    drop-shadow(-5px 0 var(--gastly-border-color));
  --haunter-background-light-color: #c0b0cd;
  --haunter-background-normal-color: #a0879d;
  --haunter-background-dark-color: #71616e;
  --haunter-border-color: #433640;
  --haunter-eye-shadow-color: #c4bcc0;
  --haunter-pupil-color: #222;
  --haunter-mouth-light-color: #b5809a;
  --haunter-mouth-dark-color: #855a6d;
  --haunter-body-gradient:
    linear-gradient(
      to bottom,
      var(--haunter-background-light-color) 49%,
      var(--haunter-background-dark-color) 49%
    );
  --custom-border:
    drop-shadow(3px 0 0 var(--haunter-border-color))
    drop-shadow(-3px 0 0 var(--haunter-border-color))
    drop-shadow(0 3px 0 var(--haunter-border-color))
    drop-shadow(0 -3px 0 var(--haunter-border-color));
  --haunter-shape:
    polygon(
      3% 8%,
      40% 20%,
      44% 18%,
      55% 18%,
      60% 21%,
      97% 8%,
      77% 35%,
      100% 32%,
      79% 50%,
      91% 50%,
      66% 69%,
      64% 76%,
      68% 85%,
      61% 82%,
      74% 96%,
      56% 90%,
      46% 76%,
      47% 85%,
      9% 49%,
      22% 51%,
      1% 31%,
      22% 35%
    );
  --haunter-inner-shape: polygon(18% 17%, 41% 26%, 46% 22%, 55% 22%, 59% 26%, 82% 19%, 72% 39%, 98% 35%, 80% 50%, 87% 51%, 62% 67%, 60% 78%, 54% 75%, 55% 83%, 43% 71%, 44% 75%, 14% 51%, 22% 51%, 3% 33%, 29% 39%);
  --haunter-eye-shape: polygon(0 0, 100% 85%, 70% 100%, 20% 85%);
  --haunter-mouth-shape: polygon(0% 0%, 18% 6%, 19% 19%, 26% 9%, 37% 12%, 41% 20%, 45% 12%, 55% 12%, 59% 20%, 63% 12%, 74% 9%, 81% 19%, 82% 7%, 99% 0%, 88% 25%, 65% 36%, 62% 27%, 58% 36%, 53% 27%, 50% 36%, 46% 27%, 42% 37%, 38% 27%, 35% 36%, 11% 25%);
  --haunter-nail-shape: polygon(0 30%, 30% 0, 60% 0, 100% 30%, 50% 100%);
  --gengar-background-light-color: #c0b0cd;
  --gengar-background-normal-color: #a0879d;
  --gengar-background-dark-color: #71616e;
  --gengar-border-color: #3f343f;
  --gengar-eye-light-color: #bd7492;
  --gengar-eye-dark-color: #a85e7b;
  --gengar-width: 250px;
  --gengar-height: 250px;
  --gengar-ear-width: 75px;
  --gengar-ear-height: 125px;
  --gengar-shape: polygon(26% 6%, 38% 1%, 62% 1%, 73% 7%, 89% 30%, 95% 61%, 84% 88%, 60% 100%, 39% 100%, 15% 88%, 4% 62%, 9% 31%);
  --gengar-spike-shape: polygon(0 100%, 50% 0, 100% 100%);
  --gengar-ear-shape: polygon(0 100%, 50% 0, 100% 100%);
  --gengar-finger-shape: polygon(0 100%, 50% 0, 100% 100%);
  --gengar-eye-shape: polygon(0 100%, 10% 50%, 45% 0, 85% 40%, 100% 100%);
  --gengar-mouth-shape: polygon(0% 0%, 25% 15%, 50% 17%, 74% 15%, 100% 0%, 93% 23%, 74% 35%, 50% 40%, 25% 36%, 7% 23%);
  --gengar-arm-shape: polygon(0 20%, 40% 0, 100% 40%, 90% 100%, 30% 60%);
  --gengar-bottom-shadow-shape: polygon(13% 21%, 9% 61%, 22% 84%, 41% 91%, 58% 91%, 76% 84%, 90% 60%, 85% 21%, 89% 31%, 93% 62%, 83% 88%, 62% 100%, 39% 100%, 16% 88%, 5% 61%);
  --custom-filter:
    drop-shadow(3px 0 0 var(--gengar-border-color))
    drop-shadow(-3px 0 0 var(--gengar-border-color))
    drop-shadow(0 3px 0 var(--gengar-border-color))
    drop-shadow(0 -3px 0 var(--gengar-border-color));
}

body {
  overflow: hidden;
  background: #112;
}

html,
body,
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.perspective-container {
  perspective: 500px;
}

.poke-gastly {  
& .pokemon-container {
  position: relative;
  z-index: 1;
  width: var(--gastly-size);
  height: var(--gastly-size);
  animation: gastlyFly 2.25s infinite alternate ease-in-out;

  & .gastly-container {
    width: 100%;
    height: 100%;
    filter: var(--custom-border);
    transform: scale(0.85);

    & .gastly {
      background: var(--gastly-shine-color);
      width: 100%;
      height: 100%;
      overflow: hidden;
      clip-path: var(--gastly-shape);

      & .gastly-shadow {
        width: 100%;
        height: 100%;
        background: var(--gastly-background-color);
        overflow: hidden;
        clip-path: var(--gastly-inner-shape);
        transform: translate(0, 15px) scale(1);
      }
    }
  }

  & .eyes-container {
    position: absolute;
    z-index: 5;
    transform: translate(-10px, 55px) scale(0.85);
    display: flex;
    filter: var(--custom-border);

    & .eye-container {
      width: 123px;
      height: 123px;
      background: var(--gastly-eye-shadow-color);
      clip-path: var(--eye-shape);

      &.right {
        transform: scale(-1, 1);
      }

      & .eye-shadow {
        background: white;
        width: 100%;
        height: 100%;
        clip-path: var(--eye-shape);
        transform: translate(0, -15px);

        &::after {
          position: absolute;
          content: "";
          display: block;
          width: 6px;
          height: 15px;
          background: var(--gastly-eye-color);
          transform: translate(83px, 85px);
        }
      }
    }
  }

  & .brows-container {
    position: absolute;
    z-index: 5;
    transform: translate(97px, 100px);
    display: flex;
    justify-content: space-around;
    width: 32px;

    & .brow {
      width: 6px;
      height: 25px;
      background: var(--gastly-brow-color);
      clip-path: polygon(0 0, 100% 60%, 50% 100%, 0 100%, 50% 60%);

      &.right {
        transform: scale(-1, 1);
      }
    }
  }

  & .mouth-container {
    position: absolute;
    transform: translate(75px, 165px);

    & .mouth {
      width: var(--gastly-mouth-width);
      height: 25px;
      background: var(--gastly-mouth-color);
      clip-path: polygon(0 0, 32% 40%, 68% 40%, 100% 0, 100% 50%, 80% 80%, 50% 100%, 20% 80%, 0% 50%);
    }
  }

  & .fangs-container {
    position: absolute;
    transform: translate(75px, 165px);
    display: flex;
    width: var(--gastly-mouth-width);
    justify-content: space-around;

    &::before,
    &::after {
      position: absolute;
      content: "";
      display: block;
      width: 15px;
      height: 35px;
      background: var(--gastly-border-color);
      clip-path: polygon(0 0, 50% 50%, 100% 0);
      transform: translate(-32px, 2px) rotate(18deg);
    }

    &::after {
      transform: translate(32px, 2px) rotate(-18deg);
      z-index: -1;
    }

    & .fang {
      width: 15px;
      height: 35px;
      background: white;
      clip-path: polygon(0 0, 50% 50%, 100% 0);
      transform: translate(-18px, 2px) rotate(18deg);

      &.right {
        transform: translate(18px, 2px) scale(-1, 1) rotate(18deg);
      }
    }
  }
}

.gastly-shape {
  --shape-color: url(#grandient);

  position: absolute;
  z-index: 0;
  width: 400px;
  height: 400px;
  filter:
    drop-shadow(4px 0 0 var(--gastly-border-color))
    drop-shadow(0 4px 0 var(--gastly-border-color))
    drop-shadow(-4px 0 0 var(--gastly-border-color))
    drop-shadow(0 -4px 0 var(--gastly-border-color))
    drop-shadow(8px 8px 0 #454662);
  animation: shapeFly 2s infinite alternate ease-in-out;

  & path {
    fill: var(--shape-color);
  }

  & .shape-2 {
    transform: translate(0, 4px) scale(1, 0.8);

    --shape-color: #a0879d;
    --gastly-border-color: transparent;
  }
}

.background {
  position: absolute;
  z-index: -5;
  background-color: var(--background-color);
  background-image: radial-gradient(circle, #838ea2 40%, #514a6b 70%);
  width: 100%;
  height: 100%;
  display: none;

  & .polygon {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.15);
    clip-path: polygon(25% 65%, 75% 35%, 100% 50%, 100% 100%, 30% 100%);
  }

  & .triangle {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.1);
  }

  & .triangle-1 {
    clip-path: polygon(0 80%, 25% 100%, 0 100%);
  }

  & .triangle-2 {
    clip-path: polygon(0 100%, 40% 80%, 60% 100%);
  }

  & .triangle-3 {
    clip-path: polygon(0 100%, 100% 84%, 100% 100%);
  }

  & .triangle-4 {
    clip-path: polygon(75% 100%, 100% 25%, 100% 100%);
  }
}
}

@keyframes gastlyFly {
  0% {
    transform: translate(-15px, 0);
  }

  100% {
    transform: translate(-15px, 25px);
  }
}

@keyframes shapeFly {
  0% {
    transform: translate(-15px, 0) rotateX(-2deg);
    opacity: 0.9;
  }

  50% {
    opacity: 0.75;
  }

  100% {
    transform: translate(-15px, 25px) rotateX(2deg);
    opacity: 0.9;
  }
}

/* Haunter */

.haunter-container {
  & .haunter {
    width: 300px;
    height: 300px;
    filter: var(--custom-border);

    & .body {
      width: 100%;
      height: 100%;
      background-image: var(--haunter-body-gradient);
      clip-path: var(--haunter-shape);
      animation: haunterFly 2.25s infinite alternate ease-in-out;

      & .inner-shadow {
        width: 100%;
        height: 100%;
        background: var(--haunter-background-normal-color);
        clip-path: var(--haunter-inner-shape);
        transform: scale(1.02);
      }

      & .face-container {
        position: absolute;
        top: 0;
        display: flex;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;

        & .face {
          width: 45%;
          height: 45%;

          & .eyes-container {
            display: flex;
            justify-content: space-between;
            filter: var(--custom-border);

            & .eye {
              width: 55px;
              height: 50px;
              background: var(--haunter-eye-shadow-color);
              clip-path: var(--haunter-eye-shape);

              &::before {
                content: "";
                display: block;
                width: 100%;
                height: 100%;
                background: white;
                transform: translate(2px, -4px);
                clip-path: var(--haunter-eye-shape);
              }

              &::after {
                position: absolute;
                content: "";
                display: block;
                width: 7px;
                height: 12px;
                background: var(--haunter-border-color);

                /* transform: translate(32px, -25px); */
                animation: eyeMove 4s ease-in-out infinite alternate;
              }

              &.right {
                transform: scale(-1, 1);
              }
            }
          }

          & .mouth-container {
            width: 100%;
            height: 100%;
            filter: var(--custom-border);
            position: relative;
            z-index: 3;

            & .mouth {
              width: 100%;
              height: 100%;
              background: var(--haunter-mouth-dark-color);
              transform: translate(0, 5px);
              clip-path: var(--haunter-mouth-shape);

              &::before {
                content: "";
                display: block;
                background: var(--haunter-mouth-light-color);
                width: 100%;
                height: 25%;
                clip-path: polygon(0 0, 100% 0, 85% 90%, 50% 100%, 15% 90%);
              }
            }
          }

          & .mouth-shadow {
            position: absolute;
            width: 45%;
            height: 50%;
            background: var(--haunter-background-dark-color);
            clip-path: var(--haunter-mouth-shape);
            transform: translate(0, -120px);
            z-index: 0;
          }
        }
      }
    }
  }

  & .claw {
    position: absolute;
    width: 120px;
    height: 80px;
    animation: haunterLeftClawsFly 2s infinite alternate ease-in-out;

    &.right {
      animation: haunterRightClawsFly 2s infinite alternate ease-in-out;
    }

    & .nails {
      width: 85%;
      height: 75%;
      display: flex;
      filter: var(--custom-border);

      & .nail {
        width: 25%;
        height: 75%;
        background-image: var(--haunter-body-gradient);
        clip-path: var(--haunter-nail-shape);

        &::before {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background: var(--haunter-background-normal-color);
          transform: translate(0, -3px) scale(1.3, 0.7);
          clip-path: var(--haunter-nail-shape);
        }

        &.nail-1 {
          transform: translate(0, 25px) rotate(-15deg);
        }

        &.nail-2 {
          transform: translate(0, 0);
        }

        &.nail-3 {
          transform: translate(0, 25px) rotate(15deg);
        }
      }
    }

    & .hand-container {
      position: absolute;
      z-index: -1;
      width: 85%;
      height: 50px;
      filter: var(--custom-border);

      & .hand {
        width: 100%;
        height: 100%;
        background: var(--haunter-background-normal-color);
        transform: translate(-10px, -50px);
        clip-path: polygon(15% 33%, 50% -10%, 85% 37%, 81% 79%, 58% 52%, 25% 75%, 15% 75%);
      }
    }

    & .palm-container {
      position: absolute;
      z-index: -2;
      width: 85%;
      height: 50px;
      filter: var(--custom-border);
      display: flex;
      justify-content: center;

      & .palm {
        width: 50%;
        height: 100%;
        background: var(--haunter-background-dark-color);
        transform: translate(-10px, -50px);
        clip-path: polygon(50% 50%, 100% 100%, 45% 100%, 0 50%);
      }
    }
  }
}

@keyframes eyeMove {
  0% {
    transform: translate(32px, -20px) scale(1);
  }

  100% {
    transform: translate(32px, -15px) scale(1.25);
  }
}

@keyframes haunterFly {
  0% {
    transform: translate(0, -5%);
  }

  100% {
    transform: translate(0, 5%);
  }
}

@keyframes haunterLeftClawsFly {
  0% {
    transform: translate(0, -190%) rotate(-20deg);
  }

  100% {
    transform: translate(0, -140%) rotate(-20deg);
  }
}

@keyframes haunterRightClawsFly {
  0% {
    transform: translate(160%, -190%) rotate(20deg) scale(-1, 1);
  }

  100% {
    transform: translate(160%, -140%) rotate(20deg) scale(-1, 1);
  }
}

/* Gengar */

.poke-gengar {
& .gengar-container {
  animation: breath 1s ease-in-out alternate infinite;

  & .spikes-container {
    position: absolute;
    width: calc(var(--gengar-width) + 50px);
    height: 75px;
    transform: translate(0, -15px);
    display: flex;
    justify-content: center;
    filter: var(--custom-filter);

    & .spike {
      width: 30px;
      height: 45px;
      background: var(--gengar-background-dark-color);
      clip-path: var(--gengar-spike-shape);

      &.spike-1 { transform: translate(0, 0) rotate(-45deg); }

      &.spike-2 {
        transform: translate(0, -25px) rotate(-25deg);
        height: 65px;
      }

      &.spike-3 {
        transform: translate(0, -50px) rotate(0);
        height: 75px;
        width: 40px;
      }

      &.spike-4 {
        transform: translate(0, -35px) rotate(25deg);
        height: 75px;
      }
      &.spike-5 { transform: translate(0, 0) rotate(45deg); }
    }
  }

  & .hands-container {
    position: absolute;

    & .fingers-container {
      position: absolute;
      display: flex;
      filter: var(--custom-filter);
      z-index: 5;
      transform: translate(-30px, -190px) rotate(160deg);

      & .finger {
        background: var(--gengar-background-normal-color);
        width: 15px;
        height: 20px;
        clip-path: var(--gengar-finger-shape);
      }

      &.right {
        transform: translate(285px, -190px) rotate(-150deg);
      }
    }
  }

  & .body-container {
    width: calc(var(--gengar-width) + 50px);
    filter: var(--custom-filter);
    display: flex;
    flex-direction: column;
    align-items: center;

    & .ear-container {
      position: absolute;
      width: 100%;
      display: flex;
      justify-content: space-between;
      transform: translate(0, -50px);

      & .ear {
        width: var(--gengar-ear-width);
        height: var(--gengar-ear-height);
        background: var(--gengar-background-light-color);
        clip-path: var(--gengar-ear-shape);
        transform: rotate(-45deg);

        &::before {
          content: "";
          display: block;
          background: var(--gengar-background-normal-color);
          width: 100%;
          height: 100%;
          clip-path: var(--gengar-ear-shape);
          transform: translate(-10px, 5px);
        }

        &.right {
          transform: rotate(45deg);

          &::before {
            transform: translate(10px, 5px);
          }
        }
      }
    }

    & .gengar {
      width: var(--gengar-width);
      height: var(--gengar-height);
      background: var(--gengar-background-light-color);
      clip-path: var(--gengar-shape);

      &::before {
        position: absolute;
        content: "";
        display: block;
        background: var(--gengar-background-normal-color);
        width: 83%;
        height: 100%;
        clip-path: var(--gengar-shape);
        transform: translate(0, 10px);
      }

      & .face {
        position: absolute;
        width: 80%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translateY(15px);

        & .eyes-container {
          display: flex;
          justify-content: space-between;
          width: 75%;
          height: 50%;
          filter: var(--custom-filter);
          transform: translateX(5px);

          & .eye {
            width: 70px;
            height: 40px;
            background: var(--gengar-eye-dark-color);
            clip-path: var(--gengar-eye-shape);
            transform: rotate(215deg);
            animation: changeShadowColor 2s ease infinite alternate;

            &::before {
              content: "";
              display: block;
              position: relative;
              width: 100%;
              height: 100%;
              background: var(--gengar-eye-light-color);
              clip-path: var(--gengar-eye-shape);
              transform: translate(0, 8px);
              animation: changeColor 2s ease infinite alternate;
            }

            &::after {
              content: "";
              display: block;
              position: absolute;
              width: 8px;
              height: 14px;
              background: var(--gengar-border-color);
              transform: rotate(-215deg) translate(-20px, 0);
              background: radial-gradient(circle at center, #ddd 5%, var(--gengar-border-color) 35%);
            }

            &.right {
              transform: rotate(-215deg);

              &::after {
                transform: rotate(215deg) translate(-28px, 33px);
              }
            }
          }
        }

        & .mouth-container {
          position: absolute;
          width: 180px;
          height: 150px;
          filter: var(--custom-filter);
          display: flex;
          justify-content: center;

          & .mouth {
            position: absolute;
            width: 80%;
            height: 100%;
            background: black;
            clip-path: var(--gengar-mouth-shape);
            transform: translate(4px, 60px) scale(1.2, 1.05);
            display: flex;
          }

          & .teeth {
            width: 100%;
            height: 100%;
            background: var(--teeth-color);

            &.teeth-1,
            &.teeth-5 { --teeth-color: #d7d5d6; }

            &.teeth-2,
            &.teeth-4 { --teeth-color: #ebe9ea; }
            &.teeth-3 { --teeth-color: #fff; }
          }
        }
      }

      & .gengar-bottom-shadow {
        width: 100%;
        height: 110%;
        background: var(--gengar-background-dark-color);
        clip-path: var(--gengar-bottom-shadow-shape);
        transform: scale(1.05, 1.1) translateY(-22px);
        position: relative;
      }
    }

    & .arms-container {
      position: absolute;
      width: calc(var(--gengar-width) + 95px);
      height: 100px;
      display: flex;
      justify-content: space-between;
      transform: translate(-2px, 60px);

      & .arm {
        width: 65px;
        height: 90px;
        background: var(--gengar-background-normal-color);
        clip-path: var(--gengar-arm-shape);

        &::before {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background: var(--gengar-background-dark-color);
          transform: translate(25px, 35px) rotate(75deg);
        }

        &.right {
          transform: scale(-1, 1);
        }
      }
    }

    /* legs */
  }
}

  & .legs-container {
    width: var(--gengar-width);
    position: absolute;
    z-index: -1;
    display: flex;
    justify-content: space-around;
    transform: translate(25px, -25px);
    filter: var(--custom-filter);

  & .leg {
    width: 75px;
    height: 85px;
    background: var(--gengar-background-normal-color);
    clip-path: polygon(25% 0, 100% 35%, 80% 100%, 25% 100%, 0 45%);

    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 50px;
      background: var(--gengar-background-dark-color);
      transform: rotate(45deg) translate(0, -25px) scale(1.5);
    }

    &.right {
      transform: scale(-1, 1);
    }
  }

  & .fingers-container {
    width: 50px;
    position: absolute;
    display: flex;
    transform: translate(-60px, 88px);

    & .finger {
      width: 20px;
      height: 10px;
      background: var(--gengar-background-normal-color);

      &.finger-1 { clip-path: polygon(25% 0, 0 100%, 100% 0); }
      &.finger-2 { clip-path: polygon(0 0, 100% 0, 30% 100%); }

      &.finger-3 {
        clip-path: polygon(0 0, 100% 0, 80% 100%);
        transform: translate(0, -2px) rotate(-30deg);
        width: 12px;
      }
    }

    &.right {
      transform: translate(60px, 88px) scale(-1, 1);
    }
  }
}
}

@keyframes breath {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, 10px);
  }
}

@keyframes changeColor {
  0% {
    background: var(--gengar-eye-light-color);
  }

  100% {
    background: #a00;
  }
}

@keyframes changeShadowColor {
  0% {
    background: var(--gengar-eye-dark-color);
  }

  100% {
    background: #700;
  }
}

.created {
  background: 
    url(https://assets.codepen.io/154065/internal/avatars/users/default.png),
    linear-gradient(to bottom, #884ced, #ec1cce);
  background-size: 75px 75px, cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
  height: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 2em;
  
  & span,
  & h2,
  & p,
  & a {
    font-family: Montserrat;
    margin: 0;
  }
  
  & a,
  & p,
  & span {
    color: #fff;    
  }
  
  & h2 {
    font-weight: 700;
    transform: translate(0, -4px);    
  }
  
  & a {
    text-decoration-color: rgba(255,255,255,0.4);
  }
  
  & a:hover {
    color: #e6e82a;
  }
}