:root {
  --gelbe: rgb(234, 175, 26);
  --gront: #4CAF50;
  --rode: rgb(255, 0, 13);
  --zoomfactor: 16;
  --day-duration: .24;
}
* {
  box-sizing: border-box;
}

html {
  font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 18px;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  user-select: none;
  font-size: 1.33em;
  background: url(../assets/noise.png), radial-gradient(circle, #111 1rem, #000 30rem);
  
  &.loading {
    cursor: wait;
  }
}

.offscreen {
  position: fixed;
  background-color: hotpink;
  top: 0;
  height: 100%;
  bottom: 0;
  z-index: -1;
  & iframe {
    width: 100%;
    height: 100%
  }
}


#gamecamera {
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 50%;
  translate: -50% -50%;
  overflow: hidden;
  z-index: 1;
  will-change: scroll-position;
  filter: blur(0px);
  transition: filter 2s linear;
  /* cursor: none; */
}

body.loading .map {
  filter: blur(20px);
}

.map {
  position: absolute;
  width: 100vw !important;
  height: 100vh !important;
  inset: 0;
  overflow: visible;
  background-color: rgba(38, 91, 38, 0.886);
  will-change: transform;  
  transform-origin: var(--trans-origin);
  translate: var(--translate);
  transform-style: preserve-3d;
  perspective: 500px;
  perspective-origin: var(--trans-origin);
  transition: scale .5s linear, filter 3s .5s ease-in-out;
  &.camera-zoom {
    scale: calc(1 - calc(var(--zoom, .25) * 1.1));
  }
}

.finish-portal {
  position: absolute;
  width: 550px;
  height: 100px;
  
  left: var(--left, 0px);
  top: var(--top, 0px);

  border: 5px solid #000;
  border-radius: 5px;
  border-bottom-style: none;
  
  
  background-image: linear-gradient(black 50px, transparent 50px);
  background-repeat: repeat-x;
  
  z-index: 1;

  perspective-origin: var(--trans-origin);
  
  transform-origin: bottom left;
  transform-style: preserve-3d;
  transform: perspective(2000px) rotateX(-90deg) rotateY(calc(var(--rot-y) * -1deg));
  translate: 0 -100%;

  
  .led-board {
    /* animation: ad-slide 2s ease-in-out forwards infinite; */

    background-image: url('../assets/advertising/honkin.svg');
    background-position: 0 6px;
    background-size: 205px 38px;
    background-repeat: repeat-x;

    width: 100%;
    height: 50px;

    mask: radial-gradient(circle, white 50%, transparent 60%);
    mask-size: 3px 3px;
    mask-repeat: repeat;

    position: relative;
    transform: translateZ(1px);
  }
}



@keyframes ad-slide {
  
  70%, to {
    background-position: -205px 6px, 0 0;
  }
}

/* 
.finish-portal:after {
  content: '';
  position: absolute;
  inset: 0;
  border: inherit;
  transform: translateZ(-50px) translateY(0);
  border-radius: inherit;
  top: 0;
  left: 0;
}

.finish-portal:before {
  content: '';
  border: none;
  position: absolute;
  width: 100%;
  height: 50px;
  top: -14px;
  left: 0;
  transform: rotateX(-90deg) translateY(50px) translateZ(-37px);
  box-shadow: inset 0 0 0 3px black;
  background-size: 60px;
  background-repeat: repeat;
  background-color: #000;
  transform-origin: bottom right;
  
} 
*/


.layer {
  position: absolute;
  transform-style: preserve-3d;
  perspective-origin: var(--trans-origin);
  perspective: 500px;
}

.layer.track {

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../assets/noise.png');
    opacity: .5;
    mix-blend-mode: overlay;
  }
}

.layer.players {
  position: absolute;
  width: 100%;
  height: 100%;
  perspective: 500px;
  perspective-origin: var(--trans-origin);
  transform-origin: var(--trans-origin);
  transform-style: preserve-3d;
  filter: drop-shadow(0px -8px 3px #0006) drop-shadow(0px -20px 8px #0003);
  animation: player-shadow calc(var(--day-duration) * 600s) linear infinite forwards;

  .trees {
    position: absolute;
    inset: 0;
    z-index: 10;
    transform: translateZ(30px);
  }

  & .car-body {
    --car-body: url();
    --car-livery: url();
    scale: .85;
    width: 340px;
    height: 220px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: calc(var(--x) * 1px);
    top: calc(var(--y) * 1px);
    translate: -50% -50%;
    
    
    .body {
      position: absolute;
      height: 120px;
      width: 230px;
      filter: url(#specularLight);
    }

    
    
    .interior, 
    .livery {
      position: absolute;
      height: 120px;
      width: 230px;
      background-size: 100%;
      rotate: calc(var(--angle, 0) * 1deg);
    }

    .interior {
      background-image: var(--car-body);
    }
    
    .livery {
      background-image: var(--car-livery);
      
      &:after{
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('../assets/car/headlights.png');
        background-size: contain;
        opacity: .5;
        transition: opacity .2s;
      }

      .driver-id {
        display: block;
        position: absolute;
        transform-origin: center;
        top: var(--top, 50%);
        right: var(--right, 5%);
        
        translate: 0 -54%;
        rotate: -90deg;
        
        text-align: center;
        color: var(--color, black);
        font-weight: 500;
        box-shadow: inset 0 0 0 2px;
        background-color:var(--bg, white);
        border-radius: var(--border-radius, 13%);
        font-size: 0.8em;
        padding: 0.4ex;
        min-width: var(--min-width, 1.4em);
      }
    }
    
    .wing {
      position: absolute;
      width: 41px;
      height: 100px;
      background-image: url('../assets/car/wing-1.png'), url('../assets/car/wing-2.png');
      left: -10px;
      background-size: cover;
      background-position: 0px center, -50px center;
      background-repeat: no-repeat;
      top: 50%;
      translate: 0 -50%;
      &.wing-2 {
        background-position: -50px center, 0px center;
      }
    }

    .horn {
      visibility: hidden;
      position: absolute;
      width: 100px;
    }

    &.ferrari {
      --bg: white;
      --color:var(--rode);
      --right: 45%;
      --min-width: 1.8rem;
      --border-radius: 100%;
    }
    
    &.lamborghini {
      --bg: var(--gelbe);
      --right: 3%;
    }
    
    &.porsche {
      --bg: white;
    }
  }
}


.layer.lights {
  mix-blend-mode: multiply;
  opacity: 0;
  background-color: #111A;
  z-index: 10;
  /* animation: flashing calc(var(--day-duration) * 600s) cubic-bezier(0.75, 0, 0.7, 1) infinite forwards; */

  & > img[data-layer="lights"] {
    
    /* animation: daynightcycle var(--day-duration) linear infinite forwards; */
  }

  & > .car-lights {
    position: absolute;
    left: -320px;
    top: -220px;
    width: 640px;
    height: 440px;
    scale: .85;
    rotate: calc(var(--angle, 0) * 1deg);
    translate: var(--trans-origin);
    &.opponent {
      
      left: calc(var(--x) * 1px);
      top: calc(var(--y) * 1px);
      translate: -50% -50%;
      
    }
    img {
      position: absolute;
      
      &.headlights {
        scale: 2.5 1;
        transform: perspective(200px) rotateY(-50deg) translateX(-50px);
      }

      &.brakes {
        opacity: .25;
        transition: opacity .5s linear;
      }
    }

    &.flashing .headlights {
      animation: flashing .25s .05s linear forwards;
      animation-iteration-count: 3;
      transition-duration: .1s;
    }

    &.braking .brakes {
      opacity: 1;
      transition-duration: .1s;
    }
  }
}

@keyframes daynightcycle {
  0% {
    opacity: 0;
    filter: brightness(1);
  }

  
  50% {
    opacity: 1;
    filter: brightness(0.1);
  }
  
  to {
    opacity: 0;
    filter: brightness(1);
  }
}

/* animation used for the headlights#honking */
@keyframes flashing {
  50% {
    opacity: 1;
  }
}

.layer.elevated {
  
  transform-origin: var(--trans-origin);
  z-index: 12;
  animation: darkness calc(var(--day-duration) * 600s) linear infinite forwards;
  opacity: .97;

  > img {
    transform: translateZ(50px);
  }

}

@keyframes darkness {
  from    { filter: brightness(1) saturate(1) drop-shadow(0px calc(cos(var(--day-duration)) * 1px) 2px #0006);}
  25%     { filter: brightness(.75) saturate(1) drop-shadow(calc(cos(var(--day-duration)) * -20px) calc(cos(var(--day-duration)) * -50px) 10px #0009);}
  50%     { filter: brightness(.75) saturate(.75) drop-shadow(0px calc(sin(var(--day-duration)) * -500px) 25px #0003);}
  75%     { filter: brightness(.75) saturate(1) drop-shadow(calc(sin(var(--day-duration)) * 50px) calc(cos(var(--day-duration)) * -50px) 10px #0009);}
  to      { filter: brightness(1) saturate(1) drop-shadow(0px 0px 2px #0006);}
}

@keyframes player-shadow {
  from, to {
    filter: drop-shadow(0px -1px 3px #0008) drop-shadow(0px -2px 8px #0003);
  }

  50% {
    filter: drop-shadow(0px -22px 5px #0006) drop-shadow(0px -40px 18px #0003);
  }
}


#map.clouds {
  & .weather {
    opacity: .25;
    filter: blur(16px);
    width: 100%;
    height: 100%;
    background-image: url('../assets/environment/fair_clouds_4k.png');
    background-size: cover;
    scale: 2;
    transform-origin: var(--trans-origin);
  }
  
  &.wind .weather {
    animation: clouds 600s linear;
  }
}

@keyframes clouds {
  to {
    background-position: 100% calc(2048px * 4);
  }
}

.layer.waypoints {
  translate: 0 0 50px;
  z-index: 20;

  b {
    --color: val(--gelbe);
    position: absolute;
    font-size: calc( calc(var(--size, 64px) * 1px) / 2);
    scale: 2;
    translate: -50% -50%;
    color: var(--color);
    display: block;
    width: calc( calc(var(--size, 64px) * 1px));
    height: calc( calc(var(--size, 64px) * 1px));
    line-height: calc( calc(var(--size, 64px) * 1px));
    text-align: center;
    text-shadow: 0 0 10px currentColor;
    border-radius: 50%;
    border: calc(calc( calc(var(--size, 64px) * 1px)) / 32) dashed transparent;
    transition: scale .25s .05s, opacity .5s;
    opacity: 0;
    visibility: hidden;
    display: none;

    &[data-display="onscreen"] {
      display: block;
    }
    /* show only waypoint #1 if not yet hit, subsequently
     only show the waypoints after the one *currently* being hit */
    &:first-child:not(.hit),
    &.hit + b:not(.hit) {
      opacity: 1;
      visibility: visible;
     
      &::before {
        content: '';
        position: inherit;
        width: 100%;
        height: 100%;
        left: calc(calc( calc(var(--size, 64px) * -1px)) / 32);
        top: calc(calc( calc(var(--size, 64px) * -1px)) / 32);
        
        border: inherit;
        border-radius: inherit;
        border-style: dashed;
        border-color: currentColor;
        filter: blur(5px);
        animation: waypoint-spin 30s linear forwards infinite;
        z-index: -1;
      }
      &::after {
        content: '';
        position: inherit;
        width: 100%;
        height: 100%;
        left: calc(calc( calc(var(--size, 64px) * -1px)) / 32);
        top: calc(calc( calc(var(--size, 64px) * -1px)) / 32);
        
        border: inherit;
        border-color: currentColor;
        border-radius: inherit;
        
        
        animation: waypoint-spin 30s linear forwards infinite;
      }
    }
    
    &.hit {
      border-style: solid;
      color: white;
      
      opacity: 0.0;
      background-color: var(--color);
    }

    &.pitbox {
      --color: var(--rode)
    }

    &.pitlane {
      --color: var(--gelbe);
    }

    &.racetrack {
      --color: var(--gront);
    }
  }
}

@keyframes waypoint-spin {
  to {
    rotate: 359deg;
  }
}

.waypointer {
  position: absolute;
  left: calc( var(--x) * 1px );
  top: calc( var(--y) * 1px );
  
  width: 312px;
  height: 312px;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  justify-content: end;
  transition: color .2s, scale .5s, opacity .75s;
  opacity: .5;
  z-index: 100;

  &.all-complete {
    span.material-icons {
      scale: .5;
      opacity: 0;
    }
  }
  & span.material-icons {
    font-size: 1.8rem;
    position: absolute;
    right: 0;
    top: calc(50%);
    translate: 0 -50%;
    transform-origin: left center;
    rotate: calc( var(--rot, 0) * 1deg );
    transition: none;
    width: 50%;
    text-align: end;
  }
  &.racetrack, &.garagebox {
    color: var(--gelbe);
  }
  &.pitbox {
    color: var(--rode)
  }
  
}

.sprite.tree {
  width: 512px;
  height: 512px;
  background-size: contain;
  background-repeat: no-repeat;
  translate: -50% -50%;  
  scale: var(--size);

  &.ahorn {
    background-image: url('../assets/environment/ahorn-tree-s.png');
    &:nth-of-type(3n) {
      background-image: url('../assets/environment/ahorn-tree-brown-s.png');
  }
    }
  &.palm {
      background-image: url('../assets/environment/palm-tree-1.png');
    &:nth-of-type(3n) {
      background-image: url('../assets/environment/palm-tree-2.png');
    }
    &:nth-of-type(5n) {
      background-image: url('../assets/environment/palm-tree-3.png');
    }
  }

}

.lamp-post {
  position: absolute;
  width: 48px;
  height: 48px;
  translate: -50% -50%;
  scale: 3.5;
  /*! background: #e6e67f73; */

  &::before {
    content: '';
    width: 30%;
    height: 30%;
    background: white;
    position: absolute;
    translate: -50% -50%;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    filter: blur(3px);
  }
  &::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: #ffffff78;
    filter: blur(20px);
  }
}

.emitter-object {
  
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  transform-origin: center;
  translate: calc(var(--left) + -50%) calc(var(--top) + -50%);
  rotate: var(--rot, 0deg);
  aspect-ratio: 1;
  overflow: hidden;

  --step: 0;
  --row: 0;
  --spriteSize: 128px;
  --pos-y: calc(var(--row, 0) * var(--spriteHeight, 128px ) * -1px);
  --pos-x: calc(var(--step, 0) * var(--spriteWidth, 128px ) * -1px);
  object-fit: cover;
  object-position: var(--pos-x,0) var(--pos-y,0);

  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--pos-x,0) var(--pos-y,0);
  }



  &.marshal {
    width: 64px !important;
    border-radius: 100%;
    &.dead {
      background-image: url('../assets/people/splat.png'); 
      background-position: center;
      background-repeat: no-repeat;
      background-size: 90%;
    }
  }

  &.smoke {

    
    background: white;
    background-image: radial-gradient(at 50% 0, rgb(255, 255, 255), rgb(168, 220, 255), rgba(174, 232, 255, 0.027));
    
    mask-image: var(--mask-image);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: var(--pos-x) var(--pos-y);
    mask-type: alpha;
    
    animation: smoke 1.2s ease-in 1 normal forwards;
    
    --mask-image: url('../assets/smoke/smoke-sprite-2.png');
    
    &:nth-of-type(3) {
      --mask-image: url('../assets/smoke/smoke-sprite.png');
    }

    &.dust {
      opacity: .33;
      background: transparent;
      background-image: url('../assets/noise.png'), radial-gradient(#ffe680a6, rgba(255, 255, 0, 0.103));
      background-size: 200%, 100%;
      --mask-image: url('../assets/smoke/smoke-sprite-2.png');
      
    } 

    img {
      opacity: .25;
      background-color: white;
    }
  }

  &.rubber {
    img {
      object-fit: fill;
    }
    &.dirt {
      mask-image: url('../assets/environment/fibers.png');
      mask-position: 40px;
      filter: drop-shadow(0 -4px white);
    }
  }
}

@keyframes smoke {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
    scale: 2;
  }
  
  70% {
    opacity: .5;
  }
  90% {
    opacity: 0;
  }
  to {
    opacity: 0;
    rotate: 0deg;
    translate: calc(var(--left) + 150px) calc(var(--top));
    scale: 3;
  }
}

.helicopter {
  scale: .5;
  position: relative;
  filter: drop-shadow(450px 450px 9px #0006);
  width: 902px;
  height: 400px;
  left: calc(var(--x) * 1px) !important;
  top: calc(var(--y) * 1px) !important;
  rotate: calc(var(--rot) * 1deg - 180deg); /* sprite is rotated wrong way around lol */
  
  & img {
    position: absolute;
    top: 50%;
    left: 0;
  }
}

.helicopter-body { 
  translate: 0 -50%;
}

.helicopter-blades {
  filter: blur(2px);
  transform-origin: 234.5px 387.5px;
  --duration: .27s;
  translate: 0 -50%;
  transform: animation-duration 1.5s;
  animation: rotors var(--duration) linear forwards infinite;
}

@keyframes rotors {
  to {
    rotate: 359deg;
  }
}