/* HK animated logo — colours are CSS variables so the logo can sit on light or dark sections */
.hk-logo {
  --hk-mark: currentColor;      /* HK monogram          */
  --hk-ring: currentColor;      /* circle arcs          */
  --hk-text: currentColor;      /* arc lettering        */
  --hk-tagline: currentColor;   /* tagline              */
  --hk-accent: #336bff;         /* loader progress ring */
  display: block; width: 100%; height: auto; overflow: visible;
}
.hk-logo .hk-H, .hk-logo .hk-K { fill: var(--hk-mark); }
.hk-logo .hk-arcs { fill: none; stroke: var(--hk-ring); stroke-linecap: round; stroke-dasharray: 1 1; }
.hk-logo .hk-ch { fill: var(--hk-text); transform-box: fill-box; transform-origin: center; }
.hk-logo .hk-tag { fill: var(--hk-tagline); transform-box: fill-box; transform-origin: center; }
.hk-logo .hk-brush { stroke-dasharray: 1 1; }
.hk-logo .hk-mono { transform-box: fill-box; transform-origin: center; }
.hk-logo .hk-mono-layer, .hk-logo .hk-ring-layer { transform-box: view-box; transform-origin: 650px 598px; will-change: transform; }
.hk-logo .hk-progress-track { fill: none; stroke: currentColor; stroke-opacity: .12; stroke-width: 3; }
.hk-logo .hk-progress { fill: none; stroke: var(--hk-accent); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }

/* start state before play() — prevents a flash of the finished logo */
.hk-logo.hk-pre .hk-arcs path, .hk-logo.hk-pre .hk-brush { stroke-dashoffset: 1; }
.hk-logo.hk-pre .hk-ch, .hk-logo.hk-pre .hk-tag { opacity: 0; }

/* ---------- loading screen ---------- */
.hk-is-loading, .hk-is-loading body { overflow: hidden; }
.hk-is-loading [data-hk-loader-target] { visibility: hidden; }
.hk-loader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; color: var(--hk-loader-fg, #f8f7f2); }
.hk-loader-bg { position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, var(--hk-loader-bg2, #12233d) 0%, var(--hk-loader-bg, #091629) 62%); }
.hk-loader-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.4vh, 26px); }
.hk-loader-mark { width: min(56vw, 42vh, 340px); aspect-ratio: 1; transform-origin: center; }
.hk-loader-tag { width: min(64vw, 40vh, 320px); opacity: .82; }
.hk-loader-pct { font: 600 12px/1 "Manrope", "DM Sans", system-ui, sans-serif; letter-spacing: .32em; opacity: .55; font-variant-numeric: tabular-nums; }
.hk-loader.hk-exit { pointer-events: none; }