Box hover effects CSS transition & shadow

.badge
	.text 'Hallo!

@import url(https://fonts.googleapis.com/css?family=Raleway:300);
$primary-color: rebeccapurple;
$easing: all 0.5s cubic-bezier(.55,0,.1,1);
$base-size: 20rem;

html {
  height: 100%;

  @media (max-width: ($base-size * 1.6)) {
    font-size: 12px;
  }
}

body {
  background: linear-gradient(#333,#111);
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge {
  display: block;
  position: relative;
  width: $base-size;
  height: $base-size;
  cursor: pointer;
  background: url(https://source.unsplash.com/random/1000x1000) no-repeat 100% 50%;
  background-size: 120%;
  border-radius: 50%;
  transition: $easing;
  box-shadow: 0px .5rem 1rem rgba(0,0,0,.75);

  &:hover {
    box-shadow: 0px .5rem 2rem rgba(0,0,0,.75);
    background-position: 0% 50%;

    .text {
      transform: rotate(-45deg) translate(0px) rotate(-315deg);
      background: rgba($primary-color,.5);
      width: $base-size;
      letter-spacing: 1rem;
      line-height: $base-size;
      height: $base-size;
      margin-top: -($base-size / 2);
      margin-left: -($base-size / 2);
      transition:
        $easing,
        letter-spacing 1.5s ease-out;
    }
  }

  .text {
    display: block;
    position: absolute;
    width: ($base-size / 2);
    height: ($base-size / 2);
    line-height: ($base-size / 2);
    left: 50%;
    top: 50%;
    margin-top: -($base-size / 4);
    margin-left: -($base-size / 4);
    font-size: 2rem;
		font-family: Raleway, sans-serif;
    text-align: center;
    color: #fff;
    border-radius: 50%;
    background: $primary-color;
    transform: rotate(-180deg) translate(-($base-size / 2)) rotate(180deg);
    box-shadow: 0px .5rem 1rem rgba(0,0,0,.5);
    transition: $easing;
  }
}