/* The illustration is decorative; title and live loading status stay accessible HTML. */
#loading {
  background-color: #10262b;
  background-image: linear-gradient(180deg, #071b294d 0%, transparent 40%, #061316d9 100%), url('./art/anukira-cover-v1.png');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
#loading > .eyebrow {
  position: absolute;
  top: clamp(24px, 7vh, 90px);
  font-size: clamp(48px, 8vw, 112px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #f4dfb7;
  text-shadow: 0 3px 3px #051b20, 0 5px 28px #031219;
  padding-left: .16em;
}
#loading > .eyebrow::first-letter { color: inherit; }
#loading h2 {
  position: absolute;
  bottom: max(100px, 14vh);
  margin: 0 20px;
  color: #f4e7cd;
  text-align: center;
  font-size: clamp(17px, 2vw, 23px);
  text-shadow: 0 2px 8px #000;
}
#loading #loading-text {
  position: absolute;
  bottom: max(65px, 9vh);
  margin: 0 24px;
  color: #e1d5bd;
  text-shadow: 0 2px 6px #000;
}
#loading .loading-line {
  position: absolute;
  bottom: max(40px, 6vh);
  width: min(300px, 64vw);
  height: 2px;
  margin: 0;
  background: linear-gradient(90deg, transparent, #e6c88d, transparent);
}
@media (max-width: 600px) { #loading { background-position: 52% center; } }
@media (prefers-reduced-motion: reduce) { #loading .loading-line { animation: none; } }