/* Splash: covers the page while the 3D venue loads and builds (splash.js).
   Idle motion is CSS transform only, so it keeps running on the compositor
   while world.js blocks the main thread building the venue. */
#loading{
  /* above everything, nav included: nothing shows until the paint reveals it */
  position:fixed;inset:0;z-index:1000;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  --sp-pad:6vw;
  padding:7vh var(--sp-pad) calc(7vh + env(safe-area-inset-bottom,0px));
  color:var(--ivory);
  background-color:#1B0A4A;
  /* notebook paper: faint ruled lines */
  background-image:repeating-linear-gradient(to bottom,transparent 0 35px,rgba(200,245,58,.07) 35px 36px);
  clip-path:inset(0 0 0 0);
}
#loading.done{opacity:0;pointer-events:none;transition:opacity .6s}
#loading.sp-hidden{display:none}
/* the painted reveal draws the paper itself (splash-reveal.js) */
#loading.sp-painting{background:none}
/* the exit (Anand, 28 Sep: the reveal must be smooth): the turbulence filter and the float are off while the splash leaves,
   so nothing is re-rasterised per frame on top of the venue */
#loading.sp-exit .sp-d svg,#loading.sp-exit .sp-scribble{filter:none;animation:none}
.sp-paint{position:absolute;inset:0;width:100%;height:100%;display:block}

.sp-body{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0}
#loading.sp-ready .sp-body{opacity:1}
#loading .ldlogo{height:72px;width:auto;margin-bottom:20px}

.sp-title{margin:0;font:400 clamp(56px,10vw,160px)/.98 var(--hand);letter-spacing:.01em}
.sp-line{display:block;white-space:nowrap}
.sp-line+.sp-line{color:var(--lime)}
.sp-ch{display:inline-block;will-change:transform}

.sp-scribble{display:block;width:min(560px,78vw);height:30px;margin-top:6px;overflow:visible;filter:url(#wob2)}
.sp-scribble path{fill:none;stroke:var(--lime);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}

.sp-meta{display:flex;align-items:baseline;justify-content:center;gap:16px;margin-top:14px;flex-wrap:wrap}
.sp-pct{font:400 40px/1 var(--hand);color:var(--lime);min-width:3.2ch;font-variant-numeric:tabular-nums}
.sp-pct b{font-weight:400}
.sp-step{margin:0;font:600 19px/1.3 var(--pen);color:rgba(250,246,232,.85)}
.sp-when{margin:10px 0 0;font:400 15px/1.4 var(--pen);color:rgba(250,246,232,.6)}
/* doodles from the page's own icon sprite, wobbled like the rest of the site */
.sp-doodles{position:absolute;inset:0;pointer-events:none}
.sp-d{position:absolute;display:block}
.sp-d svg{display:block;width:100%;height:100%;filter:url(#wob2);animation:sp-float 5s ease-in-out infinite}
.d1{width:112px;height:112px;left:12vw;top:14vh;color:var(--lime)}
.d2{width:68px;height:68px;right:17vw;top:12vh;color:var(--sun)}
.d3{width:84px;height:84px;right:8vw;top:50vh;color:var(--pink)}
.d4{width:74px;height:74px;left:7vw;top:60vh;color:var(--ivory)}
.d5{width:92px;height:92px;right:22vw;bottom:8vh;color:var(--sun)}
.d2 svg{animation-duration:4.2s;animation-delay:-1.3s}
.d3 svg{animation-duration:6s;animation-delay:-2.1s}
.d4 svg{animation-duration:4.6s;animation-delay:-.7s}
.d5 svg{animation-duration:5.4s;animation-delay:-3s}
@keyframes sp-float{
  0%,100%{transform:translateY(0) rotate(-6deg)}
  50%{transform:translateY(-14px) rotate(6deg)}
}

@media (max-width:700px){
  #loading{--sp-pad:40px}
  #loading .ldlogo{height:56px}
  .d1{width:76px;height:76px;left:auto;right:9vw;top:9vh}
  .d2{width:46px;height:46px;right:auto;left:16vw;top:13vh}
  .d3{width:56px;height:56px;right:auto;left:14vw;top:auto;bottom:10vh}
  .d4,.d5{display:none}
  .sp-pct{font-size:32px}
  .sp-step{font-size:17px}
}

@media (prefers-reduced-motion:reduce){
  .sp-d svg{animation:none}
}

/* the drone drop after the splash: nothing over the shot */
body.intro #snav,body.intro #hud,body.intro #overlay,body.reel #snav,body.reel #hud,body.reel #overlay,body.reel #personHint,body.reel #toast{opacity:0!important;pointer-events:none!important}