/* Driving-scene look: cars, lights, gaze cone, effects, speedometer. */

.scene-svg { display: block; width: 100%; height: auto; overflow: hidden; font-family: 'Fredoka', 'WenKai', sans-serif; }
.scene-svg .is-hidden { display: none; }

/* cars */
.actor { will-change: transform; }
.actor .tl rect { fill: #B8424F; transition: fill .15s; }
.actor.brake .tl rect { fill: #FF3048; filter: drop-shadow(0 0 2.4px #FF4D61); }
.actor .sig circle { fill: #F6A623; opacity: 0; }
.actor.sig-l .sig-l circle, .actor.sig-r .sig-r circle, .actor.sig-h .sig circle { animation: sig-blink .74s steps(1) infinite; }
@keyframes sig-blink { 0% { opacity: 1; } 50% { opacity: .08; } }
.actor.is-hl .car-shape { filter: drop-shadow(0 0 4px #F58DAA); }
.actor-ped .ped-shape { transform-box: fill-box; transform-origin: center; }
.actor-ped.is-moving .ped-shape { animation: ped-step .36s ease-in-out infinite; }
@keyframes ped-step { 50% { transform: scale(1.1, .92); } }
.parked .sig circle { fill: none; }
.parked .tl rect { fill: #B8424F; }

/* driver's gaze */
.look path { fill: #FFE07A; opacity: 0; transition: opacity .25s; }
.look.on path { opacity: .42; }
.is-me .look path { fill: #FFD35C; }

/* traffic lights */
.tlight circle { fill: #5E5458; transition: fill .2s; }
.tlight.is-r .lamp-r { fill: #FF4D61; filter: drop-shadow(0 0 3px #FF4D61); }
.tlight.is-y .lamp-y { fill: #FFC93C; filter: drop-shadow(0 0 3px #FFC93C); }
.tlight.is-g .lamp-g { fill: #3ED598; filter: drop-shadow(0 0 3px #3ED598); }

/* map highlights */
.zone { fill: #F58DAA; opacity: .28; }
.zone.bad { fill: #E35D6A; }
.map .is-hl { animation: hl-pulse 1.1s ease-in-out infinite; }
.map .zone.is-hl { animation: zone-pulse 1.1s ease-in-out infinite; }
@keyframes hl-pulse { 50% { opacity: .45; } }
@keyframes zone-pulse { 0%, 100% { opacity: .22; } 50% { opacity: .5; } }

/* effects */
.fx .pop, .flags .pop { transform-box: fill-box; transform-origin: center; animation: fx-pop .5s var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1)) both; }
@keyframes fx-pop { from { transform: scale(0); opacity: 0; } }
.fxi { transition: opacity .4s; }
.fxi.gone { opacity: 0; }
.bub-bg { fill: #fff; stroke: #F1D3DC; stroke-width: 1; filter: drop-shadow(0 1.5px 2px rgba(120, 60, 80, .15)); }
.bub-bg.bad { fill: #FDE4E6; stroke: #F3B2B9; }
.bub-bg.good { fill: #E1F4EA; stroke: #A9DCC2; }
.bub-t { font-size: 10px; font-weight: 600; fill: #4B3A42; }
.tag-bg { fill: rgba(255, 255, 255, .92); stroke: #EBDDE2; stroke-width: .8; }
.tag-bg.bad { fill: #FDE4E6; stroke: #F3B2B9; }
.tag-bg.good { fill: #E1F4EA; stroke: #A9DCC2; }
.tag-t { font-size: 9px; font-weight: 600; fill: #6A5660; }
.flag-bg { fill: #E35D6A; filter: drop-shadow(0 2px 3px rgba(227, 93, 106, .35)); }
.flag-bg.good { fill: #44A57A; filter: drop-shadow(0 2px 3px rgba(68, 165, 122, .35)); }
.flag-t { font-size: 11px; font-weight: 600; fill: #fff; }
.ring { fill: none; stroke: #F06B90; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ring-out 1.4s ease-out infinite; }
.ring2 { animation-delay: .7s; }
@keyframes ring-out { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.ghost { fill: none; stroke: #F06B90; stroke-width: 2.2; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .75; animation: ghost-in .6s ease-out both; }
.ghost.bad { stroke: #E35D6A; }
@keyframes ghost-in { from { opacity: 0; } }
.beam { stroke: #FFC93C; stroke-width: 2; stroke-dasharray: 3 4; }
.beam.bad { stroke: #E35D6A; }

/* speedometer */
.speedo-bg { fill: #fff; stroke: #D7EFE3; stroke-width: 1.5; filter: drop-shadow(0 1.5px 3px rgba(120, 60, 80, .12)); transition: fill .3s, stroke .3s; }
.speedo-n { font-size: 15px; font-weight: 650; fill: #3E8C6B; transition: fill .3s; }
.speedo-u { font-size: 8.5px; font-weight: 500; fill: #8C7881; }
.speedo.is-slow .speedo-bg { fill: #FFF6DB; stroke: #F6D67A; }
.speedo.is-slow .speedo-n { fill: #C08A12; }
.speedo.is-fast .speedo-bg { fill: #FDE4E6; stroke: #F3B2B9; }
.speedo.is-fast .speedo-n { fill: #D0414F; }
.speedo.is-hidden { display: none; }

.rain line { animation: rain-fall .6s linear infinite; }
@keyframes rain-fall { to { transform: translate(-6px, 18px); } }

@media (prefers-reduced-motion: reduce) {
  .actor.sig-l .sig-l circle, .actor.sig-r .sig-r circle, .actor.sig-h .sig circle { animation: none; opacity: 1; }
  .ring, .rain line, .map .is-hl { animation: none; }
}