/* Effects library: vanilla ports of signature effects from React Bits, Magic UI, Aceternity, Animate UI and Motion Primitives,
   tuned to the KCH motion system (out .16,1,.3,1 · surface .7,0,.3,1). Wired by fx.js; every effect stands down under reduced motion. */
@property --fxa { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* Border beam (Magic UI) · a light that runs the edge of one element per screen */
.fx-beam { isolation: isolate; }
.fx-beam-ring { position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--fxa), transparent 0deg 250deg, rgba(143,193,255,.0) 260deg, #8fc1ff 300deg, #fff 322deg, #2e6fd8 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fxBeam 5s linear infinite; }
.fx-beam.on-dark .fx-beam-ring { padding: 2px; }
@keyframes fxBeam { to { --fxa: 360deg; } }

/* Hover border gradient (Aceternity) · chips get a turning gradient edge on hover */
.fx-hb { isolation: isolate; }
.fx-hb-ring { position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity 300ms var(--ease-out);
  background: conic-gradient(from var(--fxa), #2e6fd8, #8fc1ff, #fff, #8fc1ff, #2e6fd8);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.fx-hb:hover .fx-hb-ring { opacity: 1; animation: fxBeam 2.4s linear infinite; }
.fx-hb.on .fx-hb-ring, .fx-hb[aria-pressed="true"] .fx-hb-ring { opacity: 0; }

/* Ripple (Animate UI) */
.fx-rip { overflow: hidden; }
.fx-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .18; transform: translate(-50%, -50%) scale(0); }

/* Click spark (React Bits) */
.fx-spark { position: fixed; z-index: 200; width: 0; height: 0; pointer-events: none; }
.fx-spark i { position: absolute; left: -1px; top: 0; width: 2px; height: 10px; border-radius: 2px; background: #8fc1ff; transform-origin: 50% 0; }

/* Cursor label (Motion Primitives · Cursor) */
.fx-cursor { position: fixed; left: 0; top: 0; z-index: 180; pointer-events: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 16px; border-radius: 999px;
  background: var(--navy); color: #fff; font-size: 13.5px; font-weight: 700; white-space: nowrap; box-shadow: 0 12px 30px -10px rgba(7,26,51,.55);
  opacity: 0; transform: translate3d(-100px, -100px, 0) scale(.4); transition: opacity 220ms var(--ease-out); will-change: transform; }
.fx-cursor svg { width: 14px; height: 14px; }
[dir="rtl"] .fx-cursor svg { transform: scaleX(-1); }
.fx-cursor.on { opacity: 1; }

/* Text shimmer (Motion Primitives · TextShimmer / Magic UI · AnimatedShinyText): one pass on arrival, one on hover */
.fx-shim { background: linear-gradient(100deg, var(--fx-c) 0 38%, #8fc1ff 47%, #ffffff 50%, #8fc1ff 53%, var(--fx-c) 62% 100%); background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx-shim.run { animation: fxShim 1500ms cubic-bezier(.65,0,.35,1) both; }
@keyframes fxShim { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Focus cards (Aceternity): hovering one card softens the rest */
@media (hover: hover) and (pointer: fine) {
  .dgrid .doc > *, #grid4 .dcard > *, .dp-row .dp-card > * { transition: filter 420ms var(--ease-out), opacity 420ms var(--ease-out); }
  .dgrid:has(> .doc:hover) > .doc:not(:hover) > *, #grid4:has(.dcard:hover) .dcard:not(:hover) > *, .dp-row:has(.dp-card:hover) .dp-card:not(:hover) > * { filter: blur(2.5px) saturate(.5); opacity: .55; }
}

/* Dock magnification (Magic UI · Dock) on the A–Z bar */
.az.fx-dock button { transition: transform 260ms var(--ease-out), color 250ms; transform-origin: 50% 100%; will-change: transform; }

/* Lens (Magic UI): a loupe over the consultant's portrait */
.fx-lens { position: absolute; z-index: 4; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; pointer-events: none; background: var(--tint);
  box-shadow: 0 0 0 3px #fff, 0 18px 40px -12px rgba(7,26,51,.45); opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity 240ms var(--ease-out), transform 360ms var(--ease-out); }
.fx-lens.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.fx-lens .in { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.fx-lens img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; mix-blend-mode: multiply; display: block; }

/* Spotlight (Aceternity): a beam sweeps in once and settles behind the heading */
.fx-spotlight { position: absolute; z-index: 0; pointer-events: none; width: 1100px; height: 520px; left: -260px; top: -260px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(143,193,255,.55), rgba(143,193,255,.18) 55%, transparent 100%); filter: blur(30px);
  transform: rotate(-28deg) translate(-40%, -30%); opacity: 0; }
.fx-spotlight.go { animation: fxSpot 2400ms cubic-bezier(.16,1,.3,1) 200ms forwards; }
[dir="rtl"] .fx-spotlight { left: auto; right: -260px; transform: rotate(28deg) translate(40%, -30%); }
[dir="rtl"] .fx-spotlight.go { animation-name: fxSpotR; }
@keyframes fxSpot { to { opacity: 1; transform: rotate(-28deg) translate(0, 0); } }
@keyframes fxSpotR { to { opacity: 1; transform: rotate(28deg) translate(0, 0); } }

/* Tracing beam (Aceternity): a line down the profile that fills with the reader */
.fx-trace { position: absolute; z-index: 6; width: 24px; pointer-events: none; }
.fx-trace svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fx-trace .base { fill: none; stroke: rgba(11,36,67,.12); stroke-width: 1.5; }
.fx-trace .fill { fill: none; stroke: url(#fxTraceGrad); stroke-width: 2; stroke-linecap: round; }
.fx-trace .dot { position: absolute; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; border: 2px solid #2e6fd8; box-shadow: 0 0 0 5px rgba(46,111,216,.14), 0 0 18px 4px rgba(143,193,255,.7); }
.fx-trace .knot { position: absolute; left: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--cream, #f5f4f0); border: 1.5px solid rgba(11,36,67,.25); transition: background 400ms, border-color 400ms, transform 500ms var(--ease-out); }
.fx-trace .knot.lit { background: #2e6fd8; border-color: #2e6fd8; transform: scale(1.3); }

/* Meteors (Magic UI) in the dark career scene, only while it is on screen */
.fx-meteors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fx-meteor { position: absolute; top: -10%; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.08); opacity: 0; transform: rotate(215deg); }
.fx-meteor::after { content: ""; position: absolute; top: 50%; left: 0; width: 90px; height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, rgba(143,193,255,.9), transparent); }
.fx-live .fx-meteor { animation: fxMeteor var(--dur, 7s) linear var(--del, 0s) infinite; }
@keyframes fxMeteor { 0% { opacity: 0; transform: rotate(215deg) translateX(0); } 6% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(215deg) translateX(-900px); } }
.dp-journey .dp-pin > .wrap { position: relative; z-index: 1; }

/* Scroll progress (Motion Primitives · ScrollProgress) along the bottom of the profile bar */
.fx-prog { position: absolute; left: 18px; right: 18px; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2e6fd8, #8fc1ff); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
[dir="rtl"] .fx-prog { transform-origin: 100% 50%; }

/* Text scramble (Motion Primitives · TextScramble / React Bits · DecryptedText) keeps the label's width while it decodes */
.fx-scr { display: inline-block; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .fx-beam-ring, .fx-hb-ring, .fx-meteors, .fx-spotlight, .fx-cursor, .fx-lens { display: none !important; }
  .fx-shim { animation: none !important; color: var(--fx-c); background: none; }
}
html.rm .fx-beam-ring, html.rm .fx-hb-ring, html.rm .fx-meteors, html.rm .fx-spotlight, html.rm .fx-cursor, html.rm .fx-lens { display: none !important; }
html.rm .fx-shim { animation: none !important; color: var(--fx-c); background: none; }
html.hc .fx-shim { color: var(--fx-c); background: none; }
@media (max-width: 1240px) { .fx-trace { display: none; } }
.fx-spot-box { position: absolute; inset: 0; overflow: hidden; contain: paint; pointer-events: none; z-index: 0; }
/* the full roster is too many cards to blur on every hover: dim and desaturate only */
@media (hover: hover) and (pointer: fine) {
  .dgrid:has(> .doc:hover) > .doc:not(:hover) > * { filter: saturate(.4); opacity: .55; }
}