/* ring-embed.css — everything a page needs to carry the live piece (hero-ring.js + loadbar.js) without site.css.
   The box: <div class="hero3d"><div class="ring" …><i class="gem-glow"></i><div class="ring-stage"></div><img class="ring-poster"><p class="ring-status"></p><div class="spots" hidden></div></div><div class="ring-ui"></div></div>
   Colours a page may set on .ring or an ancestor: --ring-ink (the loading mark), --ring-ink3 (its words). */
.hero3d { position: relative; --ring-ease: cubic-bezier(.2, .7, .2, 1); }
.hero3d .ring { position: relative; aspect-ratio: 1 / 1; width: 100%; background: transparent; }
.hero3d .ring-stage { position: absolute; inset: 0; touch-action: none; overflow: visible; opacity: 0; transition: opacity .6s var(--ring-ease); z-index: 1; }
.hero3d .ring-stage > * { pointer-events: auto; }
.hero3d .ring--live .ring-stage { opacity: 1; }
.hero3d .ring-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; background: transparent; transition: opacity .8s var(--ring-ease); pointer-events: none; }
.hero3d .ring--live .ring-poster { opacity: 0; }
.hero3d .ring-status { display: none; }
.hero3d .spots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero3d .spots[hidden] { display: none; }
.hero3d .ring-ui { display: none; }
/* the glow behind the piece, in the colour of its stone (--gem: "r, g, b", set by hero-ring.js) */
.hero3d .ring .gem-glow { position: absolute; inset: -6%; z-index: 0; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(closest-side, rgba(var(--gem, 150, 170, 195), .42) 0, rgba(var(--gem, 150, 170, 195), .14) 45%, rgba(var(--gem, 150, 170, 195), 0) 72%); transition: opacity 1.4s var(--ring-ease), background 1.6s var(--ring-ease); }
.hero3d .ring.ring--live .gem-glow { opacity: 1; }
/* the loading mark: a brilliant that fills from grey to ink as the piece loads, the words under it (loadbar.js) */
.hero3d .ldb { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 14px; opacity: 0; transition: opacity .45s var(--ring-ease); pointer-events: none; }
.hero3d .ldb.is-on { opacity: 1; }
.hero3d .ldb-track { display: none; }
.hero3d .ldb-gem { width: 120px; height: 120px; display: block; margin: -18px 0 -16px; }
.hero3d .ldb-gem svg { width: 100%; height: 100%; display: block; }
.hero3d .ldb-gem path { fill: none; stroke-width: .5; stroke-linejoin: bevel; stroke-miterlimit: 10; }
.hero3d .ldb-gem-lines path { stroke: var(--ring-ink3, rgba(0, 0, 0, .18)); opacity: .5; }
.hero3d .ldb-gem-ink path { stroke: var(--ring-ink, #111); }
.hero3d .ldb-gem-fill { transform-box: view-box; transform-origin: 50% 100%; transform: scaleY(var(--lp, 0)); transition: transform .35s linear; }
.hero3d .ldb-t { font: 500 .75rem/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ring-ink3, #777); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .hero3d .ring-stage, .hero3d .ring-poster, .hero3d .ring .gem-glow, .hero3d .ldb { transition: none; } }