$hero-height: 14rem;

.hero {

width: 100%;
height: 100%;
background: linear-gradient(-40deg, lighten($black, 10%), $gray-800, $gray-900 60%);
background-size: 500% 500%;
animation: gradient 30s ease infinite;

.site-heading {
  padding: $hero-height 0 $hero-height 0;
}

}

.hero-animation {

width: 100%;
height: 100%;

}

@keyframes gradient {

0% {
        background-position: 0% 50%;
}
50% {
        background-position: 100% 50%;
}
100% {
        background-position: 0% 50%;
}

}

.cubes {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; //($hero-height * 2) + 12.5rem;
overflow: hidden;

li {
  position: absolute;
  display: block;
  list-style: none;
  width: 2.25rem;
  height: 2.25rem;
  background: rgba($white, 0.125);
  animation: animate 25s linear 2s infinite;
  bottom: -1rem;
  opacity: 0;
}

li:nth-child(1) {
  left: 10%;
  width: 2rem;
  height: 2rem;
  animation-delay: 2s;
  animation-duration: 12s;
}

li:nth-child(2) {
  left: 25%;
  width: 5rem;
  height: 5rem;
  animation-delay: 3s;
}

li:nth-child(3) {
  left: 70%;
  width: 1.75rem;
  height: 1.75rem;
  animation-delay: 4s;
}

li:nth-child(4) {
  left: 40%;
  width: 4rem;
  height: 4rem;
  animation-delay: 0s;
  animation-duration: 18s;
}

li:nth-child(5) {
  left: 65%;
  width: 2rem;
  height: 2rem;
  animation-delay: 0s;
}

li:nth-child(6) {
  left: 75%;
  width: 6rem;
  height: 6rem;
  animation-delay: 3s;
}

li:nth-child(7) {
  left: 35%;
  width: 7rem;
  height: 7rem;
  border-radius: 1rem;
  animation-delay: 7s;
}

li:nth-child(8) {
  left: 50%;
  width: 2.5rem;
  height: 2.5rem;
  animation-delay: 15s;
  animation-duration: 45s;
}

li:nth-child(9) {
  left: 20%;
  width: 1.5rem;
  height: 1.5rem;
  animation-delay: 2s;
  animation-duration: 35s;
}

li:nth-child(10) {
  left: 85%;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 1rem;
  animation-delay: 0s;
  animation-duration: 11s;
}

}

@keyframes animate {

0% {
  transform: translateY(0) rotate(0deg);
  opacity: 1;
  border-radius: 0;
}

100% {
  transform: translateY(-1000px) rotate(720deg);
  opacity: 0;
  border-radius: 50%;
}

}

// .cube { // position: absolute; // top: 80vh; // left: 45vw; // width: 10px; // height: 10px; // border: solid 1px darken(#0040C1, 8%); // transform-origin: top left; // transform: scale(0) rotate(0deg) translate(-50%, -50%); // animation: cube 12s ease-in forwards infinite;

// &:nth-child(2n) { // border-color: lighten(#0040C1, 10%); // }

// &:nth-child(2) { // animation-delay: 2s; // left: 25vw; // top: 40vh; // }

// &:nth-child(3) { // animation-delay: 4s; // left: 75vw; // top: 50vh; // }

// &:nth-child(4) { // animation-delay: 6s; // left: 90vw; // top: 10vh; // }

// &:nth-child(5) { // animation-delay: 8s; // left: 10vw; // top: 85vh; // }

// &:nth-child(6) { // animation-delay: 10s; // left: 50vw; // top: 10vh; // } // }

// @keyframes cube { // from { // transform: scale(0) rotate(0deg) translate(-50%, -50%); // opacity: 1; // } // to { // transform: scale(20) rotate(960deg) translate(-50%, -50%); // opacity: 0; // } // }

// .white { // height: 100vh; // &:before { // z-index: 1000; // content: ''; // position: absolute; // top: 0; // left: 0; // right: 0; // height: 60vh; // background-image: linear-gradient(-180deg, #FFFFFF 0%, rgba(255,255,255,0.00) 100%) } // &:after { // z-index: 1000; // content: ''; // position: absolute; // bottom: 0; // left: 0; // right: 0; // height: 20vh; // background-image: linear-gradient(0deg, #EBEBEB 0%, rgba(235,235,235,0.00) 100%) }}

// .squares { // height: 100%; // display: flex; // justify-content: space-around; // overflow: hidden } // .square { // animation: squares 9.5s linear infinite; // align-self: flex-end; // width: 1em; // height: 1em; // transform: translateY(100%); // background: ebebeb; // &:nth-child(2) { // height: 1.5em; // width: 3em; // animation-delay: 1s; // animation-duration: 17s; // filter: blur(5px) } // &:nth-child(3) { // height: 2em; // width: 1em; // animation-delay: 1.5s; // animation-duration: 8s; // filter: blur() } // &:nth-child(4) { // height: 1em; // width: 1.5em; // animation-delay: 0.5s; // filter: blur(3px); // animation-duration: 13s } // &:nth-child(5) { // height: 1.25em; // width: 2em; // animation-delay: 4s; // filter: blur(2px); // animation-duration: 11s } // &:nth-child(6) { // height: 2.5em; // width: 2em; // animation-delay: 2s; // filter: blur(1px); // animation-duration: 9s } // &:nth-child(7) { // height: 5em; // width: 2em; // filter: blur(2.5px); // animation-duration: 12s } // &:nth-child(8) { // height: 1em; // width: 3em; // animation-delay: 5s; // filter: blur(6px); // animation-duration: 18s } // &:nth-child(9) { // height: 1.5em; // width: 2em; // filter: blur(0.5px); // animation-duration: 9s } // &:nth-child(9) { // height: 3em; // width: 2.4em; // animation-delay: 6s; // filter: blur(0.5px); // animation-duration: 12s }}

// @keyframes squares { // from { transform: translateY(100%) rotate(-50deg) } // to { transform: translateY(calc(-100vh + -100%)) rotate(20deg) }}

// /* reset */ // *, // *::before, // *::after { // margin: 0; // padding: 0; // box-sizing: border-box; // }

// .block-reveal { // color: transparent;

// position: relative; // overflow: hidden;

// animation: revealBlock 0s 1.75s forwards; // }

// .block-reveal::after { // content: '';

// width: 0%; // height: 100%;

// position: absolute; // top: 0;

// left: 0;

// background: #0040C1; // animation: revealingIn 1.75s 0.25s forwards, revealingOut 1.75s 1s forwards; // }

// /* animations */ // @keyframes revealBlock { // 100% { // color: #0f0f0f; // } // }

// @keyframes revealingIn {

// 0% { // width: 0; // }

// 100% { // width: 100%; // } // }

// @keyframes revealingOut {

// 0% { // transform: translateX(0); // }

// 100% { // transform: translateX(100%); // }

// }