/*
 * Brand splash (#vk-splash) + thin navigation bar (#vk-navbar) — ported from
 * the app/admin shell (templates/shared/splash.php) to the Astro docs.
 *
 * Lives in a global stylesheet (CSP style-src 'self') rather than an inline
 * <style>, because the strict public-docs CSP blocks un-nonced inline styles.
 * The V of the wordmark morphs (flubber) into the isotype checkmark; the indigo
 * field is absorbed behind the white badge and reveals the page. A small gray
 * "Docs" badge sits at the logo's bottom-right, matching the topbar wordmark.
 *
 * prefers-reduced-motion → revealed instantly, no animation.
 */
:root { --vk-brand: #2f4f99; }

#vk-splash { position: fixed; inset: 0; z-index: 2147483646; overflow: hidden; pointer-events: none; contain: layout paint; }
.vk-splash-skip #vk-splash { display: none !important; }
#vk-splash .vk-bgfill { position: absolute; inset: 0; background: var(--vk-brand); clip-path: circle(150% at 50% 50%); transition: clip-path .85s cubic-bezier(.66,0,.34,1); }
#vk-splash.vk-absorb .vk-bgfill { clip-path: circle(80px at 50% 50%); }
#vk-splash.vk-done .vk-bgfill { clip-path: circle(0px at 50% 50%); }
#vk-splash .vk-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 7%; }
#vk-splash .vk-logowrap { position: relative; display: inline-block; width: 100%; max-width: 660px; }
#vk-splash .vk-logo { display: block; width: 100%; height: auto; opacity: 0; transform: scale(.96); transform-origin: center; transition: opacity .6s ease, transform .6s cubic-bezier(.34,1.4,.64,1); }
#vk-splash.vk-on .vk-logo { opacity: 1; transform: scale(1); }
#vk-splash .vk-eriko, #vk-splash .vk-adorno { transition: opacity .55s ease; }
#vk-splash.vk-erase .vk-eriko, #vk-splash.vk-erase .vk-adorno { opacity: 0; }
#vk-splash .vk-vwrap { transform: translate(0px,0px); transition: transform .7s cubic-bezier(.34,1.4,.64,1), opacity .5s ease; }
#vk-splash.vk-erase .vk-vwrap { transform: translate(2514px,82px); }
#vk-splash.vk-done .vk-vwrap { opacity: 0; transition: opacity .45s ease .1s; }
#vk-splash .vk-badgebg { fill: #fff; opacity: 0; transition: opacity .42s ease .5s; }
#vk-splash.vk-badge .vk-badgebg { opacity: 1; }
#vk-splash .vk-morph { fill: #fff; transition: fill .42s ease .55s; }
#vk-splash.vk-badge .vk-morph { fill: var(--vk-brand); }
#vk-splash .vk-spinner { opacity: 0; transition: opacity .35s ease .15s; }
#vk-splash.vk-badge .vk-spinner { opacity: 1; }
#vk-splash.vk-absorb .vk-spinner { opacity: 0; transition: opacity .3s ease; }
#vk-splash .vk-sptrack { fill: none; stroke: rgba(255,255,255,.20); stroke-width: 74; }
#vk-splash .vk-sparc { fill: none; stroke: #fff; stroke-width: 80; stroke-linecap: round; stroke-dasharray: 1800 8400; transform-box: fill-box; transform-origin: center; animation: vk-spin .85s linear infinite; }
@keyframes vk-spin { to { transform: rotate(360deg); } }

/* "Docs" badge — gray, like the topbar wordmark badge, on the indigo field.
   Anchored to the logo's bottom-right; fades in with the logo. */
#vk-splash .vk-docs-badge {
  position: absolute;
  right: 4%;
  bottom: -0.4em;
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 1.6vw, 1rem);
  font-weight: var(--weight-medium, 500);
  letter-spacing: 0.02em;
  color: #1a1a1a;
  background: rgba(236,239,243,0.95);
  padding: 0.12em 0.6em;
  border-radius: var(--radius-pill, 999px);
  line-height: 1.4;
  opacity: 0;
  transition: opacity .5s ease;
}
#vk-splash.vk-on .vk-docs-badge { opacity: 1; }
#vk-splash.vk-erase .vk-docs-badge { opacity: 0; }

/* Secondary loader — thin top progress bar on internal navigation. */
#vk-navbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2147483645; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
#vk-navbar.vk-active { opacity: 1; }
#vk-navbar > i { display: block; height: 100%; width: 0; background: var(--vk-brand); box-shadow: 0 0 8px var(--vk-brand); }

@media (prefers-reduced-motion: reduce) {
  #vk-splash .vk-sparc { animation: none; }
}