/* /while-you-wait (while-you-wait.html): a little robot at a terminal whose progress bar fills to 97% and thinks about
   it forever, a few ores falling in the night sky, and under the grass the miner digging ores up while you wait. All
   CSS, no script. The game's fonts and its green Play button. Reduced motion (the player's setting, from prefs.js)
   holds every piece still in its final pose. */
:root { --gold: #ffd33f; --dim: #f6e3bd; --edge: #eab76d;   /* the game's warm Lantern tokens (hub.css): gold, cream, honey */
  --ol: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000;
  --notch: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px)); }
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; }
body { position: relative; min-height: 100dvh; background: #1a100a url(/art/world/cave-0-a1.webp) 0 0 / 160px; color: #fff;
  font: 700 1rem/1.3 "Mali", "Trebuchet MS", system-ui, sans-serif; }
img { image-rendering: pixelated; }
.wait { position: relative; z-index: 0; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 20px; padding: 24px 16px; text-align: center; }

/* the agent at its terminal */
.desk { display: flex; align-items: end; gap: 14px; }
.bot { width: 80px; height: 120px; animation: type .6s steps(2) infinite; }
@keyframes type { 50% { translate: 0 -3px; } }
.term { width: min(360px, 62vw); padding: 14px 16px 16px; clip-path: var(--notch); background: #2a0f05; box-shadow: inset 0 0 0 3px #321007, inset 0 0 0 5px var(--edge); text-align: left; }
.say { margin: 0 0 10px; font: 700 1rem/1.3 "Atkinson Hyperlegible", system-ui, sans-serif; color: #8fe08a; }
.dots::after { content: "..."; animation: dots 1.6s steps(4) infinite; }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.bar { height: 16px; background: #4a2412; box-shadow: inset 0 0 0 2px #000; overflow: hidden; }
/* it gets to 97% and then thinks about it for a long, long time */
.bar i { display: block; height: 100%; width: 97%; background: repeating-linear-gradient(90deg, #6fd04a 0 10px, #4fae32 10px 20px); transform-origin: left; animation: fill 9s steps(18) infinite; }
@keyframes fill { 0% { transform: scaleX(.02); } 60%, 100% { transform: scaleX(1); } }

h1 { margin: 6px 0 0; font-size: clamp(2rem, 7vw, 3.6rem); line-height: 1.05; text-shadow: var(--ol), 0 5px 0 #000; }
h1 em { font-style: normal; color: var(--gold); }

/* the miner's hole: the sky ends where the miner stands, a strip of grass, then the page's dirt */
.hole { position: relative; display: flex; align-items: end; gap: 6px; height: 140px; margin-bottom: 12px; }
.hole::before { content: ""; position: absolute; z-index: -1; left: -100vw; right: -100vw; bottom: 0; height: 200vh;
  background: linear-gradient(to top, #2a3488, #141a4e 70vh); box-shadow: 0 8px 0 #4caa2e, 0 12px 0 #2f7a20; }
.miner { width: 80px; height: 120px; transform-origin: 50% 100%; animation: dig .7s steps(2) infinite; }
@keyframes dig { 50% { transform: rotate(10deg) translateY(4px); } }
.ores { position: relative; width: 120px; height: 120px; }
.ores img { position: absolute; left: 0; bottom: 0; width: 48px; height: 48px; opacity: 0; filter: drop-shadow(0 3px 0 #000); animation: ore 4.2s infinite; }
.ores img:nth-child(2) { animation-delay: 1.4s; left: 36px; }
.ores img:nth-child(3) { animation-delay: 2.8s; left: 72px; }
@keyframes ore { 0% { opacity: 0; transform: translateY(30px) scale(.5); } 10% { opacity: 1; transform: translateY(-50px) scale(1.1); } 20%, 30% { opacity: 1; transform: translateY(-40px); } 45%, 100% { opacity: 0; transform: translateY(-40px); } }

/* a few ores falling in the night sky (design C's rain, quieter): above the sky (the hole's ::before, at -1), under
   every word and the miner (each at 1) */
.rain { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
:is(.desk, h1, .who, .play, .miner, .ores) { position: relative; z-index: 1; }
.rain img { position: absolute; top: -48px; width: 28px; height: 28px; opacity: .8; animation: fall 11s linear infinite; }
.rain img:nth-child(1) { left: 7%; animation-delay: -1s; }
.rain img:nth-child(2) { left: 24%; animation-delay: -6s; animation-duration: 13s; }
.rain img:nth-child(3) { left: 76%; animation-delay: -3.5s; }
.rain img:nth-child(4) { left: 89%; animation-delay: -8.5s; animation-duration: 12s; }
.rain img:nth-child(5) { left: 61%; animation-delay: -10s; animation-duration: 14s; }
@keyframes fall { to { transform: translateY(55dvh) rotate(300deg); opacity: 0; } }

.who { margin: 0; font-size: 1.15rem; color: var(--dim); text-shadow: var(--ol); }
.play { display: inline-grid; place-items: center; min-height: 52px; padding: 0 28px; clip-path: var(--notch); background: linear-gradient(#3f8a2a, #2f7a20); color: #fff;
  text-decoration: none; font-size: 1.3rem; text-shadow: var(--ol); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .3); }
.play:hover, .play:focus-visible { color: var(--gold); outline: none; }

/* reduced motion: everything still, in its final pose (the bar at 97%, three ores dug up, no rain) */
html[data-motion="reduce"] :is(.bot, .miner, .bar i) { animation: none; }
html[data-motion="reduce"] .dots::after { animation: none; content: "..."; }
html[data-motion="reduce"] .ores img { animation: none; opacity: 1; transform: translateY(-40px); }
html[data-motion="reduce"] .rain { display: none; }

/* a short screen (a phone held sideways): smaller miners and tighter gaps, so it all fits without scrolling */
@media (max-height: 500px) {
  .wait { gap: 8px; padding: 10px 16px; }
  .bot, .miner { width: 48px; height: 72px; }
  .term { padding: 8px 12px 10px; }
  .say { margin-bottom: 6px; font-size: .9rem; }
  h1 { margin: 0; font-size: clamp(1.6rem, 6vh, 2.2rem); }
  .hole { height: 84px; margin-bottom: 8px; }
  .ores { width: 90px; height: 72px; }
  .ores img { width: 32px; height: 32px; }
  .ores img:nth-child(2) { left: 28px; }
  .ores img:nth-child(3) { left: 56px; }
  .play { min-height: 44px; font-size: 1.1rem; }
}