/* The splash of the live site. The entrance runs on page time, so assets/splash/main.js builds the 3D G in step with it. */
:root {
    --ink: #07060a;
    --paper: #e9dfcc;
    --muted: #9b917f;
    --orange: #ff9900;
    --orange-light: #ffcc7c;
    --g: min(34vmin, 280px);
}

html, body { margin: 0; height: 100%; }

body.uvod {
    overflow-x: hidden;
    background: var(--ink);
    color: var(--paper);
    font: 11px/1.4 Verdana, Tahoma, sans-serif;
}

/* The still page: the homepages as faded photographs. The WebGL canvas covers it. */
.uvod-collage {
    position: fixed;
    inset: -12vh -12vw;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 34vw, 520px), 1fr));
    gap: 3vmin;
    transform: rotate(-6deg);
    filter: blur(5px) sepia(0.45) saturate(0.8) brightness(0.42) contrast(0.9);
    animation: uvod-fade 2.4s ease-out both;
}
.uvod-collage img { width: 100%; height: auto; }
.uvod-collage::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 50% 42%, transparent 20%, var(--ink) 78%);
}

.uvod-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.uvod-stage {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    min-height: 100%;
    padding: 12vh 16px 4vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.uvod-title { margin: 0; display: flex; flex-direction: column; align-items: center; gap: calc(var(--g) * 0.16); }
.uvod-g { width: var(--g); height: var(--g); animation: uvod-rise 0.9s cubic-bezier(.2, .9, .3, 1.2) 1.9s both; }

/* A silver metal plate after the box of the v3 logo, the word cut out, as a vector: see tools/make-splash-wordmark.py.
   The template names the file of the brand. */
.uvod-wordmark {
    display: block;
    width: var(--g);
    aspect-ratio: 230 / 66;
    background: center / contain no-repeat;
    animation: uvod-fade 0.8s ease-out 2.6s both;
}

.uvod-versions {
    margin-top: auto;
    padding-top: 5vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 18px;
    max-width: 1100px;
    font: 11px/1.4 Verdana, Tahoma, sans-serif;
    animation: uvod-fade 0.8s ease-out 3.2s both;
}
.uvod-versions a { color: var(--muted); text-decoration: none; }
.uvod-versions a:hover, .uvod-versions a:focus-visible { color: var(--paper); text-decoration: underline; }

/* The dev switcher of the crowd cast, in the top left corner, out of the way of the G. */
.uvod-switcher {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    max-width: calc(100vw - 16px);
    font: 11px/1 Verdana, Tahoma, sans-serif;
}
.uvod-switcher a {
    padding: 4px 7px;
    color: var(--muted);
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    text-decoration: none;
}
.uvod-switcher a:hover, .uvod-switcher a:focus-visible { color: var(--paper); }
.uvod-switcher a.is-on { color: #ffb62e; border-color: #ffb62e; }

/* The 3D G takes the place of the SVG and keeps its box, so the page does not move. The box takes the hand. */
.is-3d .uvod-g { opacity: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.is-grabbing, .is-grabbing .uvod-g { cursor: grabbing; }
/* The 3D plate takes the place of the SVG one from the start; the SVG keeps the place the 3D plate is laid on.
   Only when the 3D plate cannot load does the SVG plate show. The animation goes too: its fill would keep the SVG
   visible. */
.is-3d .uvod-wordmark { opacity: 0; animation: none; }
.is-3d.no-plate .uvod-wordmark { opacity: 1; animation: uvod-fade 0.8s ease-out both; }
.is-3d .uvod-collage { display: none; }

/* The crowd under the logo: 64x64 sprites, scaled up by whole pixels only (see assets/splash/crowd.js). */
/* The bottom of the window is the ground: crowd.js moves every sprite down onto it. */
.uvod-crowd { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; }
.uvod-soldier { position: absolute; left: 0; bottom: 0; visibility: hidden; background-repeat: no-repeat; image-rendering: pixelated; will-change: transform; transform-origin: 50% 100%; }
/* The head of a watcher, over the body: crowd.js places it with its own transform, so it turns from the top left. */
.uvod-head { transform-origin: 0 0; }
/* The HE grenade of an idle page, its blast, the round text in the amber of the Counter-Strike 1.6 HUD, and the truce
   in the colours of the teams. */
.uvod-grenade { transform-origin: 50% 50%; }
.uvod-blast {
    position: absolute;
    left: 0;
    bottom: 0;
    visibility: hidden;
    border-radius: 50%;
    background: radial-gradient(circle, #fff7d6 0 16%, #ffc23a 30%, #f06a1c 46%, rgba(110, 58, 30, 0.55) 60%, rgba(40, 30, 25, 0) 71%);
}
.uvod-win, .uvod-cease {
    position: absolute;
    bottom: 0;
    visibility: hidden;
    font-weight: bold;
    font-family: Verdana, Tahoma, sans-serif;
    white-space: nowrap;
    text-shadow: 1px 1px 0 #000, 0 0 3px #000;
}
.uvod-win { left: 50%; transform: translateX(-50%); color: #ffb62e; letter-spacing: 0.02em; }
.uvod-cease { left: 0; }
/* A shot of the shootout: a thin tracer from the gun tip, turned from its left end, and a muzzle flash. The blast, the
   tracer and the flash keep these looks unless the cast gives its own (`effects` of crowd*.json). */
.uvod-tracer, .uvod-flash { position: absolute; left: 0; top: 0; visibility: hidden; }
.uvod-tracer { transform-origin: 0 50%; background: linear-gradient(90deg, #fff6c8, rgba(255, 214, 120, 0.9) 60%, rgba(255, 200, 90, 0)); }
.uvod-flash { border-radius: 50%; background: radial-gradient(circle, #ffffff 0 18%, #ffe07a 38%, rgba(255, 150, 40, 0) 70%); }
/* What a soldier says after the burst. The tail points down to the head. */
.uvod-grumble {
    position: absolute;
    left: 0;
    bottom: 0;
    visibility: hidden;
    padding: 1px 6px 2px;
    border: 2px solid var(--ink);
    border-radius: 7px;
    background: var(--paper);
    color: #c8261e;
    font-weight: bold;
    font-family: Verdana, Tahoma, sans-serif;
    line-height: 1.1;
    white-space: nowrap;
    transform-origin: 50% 100%;
}
.uvod-grumble::after {
    content: '';
    position: absolute;
    left: calc(50% - 5px);
    top: 100%;
    border: 5px solid transparent;
    border-top-color: var(--ink);
}

@media (max-width: 520px) {
    :root { --g: 46vmin; }
    .uvod-versions { gap: 4px 14px; }
}

@keyframes uvod-fade { from { opacity: 0; } }
@keyframes uvod-rise { from { opacity: 0; transform: scale(0.6); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}