/* Moon overlays from eclipse-hud.js: shadow-area details and an orbiting monolith. */

/* Asset accents: BTC orange, ORDI neutral gray, DOG brown-orange. Keep text grayscale and use accents
   only for swatches/lines/ticks. Color checks on #141414 gave pairwise ΔE >=15 normally, >=13 for
   color-vision deficiency, and >=3:1 background contrast; names/order also distinguish ORDI. */
:root{--a-btc:#D9791A;--a-ordi:#9A9A9A;--a-dog:#A0522D}

/* Shadow readouts emerge along the outside of the moon's tick ring. */
.eh{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:6}
.eh[hidden]{display:none!important}   /* Override the below-layout grid display so hidden details occupy no space. */
.eh-row{
  position:absolute;white-space:nowrap;
  opacity:0;filter:blur(3px);
  transform:translate(var(--dx,-14px), calc(-50% + var(--dy,0px)));
  /* Collapse the rows together toward the tick ring. */
  transition:opacity .18s ease calc((6 - var(--i)) * 22ms),
             transform .22s ease-in calc((6 - var(--i)) * 22ms),
             filter .18s calc((6 - var(--i)) * 22ms);
}
/* Reveal successive rows with a small overshoot. */
.eh.on .eh-row{
  opacity:1;filter:none;transform:translate(0,-50%);
  transition:opacity .3s ease calc(var(--i) * 75ms + 60ms),
             transform .55s cubic-bezier(.18,1.45,.4,1) calc(var(--i) * 75ms + 60ms),
             filter .35s ease calc(var(--i) * 75ms + 60ms);
}
.eh-k{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--ink-3);line-height:1.2;direction:ltr}
/* Align row edges to the arc even in RTL layouts; labels retain their own text direction. */
.eh-kt{unicode-bidi:plaintext}
.eh-row{text-align:left}
.eh-sw{display:block;width:7px;height:7px;flex:none}
.eh-sw.a-btc{background:var(--a-btc)}
.eh-sw.a-ordi{background:var(--a-ordi)}
.eh-sw.a-dog{background:var(--a-dog)}
.eh-v{display:flex;align-items:baseline;gap:5px;margin-top:3px;line-height:1;direction:ltr;font-variant-numeric:tabular-nums}
.eh-v b{font-weight:400;font-size:16px;color:var(--ink);letter-spacing:.01em}
.eh-v small{font-size:13px;color:var(--ink-3)}
.eh-v em{font-style:normal;font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
.eh-now .eh-v b{font-size:30px;font-weight:300;color:var(--ink-display);letter-spacing:-.01em}
.eh-now .eh-v{margin-top:4px}
.eh-row.is-zero .eh-v b{color:var(--ink-3)}
/* Compact type for limited space beside the moon on narrow desktops. */
.eh.is-compact .eh-k{font-size:9px;letter-spacing:.12em;gap:5px}
.eh.is-compact .eh-v{margin-top:2px}
.eh.is-compact .eh-v b{font-size:14px}
.eh.is-compact .eh-v em{font-size:10px;letter-spacing:.03em}
.eh.is-compact .eh-now .eh-v b{font-size:24px}
.eh.is-compact .eh-sw,.eh.is-compact .eh-live{width:6px;height:6px}
/* A slowly pulsing dot indicates pending confirmations. */
.eh-live{display:none;width:7px;height:7px;border-radius:50%;background:var(--ink);flex:none}
.eh-pend.is-live .eh-live{display:block;animation:ehlive 1.6s ease-in-out infinite}
@keyframes ehlive{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* Connect each row to the tick ring; asset rows use their accent color. */
.eh-links{pointer-events:none}
.eh-link{stroke:var(--ink-3);stroke-width:.9;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0;
  transition:stroke-dashoffset .16s ease-in, opacity .16s}
.orb.eh-on.eh-right .eh-link{stroke-dashoffset:0;opacity:1;
  transition:stroke-dashoffset .3s ease-out calc(var(--i) * 75ms), opacity .1s calc(var(--i) * 75ms)}
.eh-link.a-btc{stroke:var(--a-btc)}
.eh-link.a-ordi{stroke:var(--a-ordi)}
.eh-link.a-dog{stroke:var(--a-dog)}

/* Fade the right label and orbit while details are visible to avoid visual overlap. */
.orb-end-r,.orb-path{transition:opacity .3s}
.orb.eh-on.eh-right .orb-end-r{opacity:0}
.orb.eh-on.eh-right .orb-path{opacity:.35}

/* When side space is insufficient, replace the lower percentage/bar with compact rows of progress,
   mint count, pending state and asset totals. */
.eh.is-below{height:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 16px;padding:4px 0 0}
.eh.is-below .eh-row{position:static;transform:translateY(var(--dy,-10px))}
.eh.is-below.on .eh-row{transform:none}
.eh.is-below .eh-now,.eh.is-below .eh-sold{grid-column:span 3;align-self:end}
/* Allow labels and values to wrap within narrow cells without widening the page. */
.eh.is-below .eh-row{white-space:normal;min-width:0}
.eh.is-below .eh-k{min-width:0;align-items:flex-start}
.eh.is-below .eh-sw,.eh.is-below .eh-live{margin-top:2px}
.eh.is-below .eh-kt{min-width:0;overflow-wrap:anywhere}
.eh.is-below .eh-v{flex-wrap:wrap;row-gap:3px}
.eh.is-below .eh-mints,.eh.is-below .eh-pend{grid-column:span 3}
.eh.is-below .eh-btc,.eh.is-below .eh-ordi,.eh.is-below .eh-dog{grid-column:span 2}
.orb ~ .orb-read,.orb ~ .bar{transition:opacity .25s}
.orb.eh-on.eh-below ~ .orb-read,.orb.eh-on.eh-below ~ .bar{opacity:0}

/* Keyboard focus opens the moon details and draws a thin focus outline. */
.orb-moon:focus{outline:none}
.orb-moon:focus-visible{outline:1px solid var(--line);outline-offset:6px}


/* Orbit and monolith. */
.has-mono #orbit-dot{visibility:hidden}
.orb-path path{fill:none;stroke:var(--ink);vector-effect:non-scaling-stroke;transition:stroke-opacity .35s}
.orb-front{stroke-width:1;stroke-opacity:.2}
.orb-back{stroke-width:1;stroke-opacity:.13;stroke-dasharray:1 4}
.orb-trail path{stroke-width:1.4;stroke-linecap:round;stroke-opacity:1}
.orb-ring.is-hot .orb-front{stroke-opacity:.38}
.orb-ring.is-hot .orb-back{stroke-opacity:.26}

#mono{transition:opacity .4s}
.mono-face{stroke:none}
.mono-edge{fill:none;stroke:#fff;stroke-opacity:.2;stroke-width:.4;stroke-linejoin:miter}
.mono-glint{stroke:#fff;stroke-width:.6}
.mono-cap{stroke:#fff;stroke-width:.45}
.mono-halo{transition:opacity .35s;opacity:.6}
#orbit:hover .mono-edge,#orbit:focus-visible .mono-edge{stroke-opacity:.6}
#orbit:hover .mono-halo,#orbit:focus-visible .mono-halo{opacity:1}
#orbit:hover #mono,#orbit:focus-visible #mono{filter:drop-shadow(0 0 2px rgba(255,255,255,.45))}
#orbit:focus{outline:none}
#orbit.is-occ{pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .eh-row,.eh.on .eh-row,.eh-link,.orb.eh-on.eh-right .eh-link{transition:none}
  .eh-pend.is-live .eh-live{animation:none;opacity:1}
}