/* VALENS — stage ring of release covers (js/ring.js sets --s, --cy, perspective and each card's transform) */
.stage-ring{position:absolute;inset:0;z-index:1;transform-style:preserve-3d;pointer-events:none;opacity:0;transition:opacity 1.4s cubic-bezier(.16,1,.3,1)}
.stage-ring.is-in{opacity:1}
.hr-card{position:absolute;left:50%;top:var(--cy);width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);padding:0;border:0;background:none;color:#fff;cursor:pointer;pointer-events:auto;backface-visibility:hidden;will-change:transform}
.hr-card[hidden]{display:none}
.hr-face{position:absolute;inset:0;display:block;border-radius:12px;overflow:hidden;background:#140c08;box-shadow:0 22px 44px #00000066,0 3px 8px #0000004d;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s}
.hr-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.hr-face::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff26,inset 0 16px 30px #ffffff0d;pointer-events:none}
.hr-state{position:absolute;left:50%;top:50%;width:2.6rem;height:2.6rem;margin:-1.3rem 0 0 -1.3rem;display:grid;place-items:center;border-radius:50%;background:var(--fire,#ff5a1f);color:#0a0a09;font-size:1rem;opacity:0;transform:scale(.6);transition:opacity .3s,transform .45s cubic-bezier(.16,1,.3,1);box-shadow:0 0 24px #ff5a1f99}
.hr-title{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .6rem .5rem;font-size:.66rem;font-weight:700;letter-spacing:.02em;line-height:1.2;text-align:left;background:linear-gradient(transparent,#000000c7);opacity:0;transition:opacity .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr-card:hover .hr-face,.hr-card:focus-visible .hr-face{transform:translateY(-6%) scale(1.06);box-shadow:0 30px 60px #00000080,0 0 0 2px var(--fire,#ff5a1f),0 0 34px #ff5a1f66}
.hr-card:hover .hr-state,.hr-card:hover .hr-title,.hr-card.is-playing .hr-state{opacity:1;transform:none}
.hr-card.is-current .hr-face{box-shadow:0 22px 44px #00000066,0 0 0 2px var(--fire,#ff5a1f),0 0 30px #ff5a1f59}
.hr-card.is-playing .hr-face{animation:hrbeat .49s ease-in-out infinite alternate}
@keyframes hrbeat{to{box-shadow:0 22px 44px #00000066,0 0 0 2px #ffb347,0 0 46px #ff5a1f99}}
@media (hover:none){.hr-title{display:none}.hr-face{border-radius:9px}.hr-state{width:2rem;height:2rem;margin:-1rem 0 0 -1rem;font-size:.8rem}}
@media (prefers-reduced-motion:reduce){.stage-ring{transition:none}.hr-card.is-playing .hr-face{animation:none}}