/* 6.37: the start scene in live 3D (public/assets/hero3d). The canvas lies under the stage; the pictures of the stage
   stay in the page but invisible – their boxes tell the 3D scene where everything stands (also on phones). Logo,
   shortcuts, server card and name tags stay as they are. Without 3D none of these rules applies. */
/* 6.38: no fade – the first 3D frame matches the picture exactly, so the switch is invisible (a fade showed the dark
   background for a moment) */
.vh-3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; visibility: hidden; }
.vh.vh-3d .vh-3d-canvas { visibility: visible; }
/* 6.49.1: while the 3D scene loads, the pictures stay hidden (they only show the day and their background loads late:
   a dark stage with figures, then the day picture, then the night picture flashed up before the scene) – instead a calm
   sky of the right time of day, and the scene fades in over it. Without 3D (or if it gives up) the pictures come. */
.vh:is(.vh-wait3d, .vh-3d) { background: linear-gradient(180deg, #4f8fe0 0%, #9fcbf2 55%, #5d8a3c 100%); }
.vh:is(.vh-wait3d, .vh-3d)[data-time="evening"] { background: linear-gradient(180deg, #2a1d4f 0%, #b9576a 50%, #f0a35a 72%, #2e3a22 100%); }
.vh:is(.vh-wait3d, .vh-3d)[data-time="night"] { background: linear-gradient(180deg, #050a1c 0%, #121c44 60%, #10180f 100%); }
.vh.vh-3d .vh-3d-canvas { animation: vh-3d-in .5s var(--mv-ease-out, ease-out) both; }
/* 6.51: the big pictures of the stage (~1.4 MB) are only downloaded once the page knows it shows them (.vh-pics: no 3D,
   or the 3D scene gave up) – they used to load first and compete with the scene. Their boxes stay: the scene measures
   them. Without scripts the pictures show as always. A slow start shows a calm loading bar after 0.8 s. */
@media (scripting: enabled) {
  .vh:not(.vh-pics) :is(.vh-scene, .vh-bird, .vh-vault .back, .vh-vault .front, .vh-pl i) { background-image: none !important; }
  /* 7.17.0: the figures wait for the scene picture (.vh-scene-in, hero3d-loader.js) – on a slow line the four big
     pictures (~550 KB) loaded at once and the scene, the largest thing on the page, came last */
  .vh.vh-gate:not(.vh-scene-in) :is(.vh-bird, .vh-vault .back, .vh-pl i) { background-image: none !important; }
}
.vh.vh-wait3d::before { content: ""; position: absolute; left: 50%; bottom: 22%; z-index: 8; width: min(220px, 40vw); height: 6px; border-radius: 999px; translate: -50% 0;
  background: linear-gradient(90deg, rgb(255 255 255 / .08) 0%, rgb(255 214 120 / .85) 50%, rgb(255 255 255 / .08) 100%) 0 0 / 200% 100%, rgb(255 255 255 / .1);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 8px 24px -10px rgb(0 0 0 / .6);
  opacity: 0; animation: vh-load-in var(--mv-dur-slow, .36s) var(--mv-ease-out, ease-out) .8s forwards, vh-load 1.3s linear infinite !important; animation-play-state: running !important; }
@keyframes vh-load-in { to { opacity: 1; } }
@keyframes vh-load { to { background-position: -200% 0, 0 0; } }
@keyframes vh-3d-in { from { opacity: 0; } }
/* until the 3D scene is ready the intro waits (at most 6 s, then the pictures play) */
.vh.vh-wait3d * { animation-play-state: paused !important; }
/* 6.38: logo and shortcuts wait inside the vault until it bursts open */
.vh.vh-hold .vh-logo, .vh.vh-hold .vh-b, .vh.vh-hold .vh-b *, .vh.vh-hold .vh-b::before, .vh.vh-hold .vh-b::after { animation-play-state: paused !important; }
/* 6.39: while the camera moves in on the vault the name tags (they belong to the picture's camera) step aside */
.vh .vh-tag { transition: opacity .35s ease; }
.vh.vh-cine .vh-tag { opacity: 0; }
.vh:is(.vh-3d, .vh-wait3d) :is(.vh-scene, .vh-bird, .vh-farm, .vh-pl i, .vh-vault i, .vh-loot, .vh-beam, .vh-rays, .vh-flash, .vh-spark, .vh-mote),
.vh:is(.vh-3d, .vh-wait3d) .vh-pl::after,
.vh:is(.vh-3d, .vh-wait3d) .vh-vault::after,
.vh.vh-wait3d .vh-tag { visibility: hidden; }
/* 6.42: the time of day – a small glass switch in the bottom right corner of the scene */
.vh-tod { position: absolute; right: 18px; bottom: 34px; z-index: 9; display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: rgb(8 12 22 / .5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 10px 26px -12px rgb(0 0 0 / .7); }
.vh-tod button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: #dfe6f0;
  font: 700 .74rem/1 var(--font, system-ui); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background var(--mv-dur-fast) var(--mv-ease-out), color var(--mv-dur-fast) var(--mv-ease-out); }
.vh-tod button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vh-tod button:hover { background: rgb(255 255 255 / .1); color: #fff; }
.vh-tod button[aria-pressed="true"] { background: linear-gradient(135deg, #ffd27a, #ff9a52); color: #2a1606; box-shadow: 0 6px 16px -6px rgb(255 160 80 / .8); }
.vh[data-time="night"] .vh-tod button[aria-pressed="true"] { background: linear-gradient(135deg, #9db0ff, #6d7cf0); color: #0d1030; box-shadow: 0 6px 16px -6px rgb(120 140 255 / .8); }
.vh[data-time="day"] .vh-tod button[aria-pressed="true"] { background: linear-gradient(135deg, #fff2b0, #ffd04a); color: #2a2006; }
.vh-tod button:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }
/* 7.8.4: on computers the intro bar overlaps the bottom 40 px of the scene – the switch sits above it */
@media (min-width: 901px) { .vh-tod { bottom: 56px; } }
@media (max-width: 900px) { .vh-tod { right: 10px; bottom: 24px; } .vh-tod button span { display: none; } .vh-tod button { padding: 0 9px; } }
/* 6.42: the pointer over a player, an animal or a villager: they answer a click */
.vh.vh-pick { cursor: pointer; }
/* 7.8.5: the 3D scene draws the design's world itself (biome.js) – the CSS sky tint is only for the pictures */
.vh:is(.vh-3d, .vh-wait3d) .vh-tint { display: none; }
/* 7.24.0: phones show the pictures first – this button loads the 3D scene (the same glass look as the time of day) */
.vh-play3d { position: absolute; right: 14px; bottom: 14px; z-index: 9; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
  background: rgb(8 12 22 / .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18), 0 10px 26px -12px rgb(0 0 0 / .7);
  font: 700 .78rem/1 var(--font, system-ui); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.vh-play3d:hover, .vh-play3d:focus-visible { background: rgb(8 12 22 / .8); }