/* The page, and the loading screen brought over from the garden (garden3d.html #loading).
   The loading screen is a tube's screen: the pen drawing of the sleeping head, light ink on black, shown the way an old CRT shows things
   in black and white (phosphor bloom, the colour guns a hair out of register, dark edges, a faint flicker). The bar through the head
   fills as the world loads; when it is ready the roots on the crown glow and are the way in. No text. */

html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
html.nothing, html.nothing body { background: #000; }
html.nothing body > * { display: none !important; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }

#loading { position: fixed; inset: 0; z-index: 40; overflow: hidden; background: #000; color: #ece4d4; transition: opacity 2.6s ease, visibility 2.6s; }
#loading.done { opacity: 0; visibility: hidden; pointer-events: none; }
#ldScreen { position: absolute; left: 50%; top: 50%; width: max(100vw, 128.205vh); height: max(100vh, 78vw); transform: translate(-50%, -50%);
            background: radial-gradient(ellipse at 50% 48%, #0e0e0e 0%, #070707 70%, #030303 100%); overflow: hidden; }
#ldScreen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
                   background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(0, 0, 0, .55) 100%); }
#ldTube { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; filter: url(#ldCrt); animation: ldFlicker 5s infinite; }
@keyframes ldFlicker { 0%, 100% { opacity: 1; } 31% { opacity: 1; } 32% { opacity: .96; } 33% { opacity: 1; } 71% { opacity: .98; } 72% { opacity: 1; } }

/* switching off: the picture squeezes to a bright line, the line to a dot, the dot fades; then the dark glass fades and the world is there */
#ldSquash { position: absolute; inset: 0; }
#ldLine { position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; z-index: 3; opacity: 0; pointer-events: none; will-change: transform, opacity;
          background: #f6f6f6; box-shadow: 0 0 14px 4px rgba(235, 235, 235, .7); }
#ldScreen.off #ldSquash { animation: ldOff .55s ease-in forwards; }
#ldScreen.off #ldLine { animation: ldLine .55s ease-in forwards; }
@keyframes ldOff { 0% { transform: none; opacity: 1; } 40% { transform: scale(1, .02); opacity: 1; } 46% { transform: scale(1, .004); opacity: 0; } 100% { transform: scale(1, .004); opacity: 0; } }
@keyframes ldLine { 0%, 34% { transform: none; opacity: 0; } 44% { transform: none; opacity: 1; } 75% { transform: scale(.02, 1); opacity: 1; } 100% { transform: scale(0, 1); opacity: 0; } }

#ldArt { width: min(560px, 88vw, 78vh); height: auto; overflow: visible; position: relative; z-index: 1; }
#ldArt .ink { fill: #e6e6e6; }
#ldArt .bar path { fill: none; stroke-width: 20; stroke-linecap: butt; stroke-linejoin: round; }
#ldArt .bar .empty { stroke: #3c3c3c; }
#ldArt .bar .fill { stroke: #f4f4f4; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
#ldArt .roots use { fill: #e6e6e6; transition: fill .6s; }
#ldEnter ellipse { fill: transparent; }
#loading.ready .roots use { fill: #ffffff; }
#loading.ready .roots { filter: url(#ldGlow); animation: ldRoots 2.4s ease-in-out infinite; }
#loading.ready #ldEnter { cursor: pointer; outline: none; }
#ldArt.rootsOn .roots { animation-duration: .9s; }            /* loading.js sets rootsOn while the pointer or focus is on them */
@keyframes ldRoots { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #loading.ready .roots { animation: none; opacity: 1; } #ldTube { animation: none; } }