/* The riverside town behind the home page and the game's loading screen: three horizontal strips of pixel art (Back, Middle, Front - see
   assets/menus/Backdrops/RiversideTown) that scroll sideways at different speeds, the far one slowest, which makes the nearer ones look nearer. Each strip
   repeats every tile, so it is moved by exactly one tile and then starts again, without anyone seeing the join.

   The scrolling is all CSS, and the movement is a transform, so it stays smooth while the page is busy loading.

   There are several scenes (the folders in ParallaxBackdrops), each its own set of three strips. backdrop.js builds one - picked at random by the home page, and
   carried on by the loading screen - and lines the scrolling up from one page to the next (the home page hands over to the loading screen without the picture
   jumping).

   The picture is as tall as the window, and as wide as that makes it (368 : 208). */
.scenic-backdrop {
    --bd-tile-w: calc(100vh * 368 / 208);
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* The top row of the Back strip, for any sliver the picture doesn't cover */
    background-color: #33baff;
}

/* On a page: fixed behind everything */
.scenic-backdrop--page {
    position: fixed;
    z-index: -1;
}

.scenic-scene {
    position: absolute;
    inset: 0;
}

.scenic-layer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100vh;
    /* A window's width of strip, and one tile more to scroll into */
    width: calc(100% + var(--bd-tile-w));
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: var(--bd-image);
    background-size: var(--bd-tile-w) 100%;
    image-rendering: pixelated;
    will-change: transform;
    /* --bd-speed is how many pixels of the picture (not of the screen) go by in a second */
    animation: scenic-scroll calc(368s / var(--bd-speed)) linear infinite;
}

.scenic-layer--back {
    --bd-speed: 2;
}

.scenic-layer--middle {
    --bd-speed: 6;
}

.scenic-layer--front {
    --bd-speed: 14;
}

@keyframes scenic-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(calc(var(--bd-tile-w) * -1), 0, 0);
    }
}

/* Someone who has asked for less motion gets the scenery standing still */
@media (prefers-reduced-motion: reduce) {
    .scenic-layer {
        animation: none;
    }
}

/* Darkened towards the corners with the same brown the rest of the look is made of - the colour and the strength of this are the knobs to turn */
.scenic-vignette {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 60% at 50% 38%, transparent 0%, rgba(28, 16, 8, 0.6) 65%, var(--ink, #1C1008) 100%);
}

/* The loading animation: a spinner with a line of words under it. Shared by the game's loading screen (style.css) and the home page, which shows it as its
   own content fades away on the way to a server. */
.loading-spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    /* A dark disc and halo behind a pale ring with a gold arc going round it, so it shows against bright sky and dark doorways alike */
    background: rgba(23, 12, 5, 0.55);
    border: 4px solid rgba(255, 248, 230, 0.3);
    border-top-color: var(--hud-accent);
    box-shadow: 0 0 0 4px rgba(23, 12, 5, 0.55);
    animation: loading-spin 0.8s linear infinite;
}

.loading-status {
    margin: 0;
    font-size: var(--font-size-md, 20px);
    color: var(--text);
    letter-spacing: 0.02em;
    text-shadow: var(--text-outline);
}

@keyframes loading-spin {
    to {
        transform: rotate(360deg);
    }
}