/* v29 · Os vórtices girando no eixo certo: cada mundo é um disco inclinado em perspectiva, girando no próprio plano, com sombra por baixo e a borda de perto mais clara, como no quadro dos seis vórtices. Perto de você (em foco) o disco se levanta e fica de frente. */
.vtx{perspective:calc(var(--rr) * 14)}
.vtx .vb3{transform-style:preserve-3d;transform:rotateZ(var(--giro,0deg)) rotateX(var(--inc,52deg));transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.vtx.foco .vb3{transform:rotateZ(var(--giro,0deg)) rotateX(calc(var(--inc,52deg) * .25))}
.vtx.sobre .vb3{transform:rotateZ(var(--giro,0deg)) rotateX(calc(var(--inc,52deg) * .7))}
/* a sombra do disco, por baixo e atrás */
.vtx .vb3::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--rr) * 4.6);height:calc(var(--rr) * 4.6);border-radius:50%;transform:translate(-50%,-50%) translateZ(calc(var(--rr) * -.35));background:radial-gradient(circle,rgba(0,0,0,.55) 0%,rgba(0,0,0,.28) 42%,rgba(0,0,0,0) 70%);pointer-events:none}
/* a borda de perto, mais clara (a luz bate na frente do disco) */
.vtx .vb3::before{box-shadow:0 calc(var(--rr) * .22) calc(var(--rr) * .5) calc(var(--rr) * -.2) rgba(255,246,220,.25),inset 0 calc(var(--rr) * -.3) calc(var(--rr) * .6) rgba(255,246,220,.14)}
/* o rótulo fica embaixo do disco inclinado, não grudado */
.vtx b{top:calc(var(--rr) * 2.4 + 8px)}
@media (prefers-reduced-motion:reduce){.vtx .vb3{transition:none}}