/* WebPies — preloader (interract-style intro). Compiled from scss/components-preloader.scss.
   A full-screen dark panel with the logo + a 0–100 counter and progress line,
   then a curtain wipe-up reveal. Plays once per session. Always dark. */
#preloader{
  position: fixed; inset: 0; z-index: 9999; background: #0a0c0e; color: #f5f1ea;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; overflow: hidden;
}
#preloader::after{ /* soft lime glow — consistent across viewports */
  content: ""; position: absolute; z-index: 0; top: -25%; left: 50%; width: 120vw; height: 80vh;
  transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 40%, rgba(200,242,92,.18), transparent 70%); pointer-events: none;
}
#preloader::before{ /* fine grain texture */
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(245,241,234,.04) 1px, transparent 1px); background-size: 4px 4px;
}
#preloader > *{ position: relative; z-index: 1; }
#preloader[hidden]{ display: none; }
html.pl-lock{ overflow: hidden; }

.pl-logo{ display: flex; align-items: center; gap: 12px; font-family: 'Instrument Serif', serif; font-size: clamp(30px, 6vw, 52px); position: relative; }
.pl-logo .it{ font-style: italic; }
.pl-logo svg{ width: clamp(30px, 6vw, 46px); height: auto; }

.pl-bar{ position: relative; width: min(300px, 64vw); height: 3px; border-radius: 999px; background: rgba(245,241,234,.12); overflow: hidden; }
.pl-bar span{ position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #9fd031, #c8f25c); box-shadow: 0 0 12px rgba(200,242,92,.6); }
.pl-count{ font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .3em; color: rgba(245,241,234,.55); }
.pl-count::after{ content: "%"; opacity: .5; margin-left: 1px; }

/* curtain wipe-up on finish */
#preloader.pl-done{ transform: translateY(-100%); transition: transform .9s cubic-bezier(.76,0,.24,1); }
.pl-logo, .pl-bar, .pl-count{ transition: opacity .4s ease, transform .5s cubic-bezier(.16,1,.3,1); }
#preloader.pl-fade .pl-logo, #preloader.pl-fade .pl-bar, #preloader.pl-fade .pl-count{ opacity: 0; transform: translateY(-12px); }

@media (prefers-reduced-motion: reduce){
  #preloader.pl-done{ transition: opacity .3s ease; transform: none; opacity: 0; }
}