/*------------------------------------------------------------------
[CSS contans:]

1 core styles for blinky
2 animation 1
3 animation 2
4 animation 3
5 animation 4
6 animation 5

-------------------------------------------------------------------*/
/*
 * core styles for blinky
 */
.blinky {
  transition: all 0.15s ease-out;
}
.blinky:hover {
  text-decoration: none !important;
}
.blinky__hidden-text,
.blinky__label {
  display: -webkit-inline-flex;
  display: inline-flex;
}
.blinky__hidden-text {
  position: relative;
  overflow: hidden;
}
.blinky__hidden-text:after,
.blinky__label:after {
  color: inherit;
}
/*
 * animation 1
 */
.blinky_type1 .blinky__hidden-text:after {
  content: '' attr(data-blinky-label) '';
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
  -webkit-transform: translate3d(140%, 0, 0);
          transform: translate3d(140%, 0, 0);
}
.blinky_type1:hover .blinky__hidden-text:after,
.blinky_type1:focus .blinky__hidden-text:after {
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.blinky_type1:hover .blinky__label,
.blinky_type1:focus .blinky__label {
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  -webkit-transform: translate3d(-140%, 0, 0);
          transform: translate3d(-140%, 0, 0);
}
/*
 * animation 2
 */
.blinky_type2 .blinky__hidden-text:after {
  content: '' attr(data-blinky-label) '';
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  -webkit-transform: translate3d(0, 140%, 0);
          transform: translate3d(0, 140%, 0);
  will-change: opacity, transform;
}
.blinky_type2:hover .blinky__hidden-text:after,
.blinky_type2:focus .blinky__hidden-text:after {
  transition: opacity 0.4s ease-out, -webkit-transform 0.4s ease-out;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out, -webkit-transform 0.4s ease-out;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  opacity: 1;
}
.blinky_type2:hover .blinky__label,
.blinky_type2:focus .blinky__label {
  -webkit-transform: translate3d(0, -140%, 0);
          transform: translate3d(0, -140%, 0);
  transition: -webkit-transform 0.4s ease-out;
  transition: transform 0.4s ease-out;
  transition: transform 0.4s ease-out, -webkit-transform 0.4s ease-out;
}
.blinky_type2 .blinky__label {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
/*
 * animation 3
 */
.blinky_type3 .blinky__hidden-text:after {
  content: '' attr(data-blinky-label) '';
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
}
.blinky_type3:hover .blinky__hidden-text:after,
.blinky_type3:focus .blinky__hidden-text:after {
  transition: -webkit-transform .1s linear .2s;
  transition: transform .1s linear .2s;
  transition: transform .1s linear .2s, -webkit-transform .1s linear .2s;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}
.blinky_type3 .blinky__label {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}
.blinky_type3:hover .blinky__label,
.blinky_type3:focus .blinky__label {
  -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg);
  transition: -webkit-transform .1s linear;
  transition: transform .1s linear;
  transition: transform .1s linear, -webkit-transform .1s linear;
}
/*
 * animation 4
 */
.blinky_type4 .blinky__hidden-text:after {
  content: '' attr(data-blinky-label) '';
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
}
.blinky_type4:hover .blinky__hidden-text:after,
.blinky_type4:focus .blinky__hidden-text:after {
  transition: -webkit-transform .1s linear;
  transition: transform .1s linear;
  transition: transform .1s linear, -webkit-transform .1s linear;
  transition-delay: .2s;
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
}
.blinky_type4 .blinky__label {
  -webkit-transform: rotateX(0);
          transform: rotateX(0);
}
.blinky_type4:hover .blinky__label,
.blinky_type4:focus .blinky__label {
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
  transition: -webkit-transform .1s linear;
  transition: transform .1s linear;
  transition: transform .1s linear, -webkit-transform .1s linear;
}
/*
 * animation 5
 */
.blinky_type5 .blinky__hidden-text:after {
  content: '' attr(data-blinky-label) '';
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: translate3d(0, 140%, 0);
          transform: translate3d(0, 140%, 0);
}
.blinky_type5:hover .blinky__hidden-text:after,
.blinky_type5:focus .blinky__hidden-text:after {
  transition: opacity 0.2s ease-out 0.2s, -webkit-transform 0.2s ease-out 0.2s;
  transition: transform 0.2s ease-out 0.2s, opacity 0.2s ease-out 0.2s;
  transition: transform 0.2s ease-out 0.2s, opacity 0.2s ease-out 0.2s, -webkit-transform 0.2s ease-out 0.2s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.blinky_type5 .blinky__label {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.blinky_type5:hover .blinky__label,
.blinky_type5:focus .blinky__label {
  transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
  -webkit-transform: translate3d(0, 140%, 0);
          transform: translate3d(0, 140%, 0);
}