// Inspired by: https://www.youtube.com/watch?v=M421fR3TYxg
* {
  box-sizing: border-box;
}
body {
  $br: 5px;

  display: flex;
  justify-content: center;
  align-items: center;

  background: black;

  min-height: 100vh;
  .card__wrap {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1/1;

    transition: 0.2s;

    position: relative;

    &:hover {
      aspect-ratio: 4/5;
      .card__background {
        transform: skew(0deg) translateX(-50%) scaleX(1.5);
      }
      .card__decoration {
        animation: float 2s infinite linear;
        &:nth-last-of-type(2) {
          top: 0;
          left: 0;
          bottom: unset;
          right: unset;
          transform: translate(50%, -70%);
        }
        &:last-of-type {
          bottom: 0;
          right: 0;
          left: unset;
          top: unset;
          transform: translate(-20%, 30%);
        }
      }
    }
    .blurred-background {
      background: rgb(255, 255, 255, 0.15);
      backdrop-filter: blur(20px);
    }
    .card {
      width: 100%;
      height: 100%;

      position: absolute;
      top: 0;
      left: 0;

      color: white;

      padding: 20px;
      border-radius: $br;

      z-index: 2;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      h3 {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 25px;
        margin-top: 0px;
      }
      p,
      button {
        font-family: monospace;
        font-size: 16px;
        &:is(button) {
          background: white;

          font-weight: bold;

          border: none;
          border-radius: $br;
          padding: 5px 10px;
        }
      }
    }
    .card__background {
      $offset: 50;
      position: absolute;
      left: 50%;
      bottom: -#{$offset}px;

      transform: translateX(-50%) skew(15deg);
      transition: 0.5s;

      width: 50%;
      height: calc(100% + #{$offset}px * 2);
      background: rgb(255, 94, 0);
      background: linear-gradient(
        0deg,
        rgb(255, 94, 0, 1) 0%,
        rgb(255, 176, 0, 1) 100%
      );

      border-radius: $br;

      z-index: 1;

      box-shadow: 0px 0px 20px 5px rgb(255, 94, 0, 0.5);
    }
  }
  .card__decoration {
    width: 100px;
    aspect-ratio: 1/1;
    position: absolute;
    z-index: 3;
    border-radius: $br;
    transition: 0.6s;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
  }
}

@keyframes float {
  0%,
  100% {
    margin-block: 0px;
  }
  50% {
    margin-block: 5px;
  }
}