/* ═══════════════════════════════════════════════════════════════════════
   SAIZEN ACUITY · PAGE LOADER
   One loader for every hub page, built on the same grammar as the profile
   boots: a signature for the page, a status line, a hairline bar, a mono
   meta row, then the panel wipes up off the page.
   Only the theme and the signature change from page to page.
   Driven by loader.js, which sets --p (0 → 1) and toggles [data-at] parts.
   ═══════════════════════════════════════════════════════════════════════ */

.ld {
  --ld-bg: #FAF8F3;
  --ld-ink: #17130E;
  --ld-mut: #7D7466;
  --ld-line: rgba(23, 19, 14, 0.12);
  --ld-acc: #B8892B;
  --ld-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ld-out: cubic-bezier(0.22, 1, 0.36, 1);
  --p: 0;
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  background: var(--ld-bg); color: var(--ld-ink);
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.95s var(--ld-io);
  animation: ldFailsafe 0.01s 7s forwards; /* never strand the page behind it */
  -webkit-font-smoothing: antialiased;
}
html.no-js .ld, html.ld-gone .ld { display: none; }
@keyframes ldFailsafe { to { visibility: hidden; pointer-events: none; } }

.ld.is-done { clip-path: inset(0 0 100% 0); animation: none; }
.ld.is-fade { clip-path: none; opacity: 0; transition: opacity 0.35s ease; animation: none; }

/* ── the column ──────────────────────────────────────────────────────── */
.ld__in {
  width: min(340px, calc(100vw - 32px));
  display: grid; justify-items: center; gap: 14px; text-align: center;
  animation: ldIn 0.7s var(--ld-out) both;
  transition: opacity 0.45s ease, transform 0.75s var(--ld-io);
}
.ld.is-quick .ld__in { animation-duration: 0.25s; }
.ld.is-done .ld__in { opacity: 0; transform: translateY(-28px); }
@keyframes ldIn { from { opacity: 0; transform: translateY(12px); } }

.ld__sig { width: 100%; height: 76px; display: grid; place-items: center; margin-bottom: 6px; }
.ld__sig svg { display: block; height: 76px; width: auto; max-width: 100%; overflow: visible; }

/* status line: each new line rises in, the old one rises out */
.ld__line { position: relative; width: 100%; height: 30px; overflow: hidden; margin: 0; }
.ld__line span {
  position: absolute; inset: 0; display: block; white-space: nowrap;
  font: 400 22px/30px 'Playfair Display', Georgia, 'Times New Roman', serif; letter-spacing: -0.005em;
  transition: transform 0.55s var(--ld-out), opacity 0.4s ease;
}
.ld__line span.is-in { transform: translateY(100%); opacity: 0; }
.ld__line span.is-out { transform: translateY(-100%); opacity: 0; }

.ld__bar { width: 100%; height: 1px; background: var(--ld-line); overflow: hidden; }
.ld__bar i { display: block; height: 100%; background: var(--ld-acc); transform: scaleX(var(--p)); transform-origin: left; }

.ld__meta {
  width: 100%; display: flex; justify-content: space-between; gap: 12px; margin: 0;
  font: 400 11px/1.4 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ld-mut);
  font-variant-numeric: tabular-nums;
}
.ld__meta b { font-weight: 400; color: var(--ld-ink); }
.ld__pct { color: var(--ld-acc); }

/* shared signature parts */
.ld [data-at] { transition: fill 0.35s ease, stroke 0.35s ease, opacity 0.35s ease, transform 0.6s var(--ld-out), color 0.35s ease; }
.ld .ld-draw { fill: none; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--p)); }
.ld .ld-lbl { font: 400 7.5px 'DM Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ld-mut); }
.ld .ld-lbl.is-on { fill: var(--ld-ink); }

/* ═══ THE COUNCIL: a seat lights for every practitioner ═════════════════ */
.ld--council .ld-seat { fill: var(--ld-line); transform-box: fill-box; transform-origin: center; transform: scale(0.75); }
.ld--council .ld-seat.is-on { fill: var(--ld-acc); transform: none; }
.ld--council .ld-seat.is-last.is-on { fill: #0E9F6E; }
.ld--council .ld-table { fill: none; stroke: var(--ld-line); stroke-width: 1; }
.ld--council .ld-crown { fill: var(--ld-ink); font: 400 15px 'Playfair Display SC', 'Playfair Display', Georgia, serif; letter-spacing: 0.02em; }

/* ═══ STARTUP ACCELERATOR: four stages along an evidence curve ═════════ */
.ld--accel .ld-horizon { stroke: var(--ld-line); stroke-width: 1; }
.ld--accel .ld-curve { stroke: var(--ld-acc); stroke-width: 1.5; stroke-linecap: round; }
.ld--accel .ld-gate { fill: var(--ld-bg); stroke: var(--ld-line); stroke-width: 1; }
.ld--accel .ld-gate.is-on { fill: var(--ld-acc); stroke: var(--ld-acc); }
.ld--accel .ld-gate.is-last.is-on { fill: #0E9F6E; stroke: #0E9F6E; }
.ld--accel .ld-rider { fill: var(--ld-ink); }

/* ═══ AGENTIC SOLUTIONS: plan, act, check, then a human decides ════════ */
.ld--agentic .ld-wire { stroke: var(--ld-line); stroke-width: 1; }
.ld--agentic .ld-run { stroke: var(--ld-acc); stroke-width: 1.5; }
.ld--agentic .ld-node rect { fill: #FFFFFF; stroke: var(--ld-line); stroke-width: 1; transition: fill 0.35s ease, stroke 0.35s ease; }
.ld--agentic .ld-node path { fill: none; stroke: #FFFFFF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.3s ease 0.1s; }
.ld--agentic .ld-node.is-on rect { fill: var(--c); stroke: var(--c); }
.ld--agentic .ld-node.is-on path { opacity: 1; }
.ld--agentic .ld-rider { fill: var(--ld-acc); }

/* ═══ CASE STUDIES: eight lines of evidence rise and settle ════════════ */
.ld--cases .ld-base { stroke: var(--ld-line); stroke-width: 1; }
.ld--cases .ld-case { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0.04); }
.ld--cases .ld-case.is-on { transform: none; transition: transform 0.9s var(--ld-out); }
.ld--cases .ld-case line { stroke: rgba(242, 240, 235, 0.32); stroke-width: 1; }
.ld--cases .ld-case rect { fill: var(--c); }
.ld--cases .ld-num { font: 400 7px 'DM Mono', ui-monospace, monospace; letter-spacing: 0.06em; fill: var(--ld-mut); text-anchor: middle; }
.ld--cases .ld-num.is-on { fill: var(--ld-ink); }

/* ═══ SERVICES: one road, five stages, eleven services ═════════════════ */
.ld--services .ld-road { fill: none; stroke: var(--ld-line); stroke-width: 1; }
.ld--services .ld-lit { stroke: var(--ld-ink); stroke-width: 1.5; stroke-linecap: round; }
.ld--services .ld-stop { fill: var(--ld-bg); stroke: var(--ld-line); stroke-width: 1; }
.ld--services .ld-stop.is-on { fill: var(--c); stroke: var(--c); }
.ld--services .ld-rider { fill: var(--ld-ink); }

/* ═══ PODCAST: the levels come up, one channel at a time ════════════════ */
.ld--podcast .ld-base { stroke: var(--ld-line); stroke-width: 1; }
.ld--podcast .ld-lvl { fill: rgba(242, 240, 235, 0.14); transform-box: fill-box; transform-origin: 50% 50%; transform: scaleY(0.12); }
.ld--podcast .ld-lvl.is-on { fill: var(--ld-ink); transform: scaleY(var(--h)); animation: ldLevel 0.9s var(--ld-io) infinite alternate; animation-delay: calc(0.55s + var(--dl)); /* after the rise */ transition: fill 0.35s ease, transform 0.6s var(--ld-out); }
.ld--podcast .ld-lvl.is-hot.is-on { fill: var(--ld-acc); }
.ld--podcast .ld-tally { fill: rgba(242, 240, 235, 0.16); transition: fill 0.25s ease; }
.ld--podcast .ld-tally.is-on { fill: #E5484D; }
@keyframes ldLevel { to { transform: scaleY(calc(var(--h) * 0.45)); } }

/* ═══ EVENTS: the table is set, then every seat is taken ════════════════ */
.ld--events .ld-board { fill: #FFFFFF; stroke: rgba(23, 19, 14, 0.4); stroke-width: 1; }
.ld--events .ld-place { fill: none; stroke: var(--ld-line); stroke-width: 1; }
.ld--events .ld-guest { fill: var(--ld-line); transform-box: fill-box; transform-origin: center; transform: scale(0.6); }
.ld--events .ld-guest.is-on { fill: var(--ld-ink); transform: none; }
.ld--events .ld-guest.is-host.is-on { fill: var(--ld-acc); }
.ld--events .ld-talk { stroke: var(--ld-acc); stroke-width: 1; opacity: 0; }
.ld--events .ld-talk.is-on { opacity: 0.55; }

/* ═══ PARTNERSHIPS: the orbits come into line around one centre ═════════ */
.ld--partners .ld-ring { fill: none; stroke: var(--ld-line); stroke-width: 1; }
.ld--partners .ld-orb { transform-box: view-box; transform-origin: 100px 38px; transform: rotate(calc((1 - var(--p)) * var(--k) * -1turn)); }
.ld--partners .ld-pdot { fill: rgba(242, 240, 235, 0.22); transition: fill 0.35s ease; }
.ld--partners .ld-pdot.is-on { fill: var(--c); }
.ld--partners .ld-core { fill: var(--ld-acc); }

/* ═══ FRACTIONAL: the diary fills, two days a week ══════════════════════ */
.ld--fractional .ld-day { font: 400 6.5px 'DM Mono', ui-monospace, monospace; letter-spacing: 0.08em; fill: var(--ld-mut); text-anchor: middle; }
.ld--fractional .ld-cell { fill: #FFFFFF; stroke: var(--ld-line); stroke-width: 1; }
.ld--fractional .ld-cell.is-frac { fill: #F3EFE6; transition: fill 0.35s ease, stroke 0.35s ease; }
.ld--fractional .ld-cell.is-frac.is-on { fill: var(--ld-acc); stroke: var(--ld-acc); }

/* ═══ ABOUT: four inputs converge on one point, three outcomes leave ═══ */
.ld--about .ld-in { fill: none; stroke: rgba(242, 240, 235, 0.5); stroke-width: 1; stroke-dashoffset: calc(1 - min(1, var(--p) * 1.6667)); }
.ld--about .ld-out { fill: none; stroke: var(--ld-acc); stroke-width: 1.5; stroke-linecap: round; stroke-dashoffset: calc(1 - max(0, (var(--p) - 0.6) * 2.5)); }
.ld--about .ld-src, .ld--about .ld-end, .ld--about .ld-hub { fill: var(--ld-line); }
.ld--about .ld-src.is-on { fill: var(--ld-ink); }
.ld--about .ld-hub.is-on, .ld--about .ld-end.is-on { fill: var(--ld-acc); }

/* ═══ HOME: a noisy signal settles into one clean line, three outcomes on it ═══ */
.ld--home .ld-noise { fill: none; stroke: rgba(23, 19, 14, 0.34); stroke-width: 1; stroke-linejoin: round; opacity: calc(1 - var(--p) * 1.15); }
.ld--home .ld-noise--2 { stroke: rgba(23, 19, 14, 0.18); }
.ld--home .ld-true { fill: none; stroke: var(--ld-acc); stroke-width: 1.5; stroke-linecap: round; stroke-dashoffset: calc(1 - min(1, var(--p) * 1.25)); }
.ld--home .ld-axis { stroke: var(--ld-line); stroke-width: 1; }
.ld--home .ld-mark { fill: var(--ld-bg); stroke: var(--ld-line); stroke-width: 1; transform-box: fill-box; transform-origin: center; transform: rotate(45deg) scale(0.7); }
.ld--home .ld-mark.is-on { fill: var(--ld-acc); stroke: var(--ld-acc); transform: rotate(45deg); }
.ld--home .ld-lbl { text-anchor: middle; }

/* ── themes ──────────────────────────────────────────────────────────── */
.ld--agentic { --ld-bg: #F4F6FA; --ld-ink: #0E1420; --ld-mut: #6B7589; --ld-line: rgba(14, 20, 32, 0.14); --ld-acc: #1E44C8; }
.ld--partners { --ld-bg: #000000; --ld-ink: #F2F0EB; --ld-mut: #86817A; --ld-line: rgba(255, 255, 255, 0.15); --ld-acc: #E2AE36; }
.ld--podcast { --ld-bg: #000000; --ld-ink: #F2F0EB; --ld-mut: #86817A; --ld-line: rgba(255, 255, 255, 0.15); --ld-acc: #E2AE36; }
.ld--home { --ld-bg: #FFFFFF; --ld-ink: #0E1116; --ld-mut: #6B7280; --ld-line: rgba(14, 17, 22, 0.14); --ld-acc: #B8892B; }
.ld--about { --ld-bg: #000000; --ld-ink: #F2F0EB; --ld-mut: #86817A; --ld-line: rgba(255, 255, 255, 0.15); --ld-acc: #E2AE36; }
.ld--cases { --ld-bg: #000000; --ld-ink: #F2F0EB; --ld-mut: #86817A; --ld-line: rgba(255, 255, 255, 0.15); --ld-acc: #E2AE36; }

@media (prefers-reduced-motion: reduce) {
  .ld__in { animation: none; }
  .ld__line span, .ld [data-at] { transition: none; }
  .ld--podcast .ld-lvl.is-on { animation: none; }
}