/* CHIKARA Halo (shell). Mustard and teal ring, obsidian core with the lion emblem. Motion is transform and opacity only. */
.halo, .halo-backdrop, .halo-petals, .halo-echo { --halo-size: 75px; }
.halo { position: absolute; z-index: 60; width: var(--halo-size); height: var(--halo-size); padding: 0; border: 0; border-radius: 50%; background: none; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; overflow: visible; -webkit-tap-highlight-color: transparent; }
.halo[hidden] { display: none; } .halo.dragging { cursor: grabbing; }
.halo:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.halo-ring { position: absolute; inset: -2px; border-radius: 50%; background: conic-gradient(from 0deg, #C9973A, #2A7A6E, #F0CF78, #2A7A6E, #C9973A); animation: halospin 3.4s linear infinite; will-change: transform; }
.halo.open .halo-ring { animation-duration: .7s; }
.halo-core { position: absolute; inset: 3px; border-radius: 50%; overflow: hidden; background: #0E1A14; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.halo-core img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@keyframes halospin { to { transform: rotate(360deg); } }
.halo-ping { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--primary); opacity: 0; pointer-events: none; }
.halo.ping .halo-ping { animation: haloping .8s var(--ease-out) both; } .halo.ping .halo-ping::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--accent); animation: haloping .8s var(--ease-out) .14s both; }
@keyframes haloping { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
.halo-dot { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line-strong); opacity: 0; transform: scale(.5); transition: opacity var(--d3), transform var(--d3) var(--ease-out); pointer-events: none; }
.halo.has-resume .halo-dot { opacity: 1; transform: none; }
.halo.breath { animation: halobreath 4.2s ease-in-out 3; } @keyframes halobreath { 50% { transform: scale(1.06); } }
.halo-backdrop { position: absolute; inset: 0; z-index: 55; background: rgba(10,8,4,.38); opacity: 0; pointer-events: none; transition: opacity var(--d2); }
.halo-backdrop.open { opacity: 1; pointer-events: auto; }
.halo-petals { position: absolute; inset: 0; z-index: 58; pointer-events: none; }
.petal { position: absolute; pointer-events: auto; width: calc(var(--halo-size) * .8); height: calc(var(--halo-size) * .8); border-radius: 50%; display: grid; place-items: center; padding: 0;
  background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line-strong); color: var(--primary-ink); box-shadow: var(--shadow-2);
  opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); transition: transform .32s cubic-bezier(.16,1,.3,1), opacity var(--d2); }
.petal svg { width: 22px; height: 22px; } .petal.show { opacity: 1; transform: none; }
.petal[aria-current="page"] { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary), var(--shadow-2); }
.petal span { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .62rem; font-weight: 700; letter-spacing: .02em; background: var(--ink); color: var(--bg); border-radius: 5px; padding: 1px .4rem; pointer-events: none; }
.petal:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.halo-pdot { position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); border: 2px solid var(--surface); }
.halo-echo { position: absolute; inset: 0; z-index: 58; pointer-events: none; }
.halo-echo .echo-list { position: absolute; display: flex; flex-direction: column-reverse; gap: .4rem; pointer-events: auto; }
.echo-it { display: block; width: 100%; min-height: 48px; padding: .5rem .85rem; text-align: left; border-radius: 14px; background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line-strong); box-shadow: var(--shadow-2); color: var(--ink); }
.echo-it b { display: block; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .echo-it small { display: block; font-size: .68rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.echo-it.act { background: color-mix(in srgb, var(--surface) 90%, transparent); border-style: dashed; } .echo-it.act b { color: var(--primary-ink); font-weight: 650; }
.echo-it:hover { border-color: var(--primary); } .echo-it:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.echo-empty { order: 99; margin: 0 .3rem; font-size: .76rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.echo-it.rise { animation: rise var(--d4) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
html[data-gfx="lite"] .halo-ring { animation: none; } html[data-gfx="lite"] .halo.breath { animation: none; } html[data-gfx="lite"] .petal { transition: none; }
@media (prefers-reduced-motion: reduce) { .halo-ring, .halo.breath, .halo.ping .halo-ping, .halo.ping .halo-ping::after, .echo-it.rise { animation: none !important; } .petal { transition: none; } }
/* Keep the Halo out of the way of the page's own bottom controls on small screens: it can be dragged, and it can be turned off in Display. */