/* QVINTO · The Rarest Stones · light table
   Stones rest in near-darkness; a soft beam follows the pointer (or sweeps on its own)
   and lights one stone at a time, casting that stone's colour into the room. */
@property --lt-glow{syntax:'<color>';inherits:true;initial-value:rgba(15,107,82,0)}
.q-rarest{--lt-glow:rgba(15,107,82,0);transition:--lt-glow 1.1s cubic-bezier(.22,.61,.36,1)}
.q-rarest .q-beam{position:absolute;left:0;top:0;width:min(1100px,90vw);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(closest-side,var(--lt-glow),transparent 72%);opacity:.5;filter:blur(30px);transform:translate3d(var(--bx,50vw),var(--by,60%),0) translate(-50%,-50%);transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.q-rarest .q-spill{position:absolute;inset:auto 0 0 0;height:60%;pointer-events:none;z-index:0;background:radial-gradient(60% 80% at 50% 100%,var(--lt-glow),transparent 70%);opacity:.22}
.q-stone{--c:#ffffff;transition:opacity 1s cubic-bezier(.22,.61,.36,1)}
.q-stone[data-screen-label="Diamond"]{--c:#eef2f7}
.q-stone[data-screen-label="Sapphire"]{--c:#1d3fb8}
.q-stone[data-screen-label="Euclase"]{--c:#2c9be6}
.q-stone[data-screen-label="Aquamarine"]{--c:#a9d9ef}
.q-stone[data-screen-label="Tourmaline"]{--c:#d4567f}
.q-stone[data-screen-label="Tanzanite"]{--c:#6b4fd8}
.q-stone__media{transition:box-shadow 1.1s cubic-bezier(.22,.61,.36,1),border-color 1.1s cubic-bezier(.22,.61,.36,1)}
.q-stone__media::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(70% 55% at 50% 42%,var(--c),transparent 72%);opacity:0;transition:opacity 1.1s cubic-bezier(.22,.61,.36,1)}
.q-stone__name{transition:color 1s,text-shadow 1s}
.q-stone__body{transition:color 1s}
.q-stone>*{transition:opacity 1s cubic-bezier(.22,.61,.36,1)}
.q-stones.is-active .q-stone:not(.is-lit)>*{opacity:.38}
.q-stone.is-lit .q-stone__media{border-color:color-mix(in oklab,var(--c) 55%,transparent);box-shadow:0 0 70px -6px color-mix(in oklab,var(--c) 55%,transparent),0 30px 80px -30px rgba(0,0,0,.8)}
.q-stone.is-lit .q-stone__media::after{opacity:.5}
.q-stone.is-lit .q-stone__name{text-shadow:0 0 24px color-mix(in oklab,var(--c) 60%,transparent)}
.q-stone.is-lit .q-stone__body{color:var(--text)}
@media (prefers-reduced-motion:reduce){.q-stones.is-active .q-stone:not(.is-lit)>*{opacity:1}.q-rarest .q-beam{transition:none}}

.q-rarest{position:relative;overflow:hidden}