/* Holographic Button - reusable across pages */
/* Usage: add class="holo-btn" with data-holo-text="Button Text" */
/* Then include holo-btn.js */

@keyframes hOvr1{0%{transform:rotate(0deg)}50%{transform:rotate(10deg)}100%{transform:rotate(0deg)}}
@keyframes hOvr2{0%{transform:rotate(10deg)}50%{transform:rotate(20deg)}100%{transform:rotate(10deg)}}
@keyframes hOvr3{0%{transform:rotate(20deg)}50%{transform:rotate(30deg)}100%{transform:rotate(20deg)}}
@keyframes hOvr4{0%{transform:rotate(30deg)}50%{transform:rotate(40deg)}100%{transform:rotate(30deg)}}
@keyframes hOvr5{0%{transform:rotate(40deg)}50%{transform:rotate(50deg)}100%{transform:rotate(40deg)}}
@keyframes hOvr6{0%{transform:rotate(50deg)}50%{transform:rotate(60deg)}100%{transform:rotate(50deg)}}
@keyframes hOvr7{0%{transform:rotate(60deg)}50%{transform:rotate(70deg)}100%{transform:rotate(60deg)}}
@keyframes hOvr8{0%{transform:rotate(70deg)}50%{transform:rotate(80deg)}100%{transform:rotate(70deg)}}
@keyframes hOvr9{0%{transform:rotate(80deg)}50%{transform:rotate(90deg)}100%{transform:rotate(80deg)}}
@keyframes hOvr10{0%{transform:rotate(90deg)}50%{transform:rotate(100deg)}100%{transform:rotate(90deg)}}

.holo-btn {
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  max-width: 100%;
}

.holo-btn-inner {
  transform-origin: center center;
  transition: transform 200ms ease-out;
  max-width: 100%;
}

.holo-btn svg {
  display: block;
  max-width: 100%;
  height: auto;
}