@import '../styles/config';

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  color: $off-white;
  height: 98vh;
  overflow: hidden;
  background-color: $blue1;
  background-image: radial-gradient(50rem, $blue2 0%, $blue1 70%);
  svg {
    width: 130%;
    height: auto;
    max-width: 40rem;
    max-height: 100%;
  }
}

.title {
  fill: $blue3;
  font-family: $display-font;
  font-weight: 500;
  text-anchor: middle;
}

.subtitle {
  fill: $blue3;
  font-family: $caption-font;
  font-weight: 200;
  text-anchor: middle;
}

.tv {
  .screenContent, .brightScreen {
    :global { animation: flicker 6s ease-out infinite 2s; }
  }
  .screenGlare, .wallGlow {
    :global { animation: dim 6s ease-out infinite 2s; }
  }
}

.staticShake {
  :global { animation: shake-noise 400ms steps(1) infinite; }
}

@keyframes :global(flicker) {
  0% { opacity: 1; }
  5% { opacity: .6; }
  13% { opacity: 1; }

  20% { opacity: 1; transform: none; }
  25% { transform: skew(-5deg); }
  30% { opacity: .3; transform: translateY(3rem) skew(5deg) scaleY(.7) }
  35% { opacity: 0; transform: translateY(-20rem) skew(-5deg) scaleY(.4); }

  60% { opacity: 0; transform: translate(0) skew(-5deg); }
  63% { opacity: .7;}
  66% { opacity: .4; transform: skew(5deg) }
  70% { opacity: 1; transform: none; }
}

@keyframes :global(dim) {
  0% { opacity: 1; }
  5% { opacity: .8; }
  13% { opacity: 1; }

  20% { opacity: 1; }
  35% { opacity: .4; }

  60% { opacity: .4; }
  63% { opacity: .7;}
  66% { opacity: .6; }
  70% { opacity: 1; }
}

@keyframes :global(shake-noise) {
  0% { transform: translate(0, 0) }
  20% { transform: translate(7rem, 1rem); opacity: .9 }
  40% { transform: translate(-7rem, -2rem) }
  60% { transform: translate(-3rem, -6rem) }
  80% { transform: translate(2rem, 4rem) }
  100% { transform: translate(-7rem, 3rem); opacity: 1 }
}
