/* The loading screen (play.html #loading, dressed by game/play-screens.js), on top of game.css's: the chapter's picture
   drifting slowly, a map's contours, motes of dust in the air (or stars, at night), the chapter's name rising letter by
   letter in big type, a field card (the hour, the air, the height, the chapter's place in its campaign, who is in the
   field), the route of the loading itself as waypoints lighting one by one, a compass whose needle settles and swings,
   and the tips, faded one into the next.

   Everything that moves moves by transform and opacity only, so it keeps moving while the game is busy building the
   world (those run off the main thread); and none of it moves for anybody who has asked for less motion. */

#loading::before { display: none; }   /* game.css's still picture: the drifting one below takes its place */
#loading .overlay__eyebrow { display: none; }   /* the game writes the chapter's name there as text; ours is #loading-title */
.loadscreen__bar .loader { display: none; }      /* the route below is the progress */

/* ---- the background ---- */
.ls-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ls-art {
  position: absolute; inset: -6%; opacity: 0; background: var(--art, none) center / cover no-repeat;
  filter: blur(1.5px) saturate(1.08); transform: scale(1.06); will-change: transform;
}
#loading.has-art .ls-art { opacity: 1; animation: ls-drift 42s ease-in-out infinite alternate, ls-fade 1.4s ease-out both; }
@keyframes ls-drift {
  0% { transform: scale(1.06) translate3d(-1.5%, 1%, 0); }
  50% { transform: scale(1.14) translate3d(1%, -1.2%, 0); }
  100% { transform: scale(1.1) translate3d(2%, 0.8%, 0); }
}
@keyframes ls-fade { from { opacity: 0; } to { opacity: 1; } }
/* a map's contours, faint over the picture and plainer over the chapter's colours */
.ls-map {
  position: absolute; inset: -20%; opacity: 0.16; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.2'%3E%3Cpath d='M210 60c70 0 140 40 140 120s-60 150-140 150S60 280 70 190 140 60 210 60z'/%3E%3Cpath d='M210 95c50 0 105 30 105 90s-45 112-105 112-110-38-102-104 52-98 102-98z'/%3E%3Cpath d='M212 132c32 0 70 20 70 56s-30 72-68 72-72-24-66-66 32-62 64-62z'/%3E%3Cpath d='M214 166c16 0 34 10 34 26s-14 34-32 34-34-12-30-30 12-30 28-30z'/%3E%3Cpath d='M-20 380c80-40 150-30 220 10s160 50 240 0' /%3E%3Cpath d='M-20 410c80-36 150-26 220 12s160 46 240-2'/%3E%3Cpath d='M-20 20c60 30 120 20 170-10s110-30 160 0 90 30 130 10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 420px 420px; animation: ls-map 90s linear infinite; will-change: transform;
}
#loading:not(.has-art) .ls-map { opacity: 0.28; }
@keyframes ls-map { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-420px, -210px, 0); } }

/* motes of dust drifting up through the light; at night, stars that come and go */
.ls-motes { position: absolute; inset: 0; }
.ls-mote {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 214, 0.95), rgba(255, 220, 150, 0.35) 45%, transparent 70%);
  opacity: 0; animation: ls-float var(--d) ease-in-out var(--delay) infinite; will-change: transform, opacity;
}
@keyframes ls-float {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
  20% { opacity: var(--o, 0.8); }
  80% { opacity: calc(var(--o, 0.8) * 0.6); }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(1.1); }
}
#loading.is-night .ls-mote { background: radial-gradient(circle, #fff, rgba(200, 220, 255, 0.5) 40%, transparent 70%); animation-name: ls-twinkle; animation-timing-function: ease-in-out; }
@keyframes ls-twinkle { 0%, 100% { opacity: 0.18; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.15); } }

/* ---- the top: the name of the game, and a compass that settles ---- */
.loadscreen__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: auto; }
.loadscreen__top .loadscreen__logo { margin-bottom: 0; }
.ls-compass { width: 58px; height: 58px; flex: none; color: #fff2d8; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55)); }
.ls-compass circle { fill: none; stroke: currentColor; stroke-width: 1.6; }
.ls-compass .thin { stroke-width: 0.8; opacity: 0.55; }
.ls-compass .ticks { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ls-compass text { fill: currentColor; font: 800 9px/1 var(--font-display, serif); }
.ls-compass__ring { transform-origin: 32px 32px; animation: ls-spin 80s linear infinite; }
.ls-compass__needle { transform-origin: 32px 32px; animation: ls-needle 4.2s cubic-bezier(.45, 0, .25, 1) infinite; }
.ls-compass__needle .n { fill: #ff8a5c; }
.ls-compass__needle .s { fill: #f4ead6; opacity: 0.85; }
.ls-compass__needle circle { fill: #2a2118; stroke: #f4ead6; stroke-width: 1; }
@keyframes ls-spin { to { transform: rotate(360deg); } }
@keyframes ls-needle { 0% { transform: rotate(-38deg); } 30% { transform: rotate(14deg); } 52% { transform: rotate(-6deg); } 70% { transform: rotate(3deg); } 100% { transform: rotate(-38deg); } }

/* ---- the chapter's name, big, letter by letter ---- */
.loadscreen__label { font-size: 0.8rem; letter-spacing: 0.26em; display: inline-flex; align-items: center; gap: 12px; }
.loadscreen__label::after { content: ''; width: 72px; height: 1px; background: currentColor; opacity: 0.7; transform-origin: left; animation: ls-line 1.2s 0.6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ls-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ls-title {
  /* as big as the screen allows, by its width and by its height: never pushing the top off a short screen */
  margin: 2px 0 6px; font: 900 clamp(2.3rem, min(7.4vw, 10.5vh), 6.4rem)/0.95 var(--font-display, serif); letter-spacing: 0.015em; color: #fff7ea;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.5); max-width: 24ch; text-wrap: balance;
}
.ls-title .w { display: inline-block; white-space: nowrap; }
.ls-title .c { display: inline-block; opacity: 0; transform: translate3d(0, 0.45em, 0) rotate(5deg); animation: ls-rise 0.8s cubic-bezier(.2, .8, .2, 1) calc(0.15s + var(--i) * 32ms) both; }
@keyframes ls-rise { to { opacity: 1; transform: none; } }
.loadscreen__blurb { font-size: clamp(1rem, 1.6vw, 1.18rem); max-width: 50ch; opacity: 0; animation: ls-in 0.9s 0.7s ease-out both; }
@keyframes ls-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }

/* ---- the field card: the hour, the air, the height, where in the campaign, who is in the field ---- */
.ls-facts { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 2px 0 14px; }
.ls-facts:empty { display: none; }
.ls-fact {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 12px;
  background: rgba(8, 14, 10, 0.5); border: 1px solid rgba(255, 255, 255, 0.14); color: #f2ece0;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; animation: ls-in 0.6s ease-out calc(0.9s + var(--i) * 110ms) both;
}
.ls-fact__ico { font-size: 1.2rem; line-height: 1; }
.ls-fact b { display: block; font-size: 1.02rem; font-weight: 700; line-height: 1.1; }
.ls-fact small { display: block; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.ls-fact img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ls-fact--daily { border-color: rgba(255, 196, 108, 0.55); background: rgba(60, 38, 10, 0.55); }

/* ---- the route: the loading's own stages as waypoints, lit one by one ---- */
.ls-route { position: relative; display: grid; grid-template-columns: repeat(var(--n, 6), 1fr); width: min(620px, 100%); margin: 4px 0 2px; }
.ls-route::before, .ls-route__fill { content: ''; position: absolute; left: calc(50% / var(--n, 6)); right: calc(50% / var(--n, 6)); top: 9px; height: 2px; border-radius: 2px; }
.ls-route::before { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 6px, transparent 6px 11px); }
.ls-route__fill { background: linear-gradient(90deg, #ffd48f, #ff9a5c); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 0.9s cubic-bezier(.3, .7, .2, 1); box-shadow: 0 0 10px rgba(255, 170, 90, 0.6); }
.ls-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); text-align: center; }
.ls-step i { position: relative; width: 20px; height: 20px; border-radius: 50%; background: rgba(10, 16, 12, 0.85); border: 2px solid rgba(255, 255, 255, 0.4); transition: border-color 0.4s, background 0.4s, transform 0.4s; }
.ls-step.is-done { color: rgba(255, 236, 200, 0.85); }
.ls-step.is-done i { background: #ffbf6e; border-color: #ffe2b0; }
.ls-step.is-now { color: #fff3dc; }
.ls-step.is-now i { border-color: #ffd48f; background: #3a2a14; transform: scale(1.15); }
.ls-step.is-now i::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid #ffd48f; animation: ls-ping 1.4s ease-out infinite; }
@keyframes ls-ping { from { opacity: 0.9; transform: scale(0.55); } to { opacity: 0; transform: scale(1.35); } }

/* the stage, said in words: bigger, and fresh each time it changes */
.loadscreen__bar { margin-top: 6px; }
.loadscreen__bar .overlay__text { font-size: clamp(0.98rem, 1.5vw, 1.12rem); font-weight: 600; color: #fff1d6; letter-spacing: 0.01em; }
/* a nudge, not a fade from nothing: set just before the game's heaviest work, a fade would sit at nothing until it ended */
.loadscreen__bar .overlay__text.is-new { animation: ls-nudge 0.5s ease-out; }
@keyframes ls-nudge { from { transform: translate3d(0, 6px, 0); } to { transform: none; } }

/* the tips: one at a time, faded in, with something to look at */
.loadscreen__tip { display: flex; gap: 12px; align-items: center; font-size: clamp(0.86rem, 1.25vw, 0.98rem); color: #d6e1d8; max-width: 70ch; transition: opacity 0.45s ease; }
.loadscreen__tip.is-out { opacity: 0; }
.loadscreen__tip .ls-tip__ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 1.15rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); }
.loadscreen__tip b { color: #ffd48f; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; margin-right: 6px; }

/* straight onto a video call: the ringing face is the point, the rest steps back */
#loading.is-video .ls-title { font-size: clamp(2rem, 6vw, 4rem); }
#loading.is-video .ls-facts, #loading.is-video .ls-route { display: none; }

/* narrow screens: everything closer together, the route's labels away */
@media (max-width: 560px) {
  .ls-compass { width: 46px; height: 46px; }
  .loadscreen__label::after { display: none; }
  .ls-step span { display: none; }
  .ls-fact { padding: 6px 10px 6px 8px; }
  .ls-fact b { font-size: 0.92rem; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .ls-title { font-size: clamp(2rem, 7vw, 3.6rem); }
  .ls-facts { margin-bottom: 6px; }
  .loadscreen__blurb { display: none; }
}

/* less motion, asked for: nothing drifts, nothing spins, nothing rises; it is all simply there */
@media (prefers-reduced-motion: reduce) {
  #loading .ls-art, .ls-map, .ls-mote, .ls-compass__ring, .ls-compass__needle, .ls-title .c, .loadscreen__blurb, .ls-fact,
  .loadscreen__label::after, .ls-step.is-now i::after, .loadscreen__bar .overlay__text.is-new { animation: none !important; }
  .ls-title .c, .loadscreen__blurb, .ls-fact { opacity: 1; transform: none; }
  .ls-mote { opacity: 0.35; }
  .ls-route__fill { transition: none; }
}