/* the travel screen between places (#loader, ui/dom.js withLoader, game/world.js loaderPreview): the destination's
   picture fades in from a blurred dark copy with a slow zoom; places without one get a gradient in the colours of
   their music with a big floating icon. Kicker, place name, description, progress and a tip sit at the bottom left.
   State classes on #loader: on/off (fade), pic | glyph | ov (what the backdrop shows), plain (no picture at all). */
#loader{--ld-acc:#f6c445;--ld-glow:rgba(246,196,69,.34);
  --ld-bg:radial-gradient(ellipse 70% 55% at 75% 12%,rgba(246,196,69,.26),transparent 70%),radial-gradient(ellipse 65% 60% at 12% 88%,rgba(64,128,210,.32),transparent 72%),linear-gradient(165deg,#132a45 0%,#0c1a2c 52%,#060c16 100%);
  position:fixed;inset:0;z-index:30;overflow:hidden;isolation:isolate;background:#0b1522;color:#fff;opacity:0;transition:opacity .22s ease-out}
#loader.on{opacity:1}
#loader.off{opacity:0;pointer-events:none;transition-duration:.32s;transition-timing-function:ease-in}

/* themes: the audio moods of maps and interiors (shared/maps.js music, shared/interiors.js SPEC) */
#loader[data-theme=beach]{--ld-acc:#ffb27a;--ld-glow:rgba(255,190,120,.42);
  --ld-bg:radial-gradient(ellipse 45% 30% at 50% 64%,rgba(255,214,140,.55),transparent 72%),linear-gradient(180deg,#26285c 0%,#5d3473 26%,#c25a73 48%,#f29a63 61%,#f7b56e 65.6%,#2f6f95 66%,#1a4467 80%,#0b2238 100%)}
#loader[data-theme=park]{--ld-acc:#b9e66c;--ld-glow:rgba(170,235,120,.32);
  --ld-bg:radial-gradient(ellipse 60% 50% at 28% 14%,rgba(196,240,130,.24),transparent 70%),radial-gradient(ellipse 70% 60% at 85% 92%,rgba(46,150,96,.38),transparent 72%),linear-gradient(170deg,#1b4630 0%,#10301f 52%,#071910 100%)}
#loader[data-theme=finance]{--ld-acc:#7fd3f7;--ld-glow:rgba(127,211,247,.32);
  --ld-bg:radial-gradient(ellipse 55% 50% at 78% 12%,rgba(127,211,247,.28),transparent 70%),radial-gradient(ellipse 60% 55% at 10% 90%,rgba(60,90,170,.35),transparent 72%),linear-gradient(170deg,#183456 0%,#0e2038 55%,#060e1a 100%)}
#loader[data-theme=villa]{--ld-acc:#ffcf8a;--ld-glow:rgba(255,200,130,.34);
  --ld-bg:radial-gradient(ellipse 60% 52% at 72% 20%,rgba(255,200,130,.34),transparent 70%),radial-gradient(ellipse 60% 55% at 12% 88%,rgba(150,90,160,.3),transparent 72%),linear-gradient(170deg,#3d2c44 0%,#271b2e 55%,#120b16 100%)}
#loader[data-theme=lounge]{--ld-acc:#f6c445;--ld-glow:rgba(246,196,69,.3);
  --ld-bg:radial-gradient(ellipse 55% 45% at 26% 20%,rgba(246,196,69,.24),transparent 70%),radial-gradient(ellipse 60% 55% at 86% 84%,rgba(196,78,140,.32),transparent 72%),linear-gradient(160deg,#2d1733 0%,#1b0f23 55%,#0b0610 100%)}
#loader[data-theme=club]{--ld-acc:#ff7ad6;--ld-glow:rgba(255,110,210,.38);
  --ld-bg:radial-gradient(ellipse 50% 44% at 22% 26%,rgba(255,63,180,.44),transparent 70%),radial-gradient(ellipse 55% 50% at 82% 72%,rgba(63,220,255,.32),transparent 72%),linear-gradient(160deg,#1d0a3d 0%,#100628 58%,#06020f 100%)}
#loader[data-theme=work]{--ld-acc:#6fe0a0;--ld-glow:rgba(111,224,160,.28);
  --ld-bg:radial-gradient(ellipse 60% 50% at 72% 16%,rgba(111,224,160,.2),transparent 70%),radial-gradient(ellipse 60% 55% at 12% 88%,rgba(70,110,150,.32),transparent 72%),linear-gradient(165deg,#1e2d3c 0%,#131e29 55%,#090f15 100%)}
#loader[data-theme=home]{--ld-acc:#ffb46b;--ld-glow:rgba(255,176,104,.38);
  --ld-bg:radial-gradient(ellipse 60% 50% at 66% 20%,rgba(255,176,104,.36),transparent 70%),radial-gradient(ellipse 60% 52% at 12% 88%,rgba(214,88,88,.26),transparent 72%),linear-gradient(165deg,#3e2318 0%,#28160f 55%,#130a07 100%)}

/* ---------- backdrop: gradient, drifting isometric grid, map overview, big icon, picture */
.ld-stage,.ld-grad,.ld-grid,.ld-pic,.ld-shade{position:absolute;inset:0}
.ld-grad{background:var(--ld-bg)}
.ld-grid{-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 15%,transparent 75%)}
.ld-grid i{position:absolute;inset:-32px -64px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32'%3E%3Cpath d='M0 16L32 0L64 16L32 32Z' fill='none' stroke='%23fff' stroke-opacity='.075'/%3E%3C/svg%3E") 0 0/64px 32px;
  animation:ldDrift 4.5s linear infinite}
@keyframes ldDrift{to{transform:translate(32px,16px)}}
#loaderCv{position:absolute;inset:0;width:100%;height:100%;opacity:0;filter:blur(.6px) saturate(1.15);transform:translateY(-7%) scale(.9);transition:opacity .45s ease-out}
#loader.ov #loaderCv{opacity:.55;animation:ldOv 10s cubic-bezier(.2,.6,.35,1) both}
@keyframes ldOv{from{transform:translateY(-7%) scale(.97)}to{transform:translateY(-7%) scale(.9)}}

.ld-glyph{position:absolute;left:50%;top:40%;font-size:clamp(92px,24vmin,210px);line-height:1;transform:translate(-50%,-50%);opacity:0;transition:opacity .35s ease-out}
.ld-glyph::before{content:"";position:absolute;left:50%;top:50%;width:2.4em;height:2.4em;margin:-1.2em 0 0 -1.2em;border-radius:50%;background:radial-gradient(circle,var(--ld-glow) 0%,transparent 66%)}
.ld-glyph::after{content:"";position:absolute;left:50%;top:100%;width:1em;height:.2em;margin:.1em 0 0 -.5em;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.45),transparent 70%)}
.ld-glyph span{position:relative;display:block;filter:drop-shadow(0 .06em .1em rgba(0,0,0,.35))}
#loader.glyph .ld-glyph{opacity:1}
#loader.glyph .ld-glyph span{animation:ldPop .6s cubic-bezier(.2,1.25,.4,1) backwards,ldFloat 3.6s .6s ease-in-out infinite alternate}
@keyframes ldPop{from{opacity:0;transform:scale(.6) translateY(.1em)}}
@keyframes ldFloat{to{transform:translateY(-.06em)}}

.ld-pic{opacity:0;transition:opacity .35s ease-out}
.ld-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ld-blur{filter:blur(16px) brightness(.5) saturate(1.2);transform:scale(1.08)}
.ld-sharp{opacity:0}
#loader.pic .ld-pic{opacity:1;animation:ldZoom 10s cubic-bezier(.2,.6,.35,1) both}
#loader.pic .ld-sharp{opacity:1;animation:ldSharp .75s .1s ease-out backwards}
/* once the sharp picture covers it, the blurred copy stops being drawn under the zoom */
#loader.pic .ld-blur{animation:ldGone .1s .95s forwards}
@keyframes ldZoom{from{transform:scale(1.13)}to{transform:scale(1.03)}}
@keyframes ldSharp{from{opacity:0}}
@keyframes ldGone{to{opacity:0}}

/* keeps the words readable on any picture: dark at the bottom, a little at the top for the status bar */
.ld-shade{pointer-events:none;background:linear-gradient(180deg,rgba(4,9,18,.5) 0%,rgba(4,9,18,0) 16%),
  linear-gradient(0deg,rgba(4,9,18,.94) 0%,rgba(4,9,18,.72) 22%,rgba(4,9,18,.25) 44%,rgba(4,9,18,0) 62%),
  radial-gradient(ellipse 120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.4) 100%)}

/* ---------- words */
.ld-top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;padding:calc(14px + var(--sat)) calc(18px + var(--sar)) 0 calc(18px + var(--sal))}
.ld-top .logo{font-size:17px;text-shadow:0 2px 0 rgba(0,0,0,.4);opacity:.92}
.ld-info{position:absolute;left:0;bottom:0;width:100%;max-width:820px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:0 calc(22px + var(--sar)) calc(26px + var(--sab)) calc(22px + var(--sal))}
.ld-kick{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:900;letter-spacing:2.2px;text-transform:uppercase;color:var(--ld-acc);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.ld-kick::before{content:"";flex:none;width:22px;height:2px;border-radius:2px;background:currentColor;box-shadow:0 0 8px currentColor}
.ld-title{margin:0;max-width:100%;font-size:clamp(31px,5.2vw,64px);font-weight:900;line-height:1.04;letter-spacing:-.4px;text-wrap:balance;overflow-wrap:anywhere;text-shadow:0 4px 26px rgba(0,0,0,.55),0 2px 0 rgba(0,0,0,.25)}
.ld-ic{display:inline-block;margin-right:.22em;font-size:.84em;letter-spacing:0}
.ld-ic:empty,#loader.plain .ld-ic{display:none}
.ld-desc{margin:0;max-width:56ch;color:#dbe7f2;font-size:clamp(14.5px,1.3vw,17px);line-height:1.5;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.6);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.ldbar{position:relative;width:min(420px,100%);height:4px;margin-top:6px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.35)}
.ldbar i{position:absolute;inset:0;border-radius:inherit;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s cubic-bezier(.3,.7,.4,1);
  background:linear-gradient(90deg,var(--ld-acc) 0%,var(--ld-acc) 60%,#fff6dc 100%)}
.ldbar::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:ldSweep 1.5s ease-in-out infinite}
@keyframes ldSweep{to{transform:translateX(300%)}}
.ld-tip{margin:2px 0 0;display:flex;align-items:baseline;gap:9px;max-width:62ch;color:#bccddd;font-size:13px;line-height:1.45;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.ld-tip b{flex:none;padding:1px 7px;border-radius:6px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);color:var(--ld-acc);font-size:10px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;text-shadow:none}

/* the words rise in one after another as the screen fades in */
#loader.on .ld-top{animation:ldFade .5s .1s backwards}
#loader.on .ld-kick{animation:ldRise .55s .05s cubic-bezier(.2,.8,.3,1) backwards}
#loader.on .ld-title{animation:ldRise .55s .1s cubic-bezier(.2,.8,.3,1) backwards}
#loader.on .ld-desc{animation:ldRise .55s .16s cubic-bezier(.2,.8,.3,1) backwards}
#loader.on .ldbar{animation:ldFade .5s .22s backwards}
#loader.on .ld-tip{animation:ldFade .5s .28s backwards}
@keyframes ldRise{from{opacity:0;transform:translateY(16px)}}
@keyframes ldFade{from{opacity:0}}

/* desktop: more air, and the shade also darkens the left side where the words are */
@media (min-width:900px){
  .ld-top{padding:calc(26px + var(--sat)) calc(36px + var(--sar)) 0 calc(36px + var(--sal))}
  .ld-top .logo{font-size:20px}
  .ld-info{gap:12px;padding:0 calc(56px + var(--sar)) calc(48px + var(--sab)) calc(56px + var(--sal))}
  .ld-kick{font-size:12.5px;letter-spacing:2.6px}
  .ld-tip{font-size:13.5px}
  .ld-shade{background:linear-gradient(180deg,rgba(4,9,18,.45) 0%,rgba(4,9,18,0) 14%),
    linear-gradient(0deg,rgba(4,9,18,.9) 0%,rgba(4,9,18,.55) 24%,rgba(4,9,18,0) 52%),
    linear-gradient(90deg,rgba(4,9,18,.6) 0%,rgba(4,9,18,.2) 38%,rgba(4,9,18,0) 60%),
    radial-gradient(ellipse 120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.4) 100%)}
}
/* short landscape phones: the icon moves right of the words, the tip goes */
@media (max-height:520px) and (orientation:landscape){
  .ld-glyph{left:78%;top:44%;font-size:clamp(72px,30vh,150px)}
  .ld-info{max-width:66%;gap:7px;padding-bottom:calc(16px + var(--sab))}
  .ld-title{font-size:clamp(26px,4.2vw,40px)}
  .ld-desc{-webkit-line-clamp:2;font-size:14px}
  .ld-tip{display:none}
  .ld-top{padding-top:calc(10px + var(--sat))}
}
@media (prefers-reduced-motion:reduce){
  #loader *,#loader *::before,#loader *::after{animation:none!important}
  #loader,#loader.off,.ld-pic,.ld-glyph,#loaderCv{transition-duration:.15s}
}