.orb-stage{position:relative;width:100%;height:min(130vmin,880px);display:grid;place-items:center;padding:14px 0 48px;overflow:visible}.orb-square{position:relative;width:min(110vmin,820px);height:min(110vmin,820px);overflow:visible}.orb-parallax{position:relative;height:100%;width:100%;transform:rotateX(calc((var(--orb-rx, 0) * calc(var(--orb-range-y, 0) + var(--orb-drift-y, 0))) * 1deg)) rotateY(calc((var(--orb-ry, 0) * calc(var(--orb-range-x, 0) + var(--orb-drift-x, 0))) * 1deg)) rotate(calc((var(--orb-r, 0) * calc(var(--orb-range-x, 0) + var(--orb-drift-x, 0))) * 1deg));transition:transform .12s ease-out;will-change:transform}.orb-item{position:absolute;left:calc(var(--orb-x, 50) * 1%);top:calc(var(--orb-y, 50) * 1%);height:calc(var(--orb-h, 30) * 1%);width:calc(var(--orb-w, 30) * 1%);transform:translate(-50%,-50%) translate3d(calc((var(--orb-mx, 0) * calc(var(--orb-range-x, 0) + var(--orb-drift-x, 0))) * 1%),calc((var(--orb-my, 0) * calc(var(--orb-range-y, 0) + var(--orb-drift-y, 0))) * 1%),calc(var(--orb-z, 0) * 1vmin)) rotateX(calc((var(--orb-rx, 0) * calc(var(--orb-range-y, 0) + var(--orb-drift-y, 0))) * 1deg)) rotateY(calc((var(--orb-ry, 0) * calc(var(--orb-range-x, 0) + var(--orb-drift-x, 0))) * 1deg)) rotate(calc((var(--orb-r, 0) * calc(var(--orb-range-x, 0) + var(--orb-drift-x, 0))) * 1deg));will-change:transform;pointer-events:none}.orb-img{display:block;width:100%;height:100%;-o-object-fit:contain;object-fit:contain}.orb-item.is-frame{padding:2.2%;box-sizing:border-box}.orb-item.is-frame:before{content:"";position:absolute;inset:0;border-radius:10px;background:linear-gradient(135deg,rgba(72,48,28,.9),rgba(134,96,54,.85)),repeating-linear-gradient(90deg,hsla(0,0%,100%,.06),hsla(0,0%,100%,.06) 1px,transparent 0,transparent 6px),radial-gradient(120% 120% at 10% 10%,hsla(0,0%,100%,.1),transparent 50%),radial-gradient(120% 120% at 90% 90%,rgba(0,0,0,.35),transparent 50%);border:1px solid rgba(0,0,0,.35);box-shadow:0 6px 22px rgba(0,0,0,.4),inset 0 0 0 1px hsla(0,0%,100%,.05);z-index:-2}.orb-item.is-frame:after{content:"";position:absolute;inset:3.5%;border-radius:8px;background:linear-gradient(180deg,hsla(0,0%,100%,.05),rgba(0,0,0,.18));box-shadow:inset 0 1px 0 hsla(0,0%,100%,.08),inset 0 -1px 0 rgba(0,0,0,.28);z-index:-1}.orb-item.is-frame .orb-img{border-radius:6px;box-shadow:0 3px 14px rgba(0,0,0,.28)}@media (max-width:1200px){.orb-stage{height:min(140vmin,820px)}.orb-square{width:min(108vmin,760px);height:min(108vmin,760px)}}@media (max-width:768px){.orb-stage{height:min(150vmin,720px);padding-bottom:56px}.orb-square{width:min(100vmin,600px);height:min(100vmin,600px)}}@media (max-width:640px){.orb-stage{height:min(165vmin,640px)}.orb-square{width:min(98vmin,520px);height:min(98vmin,520px)}.orb-parallax{transform:rotateX(0) rotateY(0) rotate(0)}.orb-item{transform:translate(-50%,-50%) translateZ(calc(var(--orb-z, 0) * 1vmin))}.orb-item.is-frame{padding:2%}}