/* WPOS loader: a glass pours into the logo, which fills up like water.
   Used after sign-in (login.php) and when a panel page is reloaded. */
.wpl {
  --wpl-ink: #231F20;
  --wpl-cream: #F3EAD3;
  --wpl-yellow: #FFCE00;
  --wpl-lw: 260px;
  --wpl-lh: calc(var(--wpl-lw) / 3.3236);
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  background: var(--wpl-ink);
  opacity: 1;
  transition: opacity .4s ease;
}
.wpl.is-leaving { opacity: 0; pointer-events: none; }
@media (max-width: 420px) { .wpl { --wpl-lw: 200px; } }

.wpl-stage { position: relative; width: calc(var(--wpl-lw) + 40px); height: calc(var(--wpl-lh) + 120px); }

/* Glass: slides in, tilts to pour, then stands back up and fades. */
.wpl-glass {
  position: absolute;
  top: 6px;
  left: calc(50% + 4px);
  width: 54px;
  height: 70px;
  transform-origin: 18% 18%;
  animation: wpl-glass 3.4s cubic-bezier(.45, .05, .35, 1) forwards;
}
.wpl-glass .wpl-cup { fill: none; stroke: var(--wpl-cream); stroke-width: 3; stroke-linejoin: round; }
.wpl-glass .wpl-drink { fill: var(--wpl-yellow); transform-box: fill-box; transform-origin: 50% 100%; animation: wpl-drink 3.4s ease-in-out forwards; }
@keyframes wpl-glass {
  0% { opacity: 0; transform: translate(26px, -10px) rotate(0deg); }
  12% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  22%, 78% { opacity: 1; transform: translate(0, 0) rotate(-62deg); }
  90% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(10px, -6px) rotate(0deg); }
}
@keyframes wpl-drink {
  0%, 22% { transform: scaleY(1); }
  78%, 100% { transform: scaleY(.12); }
}

/* Stream from the rim down to the top of the logo. */
.wpl-stream {
  position: absolute;
  top: 20px;
  left: calc(50% - 2px);
  width: 6px;
  height: calc(100% - var(--wpl-lh) - 20px);
  border-radius: 3px;
  background: var(--wpl-yellow);
  transform-origin: 50% 0;
  transform: scaleY(0);
  animation: wpl-stream 3.4s ease-in-out forwards;
}
@keyframes wpl-stream {
  0%, 20% { transform: scaleY(0); transform-origin: 50% 0; opacity: 1; }
  27% { transform: scaleY(1); transform-origin: 50% 0; }
  74% { transform: scaleY(1); transform-origin: 50% 100%; }
  82%, 100% { transform: scaleY(0); transform-origin: 50% 100%; opacity: 1; }
}

/* Logo: a grey outline that a wave-topped mask fills with the real colours. */
.wpl-logo { position: absolute; left: 20px; bottom: 0; width: var(--wpl-lw); height: var(--wpl-lh); }
.wpl-logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.wpl-empty { opacity: .16; filter: grayscale(1); }
.wpl-fill {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 300' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q32.5 0 65 12 T130 12 V300 H0 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 300' preserveAspectRatio='none'%3E%3Cpath d='M0 12 Q32.5 0 65 12 T130 12 V300 H0 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: 50% 300%;
  mask-size: 50% 300%;
  -webkit-mask-position: 0 var(--wpl-lh);
  mask-position: 0 var(--wpl-lh);
  animation: wpl-fill 2.4s cubic-bezier(.4, .05, .35, 1) .75s forwards;
}
@keyframes wpl-fill {
  0% { -webkit-mask-position: 0 var(--wpl-lh); mask-position: 0 var(--wpl-lh); }
  100% { -webkit-mask-position: calc(var(--wpl-lw) * -2) calc(var(--wpl-lh) * -0.2); mask-position: calc(var(--wpl-lw) * -2) calc(var(--wpl-lh) * -0.2); }
}

.wpl-text { margin: 0; color: var(--wpl-cream); font-family: "D-DIN", "Arial Narrow", Arial, sans-serif; font-size: 15px; letter-spacing: .04em; }
.wpl-text span { display: inline-block; width: 0; overflow: hidden; vertical-align: bottom; white-space: nowrap; animation: wpl-dots 1.2s steps(4, end) infinite; }
@keyframes wpl-dots { to { width: 1.2em; } }

@media (prefers-reduced-motion: reduce) {
  .wpl-glass, .wpl-stream { display: none; }
  .wpl-fill { -webkit-mask-image: none; mask-image: none; animation: none; }
  .wpl-text span { animation: none; width: auto; }
}