/* Stream Racers - the venue scene (venue-scene.js): a venue's landscape going
   by, on the home page and behind the cars on the "Scene" backdrop.

   Geometry is set by whoever hosts it, through these properties:
     --vs-horizon   the skyline's foot, from the bottom
     --vs-road      the road's top edge, from the bottom
     --vs-dash-top  the centre line, from the road's top edge
     --vs-sun       the sun's size; --vs-sun-right its distance from the right
   Motion is set from JS (transform on the inner <i>s and the dashes), apart
   from falling weather, which is a CSS animation. */

.venue-scene {
    --vs-horizon: 184px;
    --vs-road: 136px;
    --vs-dash-top: 66px;
    --vs-sun: 240px;
    --vs-sun-right: 21%;
    position: absolute; inset: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0; transition: opacity .6s;
}
.venue-scene.ready { opacity: 1; }
.vs-l { position: absolute; left: 0; right: 0; }
.vs-l > i { position: absolute; top: 0; bottom: 0; left: 0; will-change: transform; }

.vs-sky { top: 0; bottom: 0; background: var(--sky); }
.vs-stars { top: 0; height: 58%; background: var(--stars) repeat-x 0 0 / 400px 200px; opacity: .8; }
.vs-sun {
    left: auto; right: var(--vs-sun-right);
    bottom: calc(var(--vs-horizon) - var(--vs-sun) * .14);
    width: var(--vs-sun); height: var(--vs-sun);
    background: var(--sun) no-repeat center / contain;
    image-rendering: pixelated;
}
.vs-far { bottom: calc(var(--vs-horizon) - 4px); height: 120px; overflow: hidden; }
.vs-far > i { width: calc(100% + 400px); background: var(--far) repeat-x 0 100% / 400px 120px; image-rendering: pixelated; }
/* the landmark: one, and it stays put - far things barely move at speed */
.vs-landmark {
    left: auto; right: calc(var(--vs-sun-right) - 45px);
    bottom: calc(var(--vs-horizon) - 6px);
    width: 330px; height: 132px;
    background: var(--landmark) no-repeat 0 100% / 330px 132px;
    image-rendering: pixelated;
}
.vs-near { bottom: calc(var(--vs-horizon) - 6px); height: 104px; overflow: hidden; }
.vs-near > i { width: calc(100% + 260px); background: var(--near) repeat-x 0 100% / 260px 104px; image-rendering: pixelated; }

/* the synth grid between the city and the road: lines that run at you,
   rails that converge on the horizon */
.vs-grid { bottom: var(--vs-road); height: calc(var(--vs-horizon) - var(--vs-road)); overflow: hidden; background: var(--ground); }
.vs-grid > .g-h { right: 0; top: -12px; background: repeating-linear-gradient(0deg, var(--grid-line) 0 1px, transparent 1px 12px); }
.vs-grid > .g-v {
    left: -50%; right: -50%; top: 0;
    background: repeating-linear-gradient(90deg, var(--grid-dim) 0 1px, transparent 1px 46px);
    transform: perspective(60px) rotateX(55deg); transform-origin: 50% 100%;
}

.vs-roadside { bottom: calc(var(--vs-road) - 4px); height: 150px; overflow: hidden; }
.vs-roadside > i { width: calc(100% + 750px); background: var(--roadside) repeat-x 0 100% / 750px 150px; image-rendering: pixelated; opacity: .85; }

.vs-road { bottom: 0; height: var(--vs-road); background: linear-gradient(#2a2238, #17121f 60%, #0e0b14); }
.vs-edge { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--neon); opacity: .7; }
.vs-dashes {
    position: absolute; left: 0; right: -80px; top: var(--vs-dash-top); height: 4px;
    background: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 34px, transparent 34px 80px);
    will-change: transform;
}

/* weather over the scene */
.vs-fx { top: 0; bottom: 0; overflow: hidden; }
.vs-fx > i { left: -60px; right: 0; top: -60px; }
.venue-scene[data-fx="rain"] .vs-fx > i { background: repeating-linear-gradient(105deg, transparent 0 14px, rgba(207, 227, 255, .26) 14px 15px) 0 0 / 60px 60px; animation: vs-rain .5s linear infinite; }
@keyframes vs-rain { to { transform: translate(-16px, 60px); } }
.venue-scene[data-fx="wind"] .vs-fx > i { background: repeating-linear-gradient(178deg, transparent 0 26px, rgba(255,255,255,.14) 26px 27px) 0 0 / 240px 54px; animation: vs-rain .9s linear infinite; }
.venue-scene[data-fx="fog"] .vs-fx { background: linear-gradient(transparent 30%, rgba(244, 238, 252, .34) 55%, rgba(244, 238, 252, .2) 80%); }
.venue-scene[data-fx="heat"] .vs-fx { background: linear-gradient(transparent 50%, rgba(255, 196, 120, .14)); }

/* snow: three depths of pixel flakes (venue-scene.js scatters the tiles) */
.vs-snow { top: 0; bottom: 0; overflow: hidden; display: none; }
.venue-scene[data-fx="snow"] .vs-snow { display: block; }
.vs-snow b { position: absolute; inset: 0; will-change: transform; }
.vs-snow i { position: absolute; left: 0; will-change: transform; image-rendering: pixelated; }
.vs-snow .s1 { animation: vs-sway 5s ease-in-out infinite alternate; }
.vs-snow .s1 i { top: -300px; width: 100%; height: calc(100% + 300px); background: var(--snow1) repeat 0 0 / 300px 300px; animation: vs-fall-300 16s linear infinite; }
.vs-snow .s2 { animation: vs-sway 3.6s ease-in-out infinite alternate-reverse; }
.vs-snow .s2 i { top: -380px; width: 100%; height: calc(100% + 380px); background: var(--snow2) repeat 0 0 / 380px 380px; animation: vs-fall-380 10s linear infinite; }
.vs-snow .s3 i { top: -520px; width: calc(100% + 520px); height: calc(100% + 520px); background: var(--snow3) repeat 0 0 / 520px 520px; animation: vs-blow-520 5.5s linear infinite; }
@keyframes vs-sway { from { transform: translateX(-8px); } to { transform: translateX(8px); } }
@keyframes vs-fall-300 { to { transform: translateY(300px); } }
@keyframes vs-fall-380 { to { transform: translateY(380px); } }
@keyframes vs-blow-520 { to { transform: translate(-520px, 520px); } }

.venue-scene.paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
    .venue-scene *, .venue-scene *::before, .venue-scene *::after { animation: none !important; }
}