/* The waiting screen: the wind catcher turning, then the air and the logo. See public/js/loader.js. */
.ysl {
  position: fixed;
  inset: 0;
  touch-action: none;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.2vh, 24px);
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, #1E1913 0%, #0B0A08 62%);
  color: #EDE7DA;
  cursor: progress;
  transition: opacity 0.3s ease;
}
.ysl.is-done { cursor: pointer; }
.ysl.is-out { opacity: 0; pointer-events: none; }
.ysl-air { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ysl-visual { position: relative; flex: none; width: min(54vh, 80vw); aspect-ratio: 1; }
/* One view at a time of a sheet of 8 x 6. Transform animations run on the compositor, so the turning does not stop while the page's scripts are busy. */
.ysl-spin { position: absolute; top: 0; bottom: 0; left: 50%; aspect-ratio: 400 / 522; transform: translateX(-50%); overflow: hidden; mix-blend-mode: screen; }
.ysl-spin-y { position: absolute; left: 0; top: 0; width: 100%; height: 600%; will-change: transform; animation: ysl-rows 4.8s steps(6) infinite; }
.ysl-spin-x { display: block; width: 800%; max-width: none; height: 100%; will-change: transform; animation: ysl-cols 0.8s steps(8) infinite; }
@keyframes ysl-rows { to { transform: translateY(-100%); } }
@keyframes ysl-cols { to { transform: translateX(-100%); } }
.ysl-logo { position: absolute; inset: 7%; width: 86%; height: 86%; display: block; opacity: 0; }
.ysl-foot { position: relative; display: grid; justify-items: center; gap: 10px; width: min(380px, 84vw); min-height: 76px; }
.ysl-pct { font: 500 12px/1 Montserrat, Corbel, 'Segoe UI', sans-serif; letter-spacing: 0.24em; color: #E9D9A0; transition: opacity 0.3s ease; }
.ysl-bar { display: block; width: 100%; height: 1px; background: rgba(201, 168, 76, 0.25); transition: opacity 0.3s ease; }
.ysl-fill { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #C9A84C, #F3E6B8); }
.ysl-msg { margin: 0; text-align: center; text-wrap: balance; font: 500 clamp(20px, 3vh, 30px)/1.25 'Cormorant Garamond', Georgia, 'Times New Roman', serif; color: #EDE7DA; }
.ysl.is-done .ysl-pct, .ysl.is-done .ysl-bar { opacity: 0; }
.ysl.is-done .ysl-msg { color: #F3E6B8; }
.ysl.is-error .ysl-msg { color: #E7A98F; }
@media (prefers-reduced-motion: reduce) { .ysl { transition: none; } .ysl-spin-x, .ysl-spin-y { animation: none; } }