/* ==============================================================
   Loading screen (.pl, every page; driven by loader.js).
   The logo starts dim and fills from the bottom up as the page loads
   (--p, 0 → 1), with a bright scan line at the fill level; then the
   screen slides up with a glowing green edge.
   ============================================================== */
html.pl-active, html.pl-active body { overflow: hidden; }
.pl { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; background: #050a09; }
.pl.is-gone { display: none; }
.pl__stage { display: grid; justify-items: center; gap: 16px; }
.pl__logo { position: relative; width: min(300px, 70vw); filter: drop-shadow(0 0 calc(var(--p, 0) * 20px) rgba(84, 184, 147, 0.5)); }
.pl__logo img { display: block; width: 100%; height: auto; opacity: .18; filter: grayscale(1); }
.pl__logo-fill { position: absolute; inset: 0; background: linear-gradient(0deg, #fff, #fff 60%, var(--vs-theme-color2, #54b893)); clip-path: inset(calc((1 - var(--p, 0)) * 100%) 0 0 0); -webkit-mask: url("/assets/img/logo.svg") center / contain no-repeat; mask: url("/assets/img/logo.svg") center / contain no-repeat; }
.pl__logo::before { content: ""; position: absolute; z-index: 1; left: -8%; right: -8%; bottom: calc(var(--p, 0) * 100%); height: 1px; background: linear-gradient(90deg, transparent, var(--vs-theme-color2, #54b893) 20%, #fff 50%, var(--vs-theme-color2, #54b893) 80%, transparent); box-shadow: 0 0 12px var(--vs-theme-color2, #54b893); opacity: calc(1 - var(--p, 0) * var(--p, 0)); }
.pl__meta { display: flex; gap: 12px; font-family: var(--title-font); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-color4, rgba(246, 245, 245, 0.5)); }
.pl__pct { min-width: 3.2em; color: var(--vs-theme-color2, #54b893); font-variant-numeric: tabular-nums; }
.pl__skip { position: absolute; right: 24px; bottom: 24px; padding: 6px 12px; font-family: var(--title-font); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-color4, rgba(246, 245, 245, 0.5)); background: none; border: 1px solid rgba(246, 245, 245, 0.14); opacity: 0; animation: pl-in .4s 1.5s forwards; }
.pl__skip:hover { color: var(--title-color, #fff); border-color: var(--vs-theme-color2, #54b893); }
@keyframes pl-in { to { opacity: 1; } }
.pl.is-leaving { animation: pl-slide 1.1s cubic-bezier(.7, 0, .2, 1) forwards; }
.pl.is-leaving::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--vs-theme-color2, #54b893); box-shadow: 0 0 24px var(--vs-theme-color2, #54b893); }
@keyframes pl-slide { to { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .pl, .pl * { animation-duration: .01s !important; transition-duration: .01s !important; }
}