/* hop.css — the hop-in stage (hop.js). Loaded after shop.css. */

/* registered, so a change of bibi flows instead of snapping */
@property --glow { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --amb { syntax: "<color>"; inherits: true; initial-value: #b9a6f7; }
.prod { transition: --glow .9s cubic-bezier(.16,1,.3,1); }
:root { transition: --amb 1.1s cubic-bezier(.16,1,.3,1); }

/* the page wash: a soft field of the bibi's own colour behind the top of the page */
body { background:
  radial-gradient(120% 70% at 30% -10%, color-mix(in srgb, var(--amb) 16%, transparent), transparent 62%) no-repeat,
  var(--bg); }
::selection { background: color-mix(in srgb, var(--amb) 45%, var(--card)); color: var(--ink); }

/* ---- the stage ---------------------------------------------------------------------------------------------- */
.prod .art.stage-art { position: relative; background:
  radial-gradient(circle at 50% 60%, var(--glow) 0 26%, transparent 58%),
  linear-gradient(to bottom, transparent 70%, color-mix(in srgb, var(--glow) 40%, transparent)), var(--card); }
.hop { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.hop-poke, .hop-ghost { position: absolute; inset: 0; display: block; padding: 0; margin: 0; border: 0; background: none;
  cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.hop-ghost { pointer-events: none; z-index: 2; }
.hop-poke:focus-visible { outline: 3px solid var(--focus); outline-offset: -8px; border-radius: 26px; }

/* the figure: the avatar framing (body in the lower half of the frame) lifted and enlarged to centre the bibi */
/* stills are 400² with the feet at 97% of the frame: this puts the feet at 85% of the stage and the body mid-stage */
.hop-body { position: absolute; left: 4%; right: 4%; bottom: 12%; aspect-ratio: 1; transform-origin: 50% 96%;
  will-change: transform; }
.prod .art .hop-body > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.hop-idle, .hop-hype { opacity: 0; }
.hop.live .hop-idle { opacity: 1; }
.hop.live .hop-poke .hop-still { opacity: 0; }
.hop.hyping .hop-hype { opacity: 1; }
.hop.hyping .hop-idle { opacity: 0; }

/* contact shadow under the feet: a soft, offset-free ground blot that the hop squashes and fades */
.hop-shadow { position: absolute; left: 50%; bottom: 12%; width: 52%; height: 6%; margin-left: -26%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(40 20 60 / .22), rgb(40 20 60 / .1) 55%, transparent);
  filter: blur(2px); transform-origin: 50% 50%; }
:root[data-theme="dark"] .hop-shadow { background: radial-gradient(closest-side, rgb(0 0 0 / .55), rgb(0 0 0 / .25) 55%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hop-shadow {
  background: radial-gradient(closest-side, rgb(0 0 0 / .55), rgb(0 0 0 / .25) 55%, transparent); } }

/* ---- Meet all 26 -------------------------------------------------------------------------------------------- */
.hop-parade { position: absolute; z-index: 3; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 7px;
  font: 600 14px/1 var(--font); color: var(--ink); padding: 9px 14px 9px 11px; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--card) 88%, transparent); border: 2px solid var(--line);
  box-shadow: 0 2px 8px rgb(59 42 74 / .08); transition: border-color .2s, background .2s, transform .2s cubic-bezier(.16,1,.3,1); }
.hop-parade:hover { border-color: var(--acc); }
.hop-parade:active { transform: scale(.96); }
.hop-parade:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.prod .art .hop-parade svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.hop-parade .i-stop, .hop-parade[aria-pressed="true"] .i-play { display: none; }
.hop-parade[aria-pressed="true"] .i-stop { display: inline; }
.hop-parade[aria-pressed="true"] { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 18%, var(--card)); }

/* ---- the A–Z marker: one pill that travels to the current letter ------------------------------------------ */
.bar { position: relative; }
.abc a { position: relative; z-index: 1; transition: color .25s, border-color .25s, background-color .25s; }
.abc a:hover { border-color: color-mix(in srgb, var(--amb) 70%, var(--line)); }
.abc a[aria-current="page"] { background: transparent; border-color: transparent; color: var(--bg); }
.abc-mark { position: absolute; z-index: 0; left: 0; top: 0; width: var(--w); height: var(--h); border-radius: 10px;
  background: var(--ink); box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 55%, transparent);
  transform: translate(var(--x), var(--y)); opacity: 0; pointer-events: none;
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s, opacity .2s; }
.abc-mark.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .prod, :root { transition: none; }
  .abc-mark { transition: opacity .2s; }
}