:root {
  --loader-bg: var(--color-bg, #f2f2f3);
  --loader-fg: var(--color-text, #1d1f20);
  --loader-muted: var(--color-neutral-700, #5d5d60);
  --loader-main: var(--color-accent, #5980a6);
  --loader-branch-api: var(--color-accent-800, #2c455d);
  --loader-branch-design: var(--color-accent-700, #416180);
  --loader-branch-ux: var(--color-accent-600, #597ea3);
  --loader-branch-domain: var(--color-accent-500, #749dc4);
  --loader-branch-mobile: var(--color-accent-400, #94bce3);
}
html[data-theme="dark"] {
  --loader-bg: var(--color-bg, #1d2d3d);
  --loader-fg: var(--color-text, #f2f2f3);
  --loader-muted: var(--color-neutral-700, #c5cdd6);
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--loader-bg);
  color: var(--loader-fg);
  transition: opacity .45s ease, visibility .45s ease;
}
.site-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.skip-site-loader .site-loader { display: none !important; }
.site-loader__panel { width: min(1160px, calc(100vw - 32px)); }
.site-loader__stage { display: block; }
.site-loader__graph { width: 100%; }
.site-loader__graph svg { display: block; width: 100%; height: auto; overflow: visible; }
.loader-line { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.loader-line--main { stroke: var(--loader-main); stroke-dasharray: 100; stroke-dashoffset: 100; animation: loaderDraw 2.6s cubic-bezier(.4,0,.2,1) var(--delay, 0s) 1 both; }
.loader-line--feature { stroke: var(--loader-branch, var(--loader-main)); stroke-dasharray: 100; stroke-dashoffset: 100; animation: loaderDraw 2.6s cubic-bezier(.4,0,.2,1) var(--delay, 0s) 1 both; }
.loader-commit { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; stroke-width: 1.5; }
.loader-commit--main { fill: var(--loader-main); stroke: var(--loader-main); animation: commitIn 2.6s ease-out var(--delay, 0s) 1 both; }
.loader-commit--feature { fill: var(--loader-branch, var(--loader-main)); stroke: var(--loader-branch, var(--loader-main)); animation: commitIn 2.6s ease-out var(--delay, 0s) 1 both; }
.loader-commit--merge { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--loader-main) 45%, transparent)); }
.loader-node { stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; }
.loader-node { fill: var(--loader-branch, var(--loader-main)); stroke: var(--loader-branch, var(--loader-main)); animation: commitIn 2.6s ease-out var(--delay, 0s) 1 both; }
.loader-label { fill: var(--loader-muted); opacity: 0; font: 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .04em; paint-order: stroke; stroke: var(--loader-bg); stroke-width: 4px; stroke-linejoin: round; }
.loader-label--branch { text-anchor: middle; }
.loader-label--main { fill: var(--loader-main); animation: labelIn 2.6s ease-out var(--delay, 0s) 1 both; }
.loader-label--branch { fill: var(--loader-branch, var(--loader-muted)); animation: labelIn 2.6s ease-out var(--delay, 0s) 1 both; }
.site-loader__status { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 32px; color: var(--loader-muted); font: 400 13px/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; animation: statusIn .35s ease-out .25s both; }
.site-loader__pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--loader-main); box-shadow: 0 0 0 4px color-mix(in srgb, var(--loader-main) 18%, transparent); animation: loaderPulse 1.1s ease-in-out infinite; }
@keyframes loaderDraw { 0%, 8% { stroke-dashoffset: 100; opacity: .25; } 30% { stroke-dashoffset: 0; opacity: 1; } 72% { stroke-dashoffset: 0; opacity: 1; } 88%, 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes commitIn { 0%, 16% { opacity: 0; transform: scale(.72); } 25% { opacity: 1; transform: scale(1.08); } 32%, 74% { opacity: 1; transform: scale(1); } 86%, 100% { opacity: 0; transform: scale(.72); } }
@keyframes labelIn { 0%, 19% { opacity: 0; transform: translateY(3px); } 29%, 74% { opacity: 1; transform: translateY(0); } 86%, 100% { opacity: 0; transform: translateY(-2px); } }
@keyframes statusIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes loaderPulse { 50% { opacity: .45; transform: scale(.75); } }
@media (max-width: 600px) {
  .site-loader__panel { width: calc(100vw - 24px); }
  .loader-label { font-size: 9px; }
  .site-loader__status { margin-top: 22px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-loader { transition: none; }
  .loader-line { stroke-dashoffset: 0; animation: none; }
  .loader-commit, .loader-node, .loader-label, .site-loader__status { opacity: 1; transform: none; animation: none; }
  .site-loader__pulse { animation: none; }
}