/* Loading screen: deep-blue sea, rising bubbles, a light cloud card with three tiles and a progress bar */
html.is-loading{overflow:hidden}
#loader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;color:#04162b;
  background:linear-gradient(180deg,#000f22 0%,#1b3554 48%,#3f6593 100%);
  transition:opacity .6s ease,visibility 0s .6s;animation:ldFailsafe .01s 12s forwards}
#loader.out{opacity:0;visibility:hidden;pointer-events:none}
#loader.out .ld-cloud{transform:scale(1.12);opacity:0}
@keyframes ldFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}} /* if the script ever fails, the screen still goes away */

.ld-rings{position:absolute;inset:0;width:100%;height:100%;animation:ldBreath 9s ease-in-out infinite}
@keyframes ldBreath{50%{transform:scale(1.05)}}
.ld-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ld-b{position:absolute;bottom:-50px;border-radius:50%;border:1.5px solid rgba(192,230,253,.55);background:rgba(192,230,253,.14);animation:ldRise linear infinite}
@keyframes ldRise{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:1}100%{transform:translate3d(var(--dx,0),-115vh,0);opacity:0}}

.ld-skip{position:absolute;top:max(18px,env(safe-area-inset-top));right:18px;z-index:2;padding:7px 16px;border-radius:999px;cursor:pointer;
  font-weight:600;font-size:.82rem;color:#eaf6ff;background:rgba(0,15,34,.35);border:1px solid rgba(192,230,253,.35);transition:background .15s}
.ld-skip:hover{background:rgba(192,230,253,.2)}

.ld-cloud{position:relative;width:min(92vw,540px);aspect-ratio:540/380;transition:transform .6s ease,opacity .5s ease}
.ld-float{position:absolute;inset:0;display:grid;place-items:center;animation:ldFloat 4.5s ease-in-out infinite}
@keyframes ldFloat{50%{transform:translateY(-8px)}}
.ld-cloudbg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 26px 46px rgba(0,8,22,.6))}
.ld-body{position:relative;width:min(300px,72%);display:grid;justify-items:center;gap:10px;text-align:center}

.ld-tiles{display:flex;align-items:center;justify-content:center;height:100px;margin-bottom:2px}
.tile{display:grid;place-items:center;border-radius:22px;box-shadow:0 12px 24px -8px rgba(0,15,34,.6);animation:ldBob 2.2s ease-in-out infinite}
.tile svg{width:64%;height:64%;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.t1{width:66px;height:66px;background:#80aad3;color:#04162b;rotate:-12deg;margin-right:-8px}
.t2{width:88px;height:88px;background:#1b3554;border:3px solid #04162b;overflow:hidden;z-index:1;animation-delay:-.7s}
.t2 img{width:100%;height:100%;object-fit:cover}
.t3{width:66px;height:66px;background:#3f6593;color:#fff;rotate:12deg;margin-left:-8px;animation-delay:-1.4s}
@keyframes ldBob{50%{translate:0 -7px}}

.ld-chip{font:600 .68rem/1 ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;letter-spacing:.08em;color:#c0e6fd;background:#0b2038;padding:7px 12px;border-radius:9px;box-shadow:0 4px 10px rgba(0,15,34,.4)}
.ld-title{font:700 clamp(1.05rem,3.6vw,1.4rem)/1.2 var(--sans);letter-spacing:0;color:#04162b;margin:2px 0 4px}
.ld-bar{width:100%;height:7px;border-radius:99px;background:#c3dcf0;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,15,34,.25)}
.ld-bar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#3f6593,#80aad3)}
.ld-meta{width:100%;display:flex;justify-content:space-between;font:600 .62rem/1 ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;letter-spacing:.08em;color:#5b86b6}
.ld-meta b{font-size:.78rem;color:#04162b}

@media (max-width:480px){.tile.t1,.tile.t3{width:56px;height:56px}.t2{width:76px;height:76px}.ld-tiles{height:88px}}
@media (prefers-reduced-motion:reduce){#loader{animation:ldFailsafe .01s 12s forwards!important}}