/* The veil between the public site and the back office, and over the back office city while it is being built: the
   same rain-streaked glass, count and line as the opening of the home page (css/site.css, #loader). A page that is to
   arrive behind it is sent with data-veil on <body>, so it is covered from its first paint; js/veil.js then puts the
   count on it and wipes it away. */
body[data-veil]:not([data-veil="on"])::before{content:"";position:fixed;inset:0;z-index:90;background:rgba(7,10,15,.58);-webkit-backdrop-filter:blur(16px) brightness(.8);backdrop-filter:blur(16px) brightness(.8);animation:veil-out .5s 3.5s forwards}
@keyframes veil-out{to{opacity:0;visibility:hidden}}   /* without script the glass clears by itself */
.veil{position:fixed;inset:0;z-index:90;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(18px,4vw,48px);cursor:pointer;color:#f1f4f7;
  background:rgba(7,10,15,.58);-webkit-backdrop-filter:blur(16px) brightness(.8);backdrop-filter:blur(16px) brightness(.8)}
.veil canvas{position:absolute;inset:0;width:100%;height:100%}
.veil>:not(canvas){position:relative}
.veil .v-top{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:800;letter-spacing:.14em;font-size:22px;text-transform:uppercase}
.veil .v-top span{display:block;font-family:"Noto Sans SC",system-ui,sans-serif;font-weight:400;font-size:13px;letter-spacing:0;color:#9aa6b2;text-transform:none;margin-top:4px}
.veil .v-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.veil .v-count{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:300;font-size:clamp(110px,24vw,300px);line-height:.8;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.veil .v-status{max-width:20rem;margin-left:auto;font-family:"Noto Sans SC",system-ui,sans-serif;font-size:14px;color:#dfe5ea;text-align:right;padding-bottom:10px}
.veil .v-line{height:2px;background:rgba(241,244,247,.16);margin-top:10px;overflow:hidden}
.veil .v-line i{display:block;height:100%;width:0;background:#f1f4f7}
.veil .v-status small{display:block;color:#9aa6b2;font-size:12px;margin-top:8px}
/* leaving: the glass comes down over the page that is being left, the line runs, and the next page opens behind it */
.veil.leave{cursor:progress;opacity:0;transition:opacity .26s}
.veil.leave.in{opacity:1}
.veil.leave .v-line i{width:38%;animation:veil-run 1s linear infinite}
@keyframes veil-run{from{transform:translateX(-110%)}to{transform:translateX(290%)}}
@media (prefers-reduced-motion:reduce){.veil.leave{transition:none}.veil.leave .v-line i{animation:none;width:100%}}