#splash {
  visibility: visible;
  display: flex;
  height: 100%;
  background-image: url(../assets/noise.png), radial-gradient(circle, #111 1rem, black 20rem);
  animation: fade .5s .5s ease-in-out forwards;

  .preloader {
    margin: auto;
    max-width: 50vw;
    width: 30rem;
    line-height: 2;
    text-align: center;
    
    svg { 
      width: 100%; 
      height :12rem;
      margin-block-end: 5rem;
    }

    .progress-bar {
      --progress: 0;
      border: 1px solid rgba(255, 255, 255, 0.178);
      height: 5px;
      width: 12rem;
      background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 50%, black 50%);
      background-repeat: no-repeat;
      background-size: 200%;
      background-position: calc(calc(100 - var(--progress)) * 1%) 0px;
      border-radius: 5px;
      box-shadow: inset 0 0 0 1px black;
      margin: 1px auto 2rem;
      opacity: 1;
      scale: 1;
      animation: fade 1s 1.5s ease-in forwards;
      transition: all .25s .05s;
      
      &::after {
        content: attr(data-log);
        color: white;
        position: absolute;
        width: 100%;
        inset: 2ex 0 0 0px;
        font-size: small;
      }

      & + button {
        opacity: 0;
        transition: opacity 1s 1s;
        pointer-events: none;
      }

      &.loaded {
        
        animation: fade .5s .75s ease-in reverse backwards;
        scale: .25 1;
        transition: scale .25s 1.05s;
        & + button {
          opacity: .5;
          pointer-events: all;
          animation: fade 1s 1s ease-in infinite alternate;
        }
      }

    }
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#mainmenu,
#sessionmenu {
  visibility: visible;
  display: flex;
  flex-flow: column;
  justify-content: start;
  min-height: 100vh;
  padding: 4vw;
  z-index: 10;
}

#sessionmenu {
  justify-content: center;
  .laptimes {
    
    table {
      width: 100%;
      margin: 1rem;
      line-height: 2.25;
      font-variant-numeric: tabular-nums;

      tr {
        td, th {
          font-weight: normal;
          text-align: end;
          letter-spacing: .05ex;
          position: relative;
          padding: 0 1.5ex;
        }
      }

      .fastest {
        box-shadow: 0 0 10px #740074a3;
        background-color: #9f019fc2;
      }

      small {
        color: #fff9;
        display: flex;
        align-items: center;
        justify-content: end;
        gap: 1rem;
      }

      .track.limits {
        
        background-color: transparent;
        box-shadow: none;
        
        small {

          &::before {
            content: '';
            width: 1.5em;
            height: 1em;
            background-color: black;
            background-image: linear-gradient(-33deg, white 49%, #131313 51%);
            border-radius: .25ex;
            box-shadow: 0 0 20px 0px var(--gelbe);
          }
        }
      }
    }
  }
}

#gamecamera {
  display: block;
  visibility: visible;
}

/* Screens per app state */

body {
  &:not([data-state="splash"]) {
    #splash {
      opacity: 0;
      visibility: hidden;
    }
  }

  &:not([data-state="mainmenu"]) {
    #mainmenu {
      opacity: 0;
      visibility: hidden;
    }
  }

  &.menu[data-state="gamecamera"] {
    & #mainmenu {
      opacity: 1;
      visibility: visible;

      & footer {
        display: none;
      }
    }
  }

  &:not([data-state="gamecamera"]) {
    #gamecamera,
    #gamecamera .hud {
      opacity: 0;
      visibility: hidden;
    }
  }

  &:not(.session-menu) {
    #sessionmenu {
      opacity: 0;
      pointer-events: none;
    }
  }
  .session-menu #gamecamera .hud {
    opacity: 0;
    visibility: hidden;
    animation: fade .5s .5s ease-in-out backwards;
  }
}

body {
  &[data-state="mainmenu"] {
    & #mainmenu {
      animation: fade .5s .5s ease-in-out forwards;
    }
  }
  &[data-state="gamecamera"] {
    & #gamecamera {
      animation: fade .5s .5s ease-in-out forwards;
    }
  }
  &.session-menu {
    #sessionmenu {
      animation: fade .5s .5s ease-in-out normal both;
    }
    #gamecamera .hud {
      animation: fade .5s .5s ease-in-out reverse both;
    }
    #map {
      --zoom: .4 !important;
      transition-duration: 3s;
      transition-timing-function: ease-in-out;
    }
  }
}