@import url('https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Jersey+20&display=swap');

:root{
  --header-color: rgb(150, 192, 255);
  --text-color: rgb(150, 192, 255);
  --button-color: rgb(150, 192, 255);
}

@keyframes h1Shade{
  0%{background-position:0px;}
  100%{background-position:100px;}
}

@keyframes scanlines {
  100% {
    background-position: 0 50%;
  }
}

@keyframes blink {
  0%{opacity: 0;}
  50%{opacity: 0;}
  51%{opacity: 1;}
}

@keyframes float {
  0% {transform: translateY(0px) rotateY(45deg) rotateX(1deg);}
  100% {transform: translateY(-10px) rotateY(45deg) rotateX(1deg);}
}

@keyframes brightnessChange {
  0% {box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 50px 1px, rgba(255, 255, 255, 0.2) 0px 0px 15px 1px inset;}
  100% {box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 50px 1px, rgba(255, 255, 255, 0.4) 0px 0px 15px 1px inset;}
  
}

@keyframes floatFooter {
  0% {transform: translateY(-2px);}
  100% {transform: translateY(2px);}
}

@keyframes sendParticleUp {
  0% {bottom: 0px;opacity: 1;}
  100% {bottom: 10px;opacity: 0;}
}

body{
  margin: 0;
  background-color: #00020d;
  overflow: hidden;

  header{
    background-color: #00020d;
    position: fixed;
    overflow: hidden;
    padding: 1px 0px;
    height: calc(100vh - 2px);
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Aleo";
    transition: opacity 2s linear;
    z-index: 3;

    #bgImage{
      position: fixed;
      height: 100vh;
      transform: scale(1.5);
      opacity: 0.03;
    }

    h1{
      background-color: var(--header-color);
      background-image:
        radial-gradient(circle at 20% 20%, white, transparent 20%),
        radial-gradient(circle at 80% 80%, white, transparent 10%);
      animation: h1Shade 10s infinite linear;
      background-clip: text;
      color: transparent;
      z-index: 1;
      opacity: 0;
      transition: 
        transform 3.5s cubic-bezier(0.3, 1, 0.5, 1), 
        opacity 0.5s linear;
      text-align: center;
      font-size: 25px;
      font-style: italic;
      font-weight: 300;
      text-shadow: 0px 0px 18px var(--header-color);
      margin: 20px 0px;
    }

    .h1Border{
      opacity: 0;
      background-image: linear-gradient(to right, transparent, var(--header-color), var(--header-color), transparent);
      height: 1px;
      width: 100px;
      transition: all 3.5s ease-out;
    }

    .h1Border:last-of-type{
      margin-bottom: 20px;
    }

    .fogImg{
      z-index: 2;
      position: absolute;
      opacity: 0;
      width: 150vw;
      height: 150vh;
      overflow: hidden;

      &:last-child{
        transform: rotate(180deg) rotateY(180deg);
      }
    }
    .fogImg.goLeft{
      transition: opacity 1.5s linear, transform 6s ease-out;
      transform: translate(-250px,0px);
    }
    .fogImg.goRight{
      transition: opacity 1.5s linear, transform 6s ease-out;
      transform: rotate(180deg) rotateY(180deg) translate(250px,0px);
    }
  }

  main{
    overflow: hidden;
    position: relative;

    #mainScreen{
      padding: 10px 30px;
      color: var(--text-color);
      background-color: black;
      overflow: hidden;
      position: relative;
      border-bottom: solid #111 4px;
      z-index: 2;
      -webkit-user-select: none;
      user-select: none;
      
      #screenText{
        font-family: "Aleo";
        font-size: 15px;
        line-height: 22px;
        box-sizing: content-box;

        .caret{
          animation: blink 1s infinite linear;
        }
      }

      #bottomMainScreen{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        margin-top: 10px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s linear;

        button{
          background-color: transparent;
          color: inherit;
          font-family: inherit;
          font-size: inherit;
          outline: none;
          border: none;
          cursor: pointer;
        }

        &.visible{
          opacity: 1;
          pointer-events: all;
        }
      }

      &:before{
        display: block;
        pointer-events: none;
        content: "";
        position: absolute;
        height: 100%;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(
          to top,
          rgb(255, 255, 255, 0.03) 40%,
          transparent 60%
        );
        background-size: 100% 7px;
      }
    }

    #middleContent{
      display: flex;
      position: relative;
      width: 100%;
      height: 100vh;
      perspective: 1000px;

      #leftWall, #rightWall{
        top: -5%;
        position: absolute;
        width: 50%;
        height: 105%;
        border-top: var(--header-color) solid 1px;
        border-bottom: var(--header-color) solid 1px;
        transform-style: preserve-3d;
        background-color: #00020d;
        background-image: url(./fog1.png);
        background-size: 150% 150%;
        background-position: center;
        background-blend-mode: soft-light;
      }
      
      #leftWall{
        left: 0;
        -webkit-mask-image: linear-gradient(to right, black, transparent 90%);
        mask-image: linear-gradient(to right, black, transparent 90%);
        transform: rotateY(90deg);
        transform-origin: left;

        #tvShadow{
          position: absolute;
          border-radius: 10px;
          left: -2%;
          top: 25%;
          width: 70%;
          height: 50%;
          background-color: black;
          animation: float 2s ease-in-out infinite alternate;
          box-shadow: rgba(0, 0, 0, 1) 0px 0px 20px 0px;
          opacity: 0.4;

          #tvShadowLight{
            display: block;
            border-radius: 10px;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            animation: brightnessChange 2s infinite alternate;
            transition: opacity 2s linear;
            opacity: 0;
          }
        }
      }
      
      #rightWall{
        right: 0;
        -webkit-mask-image: linear-gradient(to left, black, transparent 90%);
        mask-image: linear-gradient(to left, black, transparent 90%);
        transform: rotateY(-90deg);
        transform-origin: right;
      }

      #floor{
        position: absolute;
        height: 50vw;
        width: 100%;
        bottom: 0;
        left: 0;
        -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%);
        mask-image: linear-gradient(to bottom, transparent, black 20%);
        background-image: linear-gradient(to right, rgba(150, 192, 255, 0.05), transparent, rgba(150, 192, 255, 0.05));
        transform: rotateX(90deg);
        transform-origin: bottom;
      }

      #tvContainer{
        display: flex;
        flex-direction: row;
        width: 50%;
        align-items: center;
        justify-content: end;
        position: relative;
        perspective: 1500px;

        #tvDiv{
          border-left: solid black 5px;
          border-bottom: solid black 2px;
          background-image: url(./fog1.png);
          background-size: 150% 150%;
          background-position: center;
          background-blend-mode: overlay;
          width: 80%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgb(10, 12, 25);
          border-radius: 10px;
          padding: 15px;
          transform-style: preserve-3d;
          animation: float 2s ease-in-out infinite alternate;

          #tvScreenDiv{
            background-color: #090909;
            width: 100%;
            border: black solid 4px; 
            border-radius: 3px;
            position: relative;

            #scanlineContainer{
              width: 100%;
              opacity: 0;
              position: relative;
              transition: opacity 2s linear;
              animation: brightnessChange 2s infinite alternate;

              #tvGif{
                display: block;
                width: 100%;
              }
              
              &:after{
                display: block;
                pointer-events: none;
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-image: linear-gradient(
                  to bottom,
                  rgb(255, 255, 255, 0.03) 41%,
                  transparent 41%
                );
                background-size: 100% 7px;
                animation: scanlines 10s infinite linear;
              }
            }
          }
        }
      }

      #projectsContainer{
        position: relative;
        height: 100%;
        width: 50%;

        #buttonsContainer{
          scrollbar-width: none;
          display: flex;
          flex-direction: column;
          align-items: center;
          row-gap: 20px;
          perspective: 1000px;
          height: 100%;
          overflow-y: auto;
          pointer-events: none;
          -webkit-user-select: none;
          user-select: none;

          button {
            transform: rotateY(-15deg);
            font-family: "Aleo";
            font-weight: bold;
            font-size: 20px;
            line-height: 35px;
            overflow-x: clip;
            color: rgb(10, 40, 140);
            background-color: var(--button-color);
            border: solid 2px rgba(0, 0, 0, 0.5);
            border-radius: 6px;
            outline: none;
            width: 65%;
            cursor: pointer;
            background-image: linear-gradient(
              to top,
              rgb(255, 255, 255, 0.2) 40%,
              transparent 60%
            );
            background-size: 100% 3px;
            animation: scanlines 3s infinite linear;
            opacity: 0.7;
          
            &:hover{
              box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 20px 0px;
              opacity: 1;
            }

          }

          .filler{
            padding-top: 80px;
            width: 65%;
          }

        }
      }

      #infoScreen{
        position: absolute;
        background-color: rgba(0, 0, 0, 0.95);
        left: 10%;
        top: 5%;
        width: 80%;
        height: 80%;
        border-radius: 10px;
        box-sizing: border-box;
        border: solid #111 5px;
        opacity: 0;
        transition: opacity 0.2s linear;
        pointer-events: none;

        &.visible{
          opacity: 1;
          pointer-events: all;
        }
        
        &::after{
          position: absolute;
          display: block;
          content: " ";
          left: 0;
          top: 0;
          height: 100%;
          width: 100%;
          background-image: linear-gradient(
            to bottom,
            rgb(255, 255, 255, 0.01) 3px,
            transparent 4px
          );
          background-size: 100% 7px;
          animation: scanlines 50s infinite linear;
          pointer-events: none;
        }
        
        #infoScreenInner{
          color: var(--text-color);
          font-family: "Aleo";
          font-size: 18px;
          line-height: 25px;
          left: 0;
          top: 0;
          position: absolute;
          width: 100%;
          height: 100%;
          padding: 20px;
          overflow-y: auto;
          box-sizing: border-box;

          &::-webkit-scrollbar {
            width: 8px;
            background-color: transparent;
          }

          &::-webkit-scrollbar-track {
            background-color: transparent;
          }

          &::-webkit-scrollbar-thumb {
            width: 6px;
            background-color: rgba(150, 192, 255, 0.8);
            border-radius: 3px;
          }

          #infoScreenTitleContainer{
            display: flex;
            justify-content: space-between;

            & > *{
              font-weight: normal;
              margin: 0;
              padding: 0;
              background-color: transparent;
              font-family: inherit;
              color: inherit;
              font-size: inherit;
              line-height: inherit;
            }
            a{
              text-decoration: none;
              visibility: hidden;
              -webkit-user-select: none;
              user-select: none;

              &:visited{
                color: inherit;
                text-decoration: none;
              }

              &[href]{
                visibility: visible;
              }
            }

            button{
              outline: none;
              border: none;
              color: inherit;
              cursor: pointer;
              text-align: end;
            }


          }

          #infoScreenText{
            padding-top: 25px;

            b{
              font-weight: normal;
              text-shadow: 0 0 8px;
            }
          }

          h3 {
            margin: 0;
            padding-top: 10px;
            font-size: inherit;
            line-height: inherit;
            border-top: dashed 2px;
          }

          small{
            font-style: italic;
          }
        }
      }

      &:after {
        display: block;
        content: " ";
        width: 100%;
        height: 40px;
        bottom: 0px;
        position: absolute;
        background-image: linear-gradient(to bottom, transparent, black 80%);
      }
    }

    #textPopUp{
      background-color: black;
      -webkit-mask-image: linear-gradient(to bottom, transparent, black 2px, black 24px, transparent);
      mask-image: linear-gradient(to bottom, transparent, black 2px, black 24px, transparent);
      font-family: "Aleo";
      font-size: 15px;
      line-height: 22px;
      padding-top: 2px;
      height: 26px;
      position: absolute;
      color: var(--text-color);
      opacity: 0;
      transition: opacity 1s linear;
      z-index: 3;
      pointer-events: none;
    }
  }

  footer{
    background-color: black;
    height: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    a{
      position: relative;
      background-color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 35px;
      cursor: pointer;
      border: none;
      border-bottom: var(--text-color) 1px solid;
      background-image: linear-gradient(to top, rgba(150, 192, 255, 0.25), transparent 15px);
      -webkit-mask-image: linear-gradient(to left, transparent, black 10px, black 30px, transparent);
      mask-image: linear-gradient(to left, transparent, black 10px, black 30px, transparent);

      .mask{
        background-color: rgba(150, 192, 255, 0.7);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 20px 20px;
        mask-size: 20px 20px;
        width: 20px;
        height: 20px;
        animation: floatFooter 3s ease-in-out infinite alternate;
        border-radius: 2px;
        background-image: linear-gradient(
          to bottom,
          rgb(255, 255, 255, 0.2) 2px,
          transparent 1px
        );
        background-size: 100% 3px;
        transition: background-color 0.2s linear;
      }

      
      &:hover .mask{
        background-color: var(--text-color);
      }

      .particle{
        position: absolute;
        height: 1px;
        width: 1px;
        border-radius: 1px;
        box-shadow: 0px 0px 3px 1px var(--header-color);
        background-color: var(--header-color);
        bottom: 0;
        opacity: 0;
      }
      .particle.particleUp{
        animation: sendParticleUp 3s ease-out forwards;
      }
    }
  }
}

@media (orientation: portrait) {
  body{
    display: flex;
    flex-direction: column;

    header{
      #bgImage{
        opacity: 0.06;
      }
      .fogImg{
        display: none;
      }
    }

    main{
      display: flex;
      flex-direction: column;

      #mainScreen{
        padding: 12px;
        flex: 0 0 auto;

        #screenText{
          font-size: 14px;
          line-height: 20px;
        }
      }

      #middleContent{
        height: auto;

        #tvContainer{
          display: none;
        }

        #projectsContainer{
          width: 100%;

          #buttonsContainer{
            .filler{
              padding-top: 40px;
            }
          }
        }

        #infoScreen #infoScreenInner{
          font-size: 16px;
        }
      }
    }

    footer{
      height: fit-content;
      padding-bottom: 40px;
    }
  }

}