.background
  .main
    .logo#logo.active
      %i(class="icon ion-ios-bell")
      .note>1

@import url("https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css");

*{
  transition:0.4s ease all;
}

.background {
  position:fixed;
  top:0;
  right:0;
  left:0;
  bottom:0;
  background:linear-gradient(to bottom, #0d4a75, darken(#0d4a75, 10%));
  overflow:scroll;
}

.main {
  margin:600px;
  margin:250px auto;
  
  .logo {
    width:100px;
    height:100px;
    text-align:center;
    line-height:100px;
    margin:0px auto;
    position:relative;
    
    &.remove{
      .icon:before {
        animation:remove 0.4s ease;
      }
    }
    
    &.active{
      
      .note {
        opacity:1;
        animation:arrive 0.4s ease;
      }
      
      .icon {
        opacity:1;
        text-shadow:0px 2px 2px rgba(0,0,0,1);
      }
      
      .icon:before {
        animation:twister 0.4s ease;
        transform:rotate(10deg);
      }
    }
  }
  
  .note {
    position:absolute;
    width:20px;
    height:20px;
    line-height:20px;
    top:20px;
    right:20px;
    background:linear-gradient(to bottom, desaturate(red, 60%), darken(desaturate(red, 60%), 20%));
    border-radius:5px;
    opacity:0;
    box-shadow:0px 2px 4px rgba(0,0,0,0.5);
    color:white;
    font-weight:bold;
    text-shadow:0px 1px 2px rgba(0,0,0,0.5);
    font-size:0.8em;
  }
  
  .icon {
    font-size:4em;
    color:#fff;
    animation:remove 0.4s ease;
    opacity:0.5;
  }
}

@keyframes arrive {
  0% {top:40px;}
  50% {right:10px; transform:scale(1.1);}
}

@keyframes twister {
  50% {transform:rotate(20deg) scale(1.2);}
  100% {transform:rotate(10deg)}
}

@keyframes remove {
  0% {transform:rotate(10deg)}
  100% {transform:rotate(360deg)}
}

var logo = document.getElementById("logo");

window.setInterval(function(){
  if(logo.classList.contains("active")) {
    logo.classList.remove("active");
    logo.classList.add("remove");
  } else {
    logo.classList.add("active");
    logo.classList.remove("remove");
  }
}, 1500);