/* Full-screen pre-loader: the logo starts out dull and muddy, a pressure-washer jet sweeps across it and leaves it clean and shining,
   while a wall of blocks is laid underneath. First visit of a session plays everything; later pages play a shorter version (--k). */
@property --p{syntax:'<percentage>';inherits:true;initial-value:-12%}
html.pl-lock,html.pl-lock body{overflow:hidden!important}
#abw-pre{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 38%,#fff 0%,#EEF5FF 52%,#DCEAFF 100%);
  font-family:'Montserrat','Segoe UI',system-ui,sans-serif;color:#0B2A66;transition:opacity calc(.55s*var(--k,1)) ease,transform calc(.55s*var(--k,1)) ease,visibility 0s linear calc(.55s*var(--k,1));}
#abw-pre.pl-out{opacity:0;visibility:hidden;transform:scale(1.04);pointer-events:none}
#abw-pre .pl-in{width:min(460px,80vw);display:flex;flex-direction:column;align-items:center;gap:clamp(14px,3vh,26px)}
/* water-droplet pattern drifting behind the logo */
#abw-pre::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(circle at 20% 30%,rgba(45,155,255,.10) 0 2px,transparent 3px) 0 0/46px 46px,radial-gradient(circle at 70% 70%,rgba(45,155,255,.08) 0 3px,transparent 4px) 0 0/72px 72px;
  animation:pl-drift calc(14s*var(--k,1)) linear infinite}
@keyframes pl-drift{to{background-position:46px 92px,72px -72px}}

.pl-logo{--p:-12%;position:relative;width:100%;aspect-ratio:768/347;animation:pl-wash calc(2.3s*var(--k,1)) cubic-bezier(.55,.05,.3,1) calc(.3s*var(--k,1)) forwards,pl-pop calc(.7s*var(--k,1)) cubic-bezier(.2,1.2,.4,1) calc(2.65s*var(--k,1)) both}
@keyframes pl-wash{from{--p:-12%}to{--p:112%}}
@keyframes pl-pop{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}
.pl-logo img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.pl-dirty{filter:grayscale(.9) sepia(.55) brightness(.62) contrast(.85) blur(.5px);opacity:.9}
.pl-clean{-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--p) - 5%),transparent calc(var(--p) + 1%));mask-image:linear-gradient(90deg,#000 calc(var(--p) - 5%),transparent calc(var(--p) + 1%))}
/* the jet: a slanted bright beam with a foamy edge; droplets are thrown off it */
.pl-jet{position:absolute;top:-8%;bottom:-8%;left:var(--p);width:5%;margin-left:-2.5%;transform:skewX(-12deg);pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95) 40%,#9FD6FF 55%,rgba(45,155,255,0));
  filter:blur(.6px);box-shadow:0 0 22px 6px rgba(80,170,255,.55);border-radius:50%;opacity:0;animation:pl-jet-on calc(2.3s*var(--k,1)) ease calc(.3s*var(--k,1)) forwards}
@keyframes pl-jet-on{0%{opacity:0}6%,92%{opacity:1}100%{opacity:0}}
.pl-d{position:absolute;left:var(--x,50%);top:var(--y,50%);width:var(--s,6px);height:var(--s,6px);margin:calc(var(--s,6px)/-2) 0 0 calc(var(--s,6px)/-2);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0 25%,#8CCBFF 60%,rgba(45,155,255,.5));opacity:0;animation:pl-spray calc(.55s*var(--k,1)) ease-out calc(var(--d,0s)*var(--k,1)) infinite}
@keyframes pl-spray{0%{opacity:0;transform:translate(0,0) scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx,20px),var(--dy,-30px)) scale(1)}}
/* glints once it is clean */
.pl-glint{position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%) 160% 0/300% 100% no-repeat;animation:pl-glint calc(1.1s*var(--k,1)) ease-in-out calc(2.6s*var(--k,1)) infinite}
@keyframes pl-glint{0%{background-position:160% 0}60%,100%{background-position:-60% 0}}
.pl-sp{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;opacity:0;pointer-events:none;
  background:radial-gradient(circle,#fff 0 18%,rgba(140,210,255,.95) 34%,rgba(140,210,255,0) 70%);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  animation:pl-tw calc(2.2s*var(--k,1)) ease-in-out calc(var(--d,2.7s)*var(--k,1)) infinite}
@keyframes pl-tw{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:1;transform:scale(1.2) rotate(45deg)}70%{opacity:0}}

/* blocks being laid */
.pl-wall{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;width:72%}
.pl-wall b{display:block;height:11px;border-radius:2px;background:linear-gradient(180deg,#2D9BFF,#0F4FC2);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 4px -1px rgba(11,42,102,.45);
  opacity:0;transform:translateY(-26px) rotate(var(--r,0deg));animation:pl-lay calc(.42s*var(--k,1)) cubic-bezier(.3,1.5,.5,1) calc((.35s + var(--i)*.2s)*var(--k,1)) forwards}
.pl-wall b:nth-child(even){background:linear-gradient(180deg,#1F7BE0,#0B2A66)}
@keyframes pl-lay{0%{opacity:0;transform:translateY(-26px) rotate(var(--r,0deg))}70%{opacity:1;transform:translateY(2px)}100%{opacity:1;transform:none}}
.pl-wall.pl-done b{animation:pl-lay calc(.42s*var(--k,1)) cubic-bezier(.3,1.5,.5,1) calc((.35s + var(--i)*.2s)*var(--k,1)) forwards,pl-wave calc(1.4s*var(--k,1)) ease-in-out calc((2.6s + var(--i)*.07s)*var(--k,1)) infinite}
@keyframes pl-wave{0%,100%{transform:none}50%{transform:translateY(-3px)}}
.pl-txt{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#0F4FC2;text-align:center;opacity:0;animation:pl-fade calc(.8s*var(--k,1)) ease calc(1.6s*var(--k,1)) forwards}
.pl-txt small{display:block;margin-top:6px;font-size:9.5px;letter-spacing:.1em;color:#0B2A66;opacity:.7;font-weight:600}
@keyframes pl-fade{to{opacity:1}}

@media (prefers-reduced-motion:reduce){#abw-pre *{animation:none!important}.pl-dirty,.pl-jet,.pl-d,.pl-glint,.pl-sp{display:none}.pl-clean{-webkit-mask:none;mask:none}.pl-wall b,.pl-txt{opacity:1;transform:none}}