/* ═══ HelixKey · live.css · shared living-page effects ═══ */
/* Load once on every page. Components activate via data-live="*". */

/* ---------- Cursor & typewriter ---------- */
.hk-cursor{display:inline-block;width:.55ch;height:1.05em;background:currentColor;vertical-align:text-bottom;margin-left:1px;animation:hk-blink 1.05s steps(2) infinite;opacity:.9;box-shadow:0 0 6px currentColor}
@keyframes hk-blink{50%{opacity:0}}

/* ---------- Pulse dot ---------- */
[data-live="pulse"],.hk-pulse{width:8px;height:8px;border-radius:50%;background:var(--hk-c,#14E5D4);box-shadow:0 0 0 0 var(--hk-c,rgba(20,229,212,.7));animation:hk-pulse 1.6s ease-out infinite;display:inline-block;flex-shrink:0}
@keyframes hk-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--hk-c,#14E5D4) 60%,transparent)}70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- Counter tick flash ---------- */
.hk-flash{animation:hk-flash .55s ease-out}
@keyframes hk-flash{0%{color:#fff;text-shadow:0 0 12px #14E5D4}100%{text-shadow:none}}

/* ---------- Marquee ---------- */
[data-live="marquee"]{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
[data-live="marquee"] .hk-track{display:flex;gap:var(--hk-gap,3rem);width:max-content;animation:hk-marquee var(--hk-speed,40s) linear infinite}
[data-live="marquee"]:hover .hk-track{animation-play-state:paused}
@keyframes hk-marquee{to{transform:translateX(-50%)}}

/* ---------- Tilt card ---------- */
[data-live="tilt"]{transform-style:preserve-3d;transition:transform .18s ease-out,box-shadow .3s}
[data-live="tilt"] > *{transform:translateZ(20px)}

/* ---------- Blob background ---------- */
.hk-blob-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hk-blob{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(80px);opacity:.35;animation:hk-blob-drift 22s ease-in-out infinite alternate}
.hk-blob.b1{background:radial-gradient(circle,#0080b8 0%,transparent 70%);top:-10%;left:-10%}
.hk-blob.b2{background:radial-gradient(circle,#7c3aed 0%,transparent 70%);bottom:-15%;right:-10%;animation-delay:-8s}
.hk-blob.b3{background:radial-gradient(circle,#14E5D4 0%,transparent 70%);top:40%;right:30%;animation-delay:-15s;width:340px;height:340px;opacity:.22}
@keyframes hk-blob-drift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(60px,-40px) scale(1.1)}
  100%{transform:translate(-40px,50px) scale(.9)}
}

/* ---------- Orbit ---------- */
.hk-orbit{position:relative;width:var(--hk-size,320px);height:var(--hk-size,320px);margin:0 auto}
.hk-orbit-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono,monospace);font-size:.78rem;text-align:center;color:var(--text,#fff);z-index:2}
.hk-ring{position:absolute;inset:0;border:1px dashed color-mix(in srgb,var(--accent,#0080b8) 40%,transparent);border-radius:50%;animation:hk-spin var(--hk-dur,24s) linear infinite}
.hk-ring.r2{inset:14%;animation-duration:32s;animation-direction:reverse;border-color:color-mix(in srgb,#7c3aed 40%,transparent)}
.hk-ring.r3{inset:28%;animation-duration:18s;border-color:color-mix(in srgb,#14E5D4 40%,transparent)}
@keyframes hk-spin{to{transform:rotate(360deg)}}
.hk-orbit-dot{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;background:var(--bg-elev,#0f1b2e);border:1px solid var(--accent,#3AB0F0);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-family:var(--font-mono,monospace);color:var(--text,#fff);transform-origin:center;box-shadow:0 0 12px rgba(58,176,240,.35)}

/* ---------- Sparkline ---------- */
.hk-sparkline{display:block;width:100%;height:40px}
.hk-sparkline path.fill{fill:url(#hk-sl-grad);opacity:.5}
.hk-sparkline path.line{fill:none;stroke:var(--accent,#3AB0F0);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600;animation:hk-draw 2.2s ease-out forwards}
@keyframes hk-draw{to{stroke-dashoffset:0}}
.hk-sparkline .dot{fill:var(--accent,#3AB0F0);animation:hk-pulse 1.6s ease-out infinite}

/* ---------- Progress bar ---------- */
.hk-progress{position:relative;height:10px;background:color-mix(in srgb,var(--line-str,#333) 70%,transparent);border-radius:100px;overflow:hidden}
.hk-progress-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#0080b8,#7c3aed);border-radius:100px;width:0;transition:width 1.8s cubic-bezier(.2,.7,.3,1);box-shadow:0 0 12px rgba(0,128,184,.5)}
.hk-progress-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);animation:hk-shimmer 2.4s linear infinite;background-size:200% 100%}
@keyframes hk-shimmer{to{background-position:-200% 0}}

/* ---------- Flow arrows ---------- */
.hk-flow{position:relative;height:2px;background:linear-gradient(90deg,transparent,var(--accent,#3AB0F0) 20%,var(--accent,#3AB0F0) 80%,transparent);border-radius:2px;overflow:visible}
.hk-flow::after{content:'';position:absolute;top:-3px;left:0;width:60px;height:8px;background:linear-gradient(90deg,transparent,#14E5D4);border-radius:8px;animation:hk-flow 2.4s ease-in-out infinite;box-shadow:0 0 10px #14E5D4}
@keyframes hk-flow{0%{left:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:100%;opacity:0}}

/* ---------- Matrix rain ---------- */
.hk-matrix{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.28;z-index:0}
.hk-matrix.masked{-webkit-mask-image:radial-gradient(ellipse 55% 70% at 82% 42%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 55% 70% at 82% 42%,#000 15%,transparent 72%)}
.hk-matrix .col{position:absolute;top:-140%;font-family:var(--font-mono,monospace);font-size:.75rem;line-height:1.15;color:var(--accent,#3AB0F0);white-space:pre;text-shadow:0 0 6px rgba(58,176,240,.4);animation:hk-rain linear infinite}
.hk-matrix .col span{display:block;opacity:.55}
.hk-matrix .col span.head{color:#14E5D4;opacity:1;text-shadow:0 0 10px #14E5D4}
@keyframes hk-rain{from{transform:translateY(0)}to{transform:translateY(240%)}}

/* ---------- Live feed ---------- */
.hk-feed{display:flex;flex-direction:column;gap:.5rem;max-height:280px;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);mask-image:linear-gradient(to bottom,#000 60%,transparent)}
.hk-feed-item{display:flex;align-items:center;gap:.7rem;padding:.65rem .9rem;background:color-mix(in srgb,var(--bg-elev,#0f1b2e) 60%,transparent);border:1px solid color-mix(in srgb,var(--accent,#3AB0F0) 20%,transparent);border-radius:8px;font-family:var(--font-mono,monospace);font-size:.78rem;animation:hk-feed-in .5s cubic-bezier(.2,.7,.3,1) both}
.hk-feed-item .amt{color:#14E5D4;font-weight:700;margin-left:auto}
.hk-feed-item .addr{color:var(--text-mute,#a4b0c8);opacity:.8}
.hk-feed-item .tag{padding:.15rem .5rem;background:color-mix(in srgb,var(--accent,#3AB0F0) 15%,transparent);border-radius:100px;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent,#3AB0F0)}
@keyframes hk-feed-in{from{opacity:0;transform:translateY(-8px);max-height:0}to{opacity:1;transform:none;max-height:80px}}

/* ---------- Sheen ---------- */
.hk-sheen{position:relative;overflow:hidden}
.hk-sheen::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);background-size:200% 100%;background-position:100% 0;animation:hk-sheen 5s linear infinite;pointer-events:none}
@keyframes hk-sheen{to{background-position:-100% 0}}

/* ---------- Donut chart ---------- */
.hk-donut{width:100%;max-width:280px;height:auto;display:block;margin:0 auto}
.hk-donut circle.slice{fill:none;stroke-width:20;transform-origin:center;stroke-dasharray:0 999;transition:stroke-dasharray 1.6s cubic-bezier(.2,.7,.3,1)}
.hk-donut text.total{font-family:var(--font-mono,monospace);font-size:20px;fill:var(--text,#fff);font-weight:700}

/* ---------- Glow on hover ---------- */
[data-live="glow"]{transition:box-shadow .3s,transform .3s;position:relative}
[data-live="glow"]:hover{box-shadow:0 20px 60px -20px rgba(0,128,184,.5),0 0 0 1px var(--accent,#3AB0F0);transform:translateY(-3px)}

/* ---------- Reveal on scroll (autoload) ---------- */
[data-live="reveal"]{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
[data-live="reveal"].in{opacity:1;transform:none}

/* ---------- Ticker (marquee for text) ---------- */
.hk-ticker{overflow:hidden;position:relative;background:color-mix(in srgb,var(--accent,#3AB0F0) 8%,transparent);border-top:1px solid color-mix(in srgb,var(--accent,#3AB0F0) 20%,transparent);border-bottom:1px solid color-mix(in srgb,var(--accent,#3AB0F0) 20%,transparent);padding:.6rem 0;font-family:var(--font-mono,monospace);font-size:.78rem}
.hk-ticker .track{display:inline-flex;gap:3rem;animation:hk-marquee 45s linear infinite;white-space:nowrap;padding-left:100%}
.hk-ticker .up{color:#14E5D4}
.hk-ticker .down{color:#f7788a}

/* ---------- Scroll progress bar (top of viewport) ---------- */
.hk-scroll-bar{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#0080b8,#7c3aed,#14E5D4);z-index:101;width:0;transition:width .1s linear;box-shadow:0 0 8px rgba(0,128,184,.6)}

/* ═══ Serious SVG icons for card boxes ═══ */
.role-icon svg,.sol-icon svg,.tk-icon svg,.mech-icon svg,.feat-icon svg,.pn-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;display:block}
.role-icon,.sol-icon,.tk-icon,.mech-icon,.feat-icon{transition:transform .3s,box-shadow .3s}
.role-card:hover .role-icon,.sol-card:hover .sol-icon,.tk-card:hover .tk-icon,.mech-card:hover .mech-icon{transform:translateY(-2px) scale(1.05);box-shadow:0 8px 20px -8px currentColor}


/* ═══ Enhanced orbit ═══ */
.hk-orbit .hk-orbit-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}
.hk-orbit-c-inner{padding:1.1rem 1.3rem;background:color-mix(in srgb,var(--bg-elev,#0f1b2e) 92%,transparent);backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,#14E5D4 40%,transparent);border-radius:14px;text-align:center;box-shadow:0 12px 40px -12px rgba(0,128,184,.55);pointer-events:auto;min-width:150px}
.hk-orbit-c-lbl{font-family:var(--font-mono,monospace);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim,#78829a);font-weight:700;margin-bottom:.4rem}
.hk-orbit-c-name{font-family:var(--font-body,Inter);font-weight:800;font-size:1.2rem;color:var(--text,#fff);letter-spacing:-.01em;line-height:1}
.hk-orbit-c-pill{display:inline-block;margin-top:.55rem;padding:.25rem .7rem;background:color-mix(in srgb,#14E5D4 15%,transparent);color:#14E5D4;border:1px solid rgba(20,229,212,.4);border-radius:100px;font-family:var(--font-mono,monospace);font-size:.66rem;letter-spacing:.1em;font-weight:800}
.hk-orbit-dot{width:44px;height:44px;margin:-22px 0 0 -22px;background:color-mix(in srgb,var(--bg-elev,#0f1b2e) 85%,transparent);border:1.5px solid var(--dc,#3AB0F0);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-mono,monospace);color:var(--dc,#fff);box-shadow:0 0 14px color-mix(in srgb,var(--dc,#3AB0F0) 40%,transparent);transition:transform .25s,box-shadow .25s;cursor:default}
.hk-orbit-dot:hover{transform:translate(var(--tx,0),var(--ty,0)) scale(1.15);box-shadow:0 0 24px var(--dc,#3AB0F0)}
.hk-orbit-dot .d-sym{font-size:1.1rem;font-weight:700;line-height:1;color:var(--dc)}
.hk-orbit-dot .d-lbl{font-size:.5rem;letter-spacing:.08em;color:var(--dc);margin-top:.15rem;font-weight:700;opacity:.85}

/* ═══ Partner tiles (replaces favicon chaos) ═══ */
.pt-tile{display:inline-flex;align-items:center;gap:.55rem;padding:.7rem 1.2rem;background:var(--bg-elev);border:1px solid var(--line);border-radius:10px;color:var(--text);text-decoration:none;font-family:var(--font-mono,monospace);font-size:.82rem;font-weight:700;letter-spacing:.02em;transition:all .25s;white-space:nowrap;min-height:44px;line-height:1}
.pt-tile:hover{border-color:var(--pt-c,var(--accent));color:var(--pt-c,var(--accent));transform:translateY(-2px);box-shadow:0 10px 24px -12px color-mix(in srgb,var(--pt-c,var(--accent)) 40%,transparent)}
.pt-tile .pt-dot{width:8px;height:8px;background:var(--pt-c,var(--accent));border-radius:50%;box-shadow:0 0 6px var(--pt-c,var(--accent));flex-shrink:0}
.pt-tile .pt-name{font-weight:700}
.pt-tile .pt-tag{margin-left:.4rem;padding:.15rem .45rem;background:color-mix(in srgb,var(--pt-c,var(--accent)) 12%,transparent);color:var(--pt-c,var(--accent));border-radius:4px;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800}