@import "variables"

// common variables for this page
$-h1: rgba(45,45,45,1)
$-outline: rgba(#fff, .4)
$-shadow: rgba($yellow, .5)

$-term-color: #c3993c
$-term-height: 550px
$-term-height-mid: 400px
$-term-height-mobile: 280px
$-term-scanline-height: 5px

.main
  background-color: var(--background-color)
  color: var(--foreground-color)
  padding: 10px 15px
  font-size: 0.9em

.headline
  max-width: $page-width
  height: auto
  font-size: $bigger-font-size
  text-align: center

.alt-background
  background: var(--alt-background-color)

.cards-list
  max-width: $page-width
  height: 100%
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  text-align: center
  padding: $large-spacer $huge-spacer

.nav-spacer
  display: none  // so the banner is against the navbar

.banner-burnin
  position: absolute
  width: 100%
  height: 100%
  z-index: $back
  box-shadow: inset 0px 0px 1px 1px rgba(64, 64, 64, .1)
  background: radial-gradient(ellipse at center,darken($-term-color,30%) 0%,rgba(64,64,64,0) 50%)
  transform-origin : 50% 50%
  transform: perspective(20px) rotateX(.5deg) skewX(2deg) scale(1.03)
  animation: burnin 1s linear infinite
  opacity: .9

.banner-burnin::after
  position: relative
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%,rgba(64,64,64,0) 100%)
  opacity: .1

.banner-terminal
  position: relative
  z-index: 90
  margin: 0 auto
  width: 100%
  height: $-term-height
  background-color: #0a1922
  overflow: hidden

.banner-terminal::before
  position: absolute
  width: 100%
  height: 100%
  top: 0
  left:  0
  content: ""
  z-index: $front
  background: linear-gradient(#777 50%, #0a1922 50%)
  background-size: 100% 4px
  background-repeat: repeat-y
  opacity: .14
  box-shadow : inset 0px 0px 1px 1px rgba(0, 0, 0, .8)
  animation: pulse 5s linear infinite

.banner-terminal::after
  position: absolute
  content: ""
  top: 0
  left: 0
  width: 100%
  height: 76%
  z-index: 99
  background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,0.62) 45%,rgba(0,9,4,0.6) 47%,$-term-color 100%)
  background-color: $-term-color
  box-shadow : inset 0px 0px 4px 4px rgba(100, 100, 100, .5)
  opacity : .1

.banner-scanline
  --scanline-area: #{$-term-height}

  position: relative
  z-index: 99
  width: 100%
  height: 5px
  background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,250,250,1) 50%,rgba(255,255,255,0.98) 51%,rgba(255,0,0,0) 100%)
  background-color: #fff
  background-size: 100% 4px
  opacity : .1
  animation: scanline 3.25s ease-in-out infinite

.banner-textarea
  position: relative
  width: 1500px
  height: 600px
  margin: 0 auto

.banner-prompt
  position: relative
  text-align: left
  padding-left: 1em
  font-family: Inconsolata, Courier, unicase
  text-shadow: 0 0 8px rgba(lighten($-term-color, 50%), 0.3)
  font-size: 4em
  color: $-term-color

.ghost, .pop
  opacity: 0.27

.banner-msg-line
  text-shadow: 0 0 8px rgba(lighten($-term-color, 30%), 0.3)
  font-family: Inconsolata, Courier, monospace
  font-smoothing: antialiased
  padding-left: 6em
  font-size: 3em
  white-space: pre
  color: $-term-color
  overflow: hidden

#banner-msg-animate
  text-shadow: 0 0 8px rgba(lighten($-term-color, 50%), 0.1)
  color: darken(desaturate($-term-color, 10%), 20%)
  bottom: 0

.flicker
  margin: 0
  color: $-h1
  letter-spacing: -.05rem

.flicker::before
  content: attr(letter)
  position: absolute
  overflow: hidden
  color: $yellow
  z-index: $above
  text-shadow: none
  animation: flicker 3s linear infinite

.glitch
  margin: 0
  letter-spacing: -0.05rem
  display: inline-block
  animation: glitch 1s linear infinite

.glitch::before, .glitch::after
  content: attr(text)
  position: absolute
  overflow: hidden

.glitch::before
  left: 0;
  animation: glitch-top 1s linear infinite
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%)

.glitch::after
  left: 0
  animation: glitch-bottom 1.5s linear infinite
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%)

@keyframes burnin
  0%
    transform: scale(1, 1.002)
  50%
    transform: scale(1, 1.0001)
  100%
    transform: scale(1.001, 1)

@keyframes scanline
  to
    transform: translateY(var(--scanline-area)) translateY(-$-term-scanline-height)

@keyframes pulse
  0%
    transform: scale(1.001)
    opacity: .14
  8%
    transform: scale(1.000)
    opacity: .13
  15%
    transform: scale(1.004)
    opacity: .14
  30%
    transform: scale(1.002)
    opacity: .11
  100%
    transform: scale(1.000)
    opacity: .14

@keyframes flicker
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100%
    opacity: .99
    text-shadow: -1px -1px 0 $-outline, 1px -1px 0 $-outline, -1px 1px 0 $-outline, 1px 1px 0 $-outline, 0 -2px 8px, 0 0 2px, 0 0 5px #ff7e00, 0 0 15px #ff4444, 0 0 2px #ff7e00, 0 2px 3px #000

  20%, 21.999%, 63%, 63.999%, 65%, 69.999%
    opacity: 0.4
    text-shadow: none

@keyframes glitch
  2%, 64%
    transform: translate(2px,0) skew(0deg)
  4%, 60%
    transform: translate(-2px,0) skew(0deg)
  62%
    transform: translate(0,0) skew(5deg)

@keyframes glitch-top
  2%, 64%
    transform: translate(2px,-2px)
  4%, 60%
    transform: translate(-2px,2px)
  62%
    transform: translate(13px,-1px) skew(-13deg)

@keyframes glitch-bottom
  2%, 64%
    transform: translate(-2px,0)
  4%, 60%
    transform: translate(-2px,0)
  62%
    transform: translate(-22px,5px) skew(21deg)

@keyframes typing
  to
    width: 100%

@keyframes blinking
  from, to
    border-color: transparent
  50%
    border-color: orange

.motto
  text-align: left
  padding-top: $large-spacer

@media only screen and (max-width:1200px)
  .banner-terminal
    height: $-term-height-mid
  .banner-scanline
    --scanline-area: #{$-term-height-mid}
  .banner-prompt
    font-size: 3em
  .banner-msg-line
    font-size: 2em

@media only screen and (max-width:1000px)
  html, body
    overflow-x: hidden

  body
    -webkit-text-size-adjust: none

@media only screen and (max-width:800px)
  .banner-terminal
    height: $-term-height-mobile
  .banner-scanline
    --scanline-area: #{$-term-height-mobile}
  .banner-prompt
    font-size: 2em
  .banner-msg-line
    font-size: 1.5em
    padding-left: 3em