/* ================= the loading intro (polish-r28, David 2 Nov) =================
   When the buyer commits to the free preview, a card covers the request line's screen for about ten seconds and says
   what is being made and how long it takes; for its last seconds a line under it says "Here is the loading screen" with
   three dots coming on gently, then the card fades away and the loading screen (the making screen, press-room.js, and
   the DJ script call) is there behind it, running as before. loading-intro.js puts it on #scr and times it.
   In the request line's style (request-line.css): dark glass, the Hustle MM logo top left, Inter Tight with a
   JetBrains Mono label, a pink neon edge with a cyan line along the bottom.
   Reduced motion (and the concept stills): no fades and no dot animation; it simply goes after the ten seconds. */
#monitor .ldi { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; overflow: hidden; border-radius: inherit; color: #fff; text-shadow: none; letter-spacing: 0;
  font: 500 15px/1.4 "Inter Tight", system-ui, sans-serif;
  background: radial-gradient(90% 55% at 12% 30%, rgba(255,45,170,.18), transparent 62%), radial-gradient(70% 50% at 100% 100%, rgba(61,240,255,.12), transparent 60%), linear-gradient(180deg, rgba(6,5,16,.97), rgba(3,2,10,.985));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#monitor .ldi[hidden] { display: none; }
#monitor .ldi::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,45,170,.55), inset 0 0 24px rgba(255,45,170,.16), inset 0 -2px 0 rgba(61,240,255,.45); }
#monitor .ldi-head { flex: none; display: flex; align-items: center; min-height: 52px; padding: 8px 60px 0 18px; }
#monitor .ldi-head .tz-logo { --logo-h: 22px; }
#monitor .ldi-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 6px clamp(18px, 7cqw, 64px) 24px; overflow-y: auto; }
#monitor .ldi-kick { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 11px/1.2 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: #ffb3e0; }
#monitor .ldi-kick i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ff2daa; box-shadow: 0 0 8px #ff2daa; animation: ldiLed 2.4s ease-in-out infinite; }
@keyframes ldiLed { 50% { opacity: .35; } }
#monitor .ldi-text { max-width: 34em; margin: 0; font: 600 clamp(16px, 4.3cqw, 24px)/1.45 "Inter Tight", system-ui, sans-serif; letter-spacing: -.005em; color: #fff; text-wrap: pretty; }
/* wait-r43: the explore sentence under the wording, a step quieter */
#monitor .ldi-also { max-width: 34em; margin: -4px 0 0; font: 500 clamp(14px, 3.4cqw, 18px)/1.45 "Inter Tight", system-ui, sans-serif; color: #d9d2f0; text-wrap: pretty; }
#monitor .ldi.ldi-on .ldi-also { animation: ldiRise .6s cubic-bezier(.22,.61,.36,1) .25s both; }
#monitor .ldi-next { display: flex; align-items: baseline; gap: 1px; margin: 0; font: 600 clamp(14px, 3.4cqw, 18px)/1.3 "Inter Tight", system-ui, sans-serif; color: #8ff8ff;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1), visibility 0s .6s; }
#monitor .ldi.ldi-next-on .ldi-next { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1), visibility 0s; }
#monitor .ldi-dots i { font-style: normal; opacity: .2; animation: ldiDot 1.5s ease-in-out infinite; }
#monitor .ldi-dots i:nth-child(2) { animation-delay: .25s; }
#monitor .ldi-dots i:nth-child(3) { animation-delay: .5s; }
@keyframes ldiDot { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }
/* on: it comes up out of the dark; out: it fades away to the loading screen behind */
#monitor .ldi.ldi-on { animation: ldiIn .45s ease-out both; }
#monitor .ldi.ldi-on .ldi-text { animation: ldiRise .6s cubic-bezier(.22,.61,.36,1) .1s both; }
@keyframes ldiIn { from { opacity: 0; } }
@keyframes ldiRise { from { opacity: 0; transform: translateY(8px); } }
#monitor .ldi.ldi-out { pointer-events: none; animation: ldiOut .8s ease-in both; }
@keyframes ldiOut { to { opacity: 0; filter: blur(4px); } }
/* the zoomed desktop: a size up */
.tz-full #monitor .ldi-head { min-height: 66px; padding: 10px 70px 0 30px; }
.tz-full #monitor .ldi-head .tz-logo { --logo-h: 30px; }
.tz-full #monitor .ldi-text { font-size: clamp(20px, 2.6cqw, 30px); }
.tz-full #monitor .ldi-also { font-size: clamp(16px, 1.9cqw, 21px); }
/* phones: full screen when the request line is zoomed (the zoom button is 48px there) */
html.phone-panels.lens #monitor.lens-on .ldi { border-radius: 0; }
/* r178: the intro covers the whole screen, and the "Your DJ script is ready" bar (paintScriptCall, night-shift-v3.js)
   becomes tappable about 6 s in, while the intro is still up (it stays 10 s). The bar sits at the foot of the making
   pane, so a tap landed on the intro and did nothing. The intro stops above the bar, so the bar can be tapped while
   the intro is showing; the intro's own text scrolls inside the space left. */
#monitor .ldi { bottom: var(--ldi-bar, 0px); }
/* the script view opens over the intro too (the intro stays up for 10 s; the bar is tappable from about 6 s) */
#monitor #scr > #djsview { z-index: 6; background: #07040d; }
#monitor .pane.press { container-type: size; --ldi-bar: 94px; }
@media (max-width: 1000px) and (orientation: landscape) { #monitor .pane.press { --ldi-bar: 62px; } }
html.phone-panels.lens #monitor.lens-on .ldi-head { min-height: 58px; padding-right: 62px; }
@media (max-width:1000px) and (orientation:landscape) {
  html.phone-landscape #monitor .ldi-head { min-height: 42px; }
  html.phone-landscape #monitor .ldi-head .tz-logo { --logo-h: 18px; }
  html.phone-landscape #monitor .ldi-main { gap: 10px; padding-bottom: 12px; }
  html.phone-landscape #monitor .ldi-text { font-size: clamp(14px, 2.4cqw, 18px); }
  html.phone-landscape #monitor .ldi-also { font-size: clamp(12px, 2cqw, 15px); }
}
@media (prefers-reduced-motion: reduce) {
  #monitor .ldi, #monitor .ldi *, #monitor .ldi::before { animation: none !important; transition: none !important; }
  #monitor .ldi-dots i { opacity: 1; }
}
.still #monitor .ldi, .still #monitor .ldi * { animation: none !important; transition: none !important; }