:root {
  --darksurface: #121212;
  --lightsurface: ##f3f3f3;
  --text-on-darksurface: #9e9e9e;
  --text-on-lightsurface: #121212;
  --glowlight: rgba(162, 255, 0, 0.9);
  --glowdark: rgba(132, 200, 12, 0.9);

  /* Credit Kevin Grajeda: https://www.kvin.me/css-springs */
  --spring-easing: linear(0, 0.0019 0.46%, 0.0086 0.99%, 0.0326 1.98%, 0.0729 3.05%, 0.1335 4.27%, 0.2651 6.4%, 0.5627 10.67%, 0.6884 12.57%, 0.8051 14.56%, 0.9007, 0.9783 18.37%, 1.0091 19.28%, 1.038, 1.0622, 1.082, 1.0978 23.24%, 1.1105 24.31%, 1.1206 25.61%, 1.1257 26.98%, 1.1256 28.5%, 1.1205 30.1%, 1.1134 31.4%, 1.1026 32.92%, 1.0429 39.86%, 1.017 43.44%, 1.0059, 0.9973 47.4%, 0.9909 49.46%, 0.9866 51.59%, 0.9842 54.41%, 0.9847 57.69%, 0.9974 70.57%, 1.0013 77.81%, 1.0002 99.98%);
  --spring-duration: 1.620s;
}


@font-face {
  font-family: "Press Start 2P";
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF;
  src:
    local("Press Start 2P"),
    url("/assets/press-start-2p.woff2") format("woff2 supports variations"),
    url("/assets/press-start-2p.woff2") format("woff2-variations"),
    url("/assets/press-start-2p.ttf") format("truetype");
}

* {
  box-sizing: border-box;
}

@keyframes hueshift {
  0% {
    filter: hue-rotate(0deg);
  }

  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes kenburns {
  0% {
    opacity: 0;
    transform: scale(1.0);
  }

  8% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: scale(1.6);
  }
}

body {
  font-family: monospace;
  font-size: 16px;
  margin: 0;
  padding: 0;
  background-color: var(--darksurface);
  color: var(--text-on-darksurface);
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100dvw;
  height: 100dvh;

  >#backdrop {
    position: fixed;
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    background-image: url('/assets/backdrop.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    animation: hueshift 20s linear infinite;

    >div {
      position: absolute;
      width: 100dvw;
      height: 100dvh;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      background-attachment: fixed;
      transform-origin: var(--from);
      animation: kenburns 60s ease forwards;
  
      opacity: 0;
      transform: scale(1.0);
      z-index: 1;

      &:last-child() {
        z-index: 5;
      }

    }
  }


  >#stage {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    z-index: 10;

    >#messages {
      position: absolute;
      width: calc(min(52rem, 95dvw));
      padding-bottom: 40dvh;
      
      >div {
        clear: both;
        padding: 1em 2em;
        margin: 1.2em 0;

        &.ai {
          float: left;
          line-height: 1.4em;
          color: rgba(228, 228, 228, 1.0);
          background-color:rgba(19, 40, 75, .4);
          margin-right: 3em;
          border-radius: 0.8em;
          max-height: 30em;
          max-width: 52rem;
          transition: padding 0.3s ease-in 0.2s, color 0.3s ease-in 1.1s, max-height 0.5s ease-in 0.6s, max-width 0.4s ease-in 0.2s;

          &.loading {
            padding: 1em 1em;
            max-width: 0rem;
            max-height: 2em;
            color: rgba(228, 228, 228, 0.0);
          }

          &::before {
            content: '';
            display: block;
            position: absolute;
            margin-top: -1em;
            left: -40px;
            width: 32px;
            height: 32px;
            background-image: url(/assets/logo-small.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            opacity: 0.8;
          }
        }
        &.user {
          float: right;
          margin-left: 5em;
          left: 0px;
          filter: blur(0em);
          opacity: 1.0;
          transition: left 0.8s var(--spring-easing), filter 0.3s ease-in, opacity 0.3s ease-in;

          &.loading {
            left: 200px;
            filter: blur(1.2em);
            opacity: 0.0;
          }

          /* 8-bit pixel speech bubble credit Jos Faber: https://codepen.io/josfabre/pen/EBMWwW */
          position: relative;
          text-align: left;
          font-family: "Press Start 2P", cursive;
          font-size: 16px;
          line-height: 1.3em;
          color: #000;
          background-color: #fff;
          padding: 1em;
          box-shadow: 0 -4px #fff, 0 -8px #000, 4px 0 #fff, 4px -4px #000, 8px 0 #000, 0 4px #fff, 0 8px #000, -4px 0 #fff, -4px 4px #000, -8px 0 #000, -4px -4px #000, 4px 4px #000;
          box-sizing: border-box;

          &::after {
            content: "";
            display: block;
            position: absolute;
            box-sizing: border-box;
            height: 4px;
            width: 4px;
            right: -8px;
            background: white;
            box-shadow: 4px -4px #fff, 4px 0 #fff, 8px 0 #fff, 0 -8px #fff, 4px 4px #000, 8px 4px #000, 12px 4px #000, 16px 4px #000, 12px 0 #000, 8px -4px #000, 4px -8px #000, 0 -4px #fff;
          }
          &.shadow {
            box-shadow: 0 -4px #fff, 0 -8px #000, 4px 0 #fff, 4px -4px #000, 8px 0 #000, 0 4px #fff, 0 8px #000, -4px 0 #fff, -4px 4px #000, -8px 0 #000, -4px -4px #000, 4px 4px #000, 4px 12px rgba(0, 0, 0, 0.1), 12px 4px rgba(0, 0, 0, 0.1), 8px 8px rgba(0, 0, 0, 0.1);
          }
        }
      }
    }

    >#code {
      position: absolute;
      background-repeat: no-repeat;
      background-size: contain;
      width: calc(min(460px, 75dvw));
      height: calc(min(460px, 75dvh));
      opacity: 0.7;

      &.hidden {
        opacity:0;
        pointer-events: none;
      }
    }
    
    >#reference {
      position: fixed;
      bottom: 0;
      left: 0;
      padding: 0.0em 0.2em;
      font-size: 2rem;
      font-weight: 600;
      opacity: 0.2;
      cursor: default;
    }
  }

}









/* CRT flicker effect, credit hödd on https://codepen.io/hodd/pen/xWGqPy */
.screen {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 9;
  pointer-events: none;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background: repeating-linear-gradient( 0deg, rgba(255, 0, 0, .2), transparent 2px, rgba(255, 0, 0, .5) 10px, transparent 10px );
  opacity: .25;
  filter: blur(1px) contrast(110%) brighness(5) saturation(8);
  animation: jitter 5s ease-in-out infinite;
  animation-delay: 2s;
  transform-origin: center center;

  &:before {
    content: '';
    width: 100%;
    height: 100%;
    top: -5px;
    left: -5px;
    position: absolute;
    pointer-events: none;
    background: repeating-linear-gradient( 0deg, rgba(0, 0, 255, .2), transparent 2px, rgba(0, 255, 0, .5) 10px, transparent 10px );
    filter: brighness(10) saturation(10);
    animation: jitter 3s ease-in-out infinite;
    animation-delay: 1s;
    transform-origin: center center;
  }
  
  &:after {
    content: '';
    width: 100%;
    height: 100%;
    top: -2px;
    left: -2px;
    position: absolute;
    pointer-events: none;
    animation: jitter 2s ease-in-out infinite;
    background: repeating-linear-gradient( 0deg, rgba(255, 255, 255, .2), transparent 2px, rgba(255, 255, 255, .5) 10px, transparent 10px );
    transform-origin: center center;
  }
}

@keyframes jitter {
  0% {
    margin-top: 10px;
    margin-left: 5px;
  }

  20% {
    margin-top: -10px;
    margin-left: -5px;
  }

  25% {
    margin-top: 2px;
    margin-left: 3px;
  }

  26% {
    margin-top: 4px;
    margin-left: -1px;
  }

  27% {
    margin-top: 0px;
    margin-left: 0px;
  }

  30% {
    margin-top: 10px;
    margin-left: 5px;
  }

  50% {
    margin-top: -1px;
    margin-left: 1px;
  }

  61% {
    margin-top: 1px;
    margin-left: -1px;
  }

  63% {
    margin-top: -30px;
    left: -70%;
    transform: skewX(-10deg);
    width: 250%;
    height: 250%;
  }

  67% {
    margin-top: -10px;
    margin-left: -15px;
  }

  69% {
    margin-top: 5px;
    margin-left: 5px;
  }

  70% {
    top: -100px;
    margin-left: 5px;
    transform: skewY(10deg);
    width: 250%;
    height: 250%;
  }

  80% {
  }

  81% {
    margin-top: 0px;
    margin-left: 0px;
  }

  100% {
    margin-top: 10px;
    margin-left: 5px;
  }
}