/* Billy Bubs CSS 3D die: 6 flat faces, real cube, lit by a fixed light.
   The settled result is the TOP face (normal mostly up, tipped toward the camera).
   Opposite faces sum to 7. Layout at identity: front=1, back=6, right=4, left=3, top=2, bottom=5.
   Western right-hand: with 1 on top and 2 in front, 3 is on the right. */
.cube3d{width:var(--s);height:var(--s);perspective:calc(var(--s)*9);filter:drop-shadow(0 calc(var(--s)*.16) calc(var(--s)*.12) rgba(0,0,0,.45))}
.cube3d .cube{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 420ms cubic-bezier(.2,1.4,.4,1)}
.cube3d .f{position:absolute;inset:0;border-radius:16%;background-size:cover;backface-visibility:hidden;box-shadow:inset 0 0 calc(var(--s)*.08) rgba(0,0,0,.18)}
.cube3d .f::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--shade,transparent)}
.cube3d .f1{background-image:url(../assets/dice/faces/face-1.svg);transform:translateZ(calc(var(--s)/2))}
.cube3d .f6{background-image:url(../assets/dice/faces/face-6.svg);transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.cube3d .f3{background-image:url(../assets/dice/faces/face-3.svg);transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.cube3d .f4{background-image:url(../assets/dice/faces/face-4.svg);transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.cube3d .f2{background-image:url(../assets/dice/faces/face-2.svg);transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
.cube3d .f5{background-image:url(../assets/dice/faces/face-5.svg);transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
/* shading follows the pose, not the face: every face is shaded except the one facing the viewer */
.cube3d .f{--shade:rgba(0,0,0,.22)}
.cube3d .cube[data-face="1"] .f1{--shade:transparent}
.cube3d .cube[data-face="2"] .f2{--shade:transparent}
.cube3d .cube[data-face="3"] .f3{--shade:transparent}
.cube3d .cube[data-face="4"] .f4{--shade:transparent}
.cube3d .cube[data-face="5"] .f5{--shade:transparent}
.cube3d .cube[data-face="6"] .f6{--shade:transparent}
.cube3d .cube.tumbling .f{--shade:rgba(0,0,0,.12)}
/* Rest pose: a true rotation (det +1), not a mirror. That face is on top, tipped ~50deg toward the camera, pips upright. */
.cube3d .cube[data-face="1"]{--rest:matrix3d(0.9613,0,-0.2757,0,0.1772,0.7661,0.6179,0,0.2112,-0.6428,0.7364,0,0,0,0,1);transform:var(--rest)}
.cube3d .cube[data-face="2"]{--rest:matrix3d(0.9613,0,-0.2757,0,-0.2112,0.6428,-0.7364,0,0.1772,0.7661,0.6179,0,0,0,0,1);transform:var(--rest)}
.cube3d .cube[data-face="3"]{--rest:matrix3d(-0.2112,0.6428,-0.7364,0,0.1772,0.7661,0.6179,0,0.9613,0,-0.2757,0,0,0,0,1);transform:var(--rest)}
.cube3d .cube[data-face="4"]{--rest:matrix3d(0.2112,-0.6428,0.7364,0,0.1772,0.7661,0.6179,0,-0.9613,0,0.2757,0,0,0,0,1);transform:var(--rest)}
.cube3d .cube[data-face="5"]{--rest:matrix3d(0.9613,0,-0.2757,0,0.2112,-0.6428,0.7364,0,-0.1772,-0.7661,-0.6179,0,0,0,0,1);transform:var(--rest)}
.cube3d .cube[data-face="6"]{--rest:matrix3d(-0.9613,0,0.2757,0,0.1772,0.7661,0.6179,0,-0.2112,0.6428,-0.7364,0,0,0,0,1);transform:var(--rest)}
/* tumble eases INTO the rest pose. JS sets data-face first, then .tumbling. 100% is the rest pose. */
@keyframes bb-tumble{
  0%{transform:translateY(calc(var(--s)*-1.2)) rotateX(40deg) rotateY(20deg) rotateZ(8deg)}
  32%{transform:translateY(calc(var(--s)*-.9)) rotateX(260deg) rotateY(150deg) rotateZ(36deg)}
  54%{transform:translateY(0) rotateX(480deg) rotateY(250deg) rotateZ(-16deg)}
  72%{transform:translateY(calc(var(--s)*-.28)) rotateX(640deg) rotateY(330deg) rotateZ(12deg)}
  86%{transform:translateY(0) rotateX(760deg) rotateY(390deg) rotateZ(-6deg)}
  100%{transform:translateY(0) var(--rest)}}
@keyframes bb-tumble-b{
  0%{transform:translateY(calc(var(--s)*-1.05)) rotateX(-30deg) rotateY(200deg) rotateZ(-20deg)}
  30%{transform:translateY(calc(var(--s)*-.82)) rotateX(220deg) rotateY(40deg) rotateZ(28deg)}
  52%{transform:translateY(0) rotateX(430deg) rotateY(-80deg) rotateZ(-22deg)}
  70%{transform:translateY(calc(var(--s)*-.22)) rotateX(590deg) rotateY(-20deg) rotateZ(10deg)}
  84%{transform:translateY(0) rotateX(700deg) rotateY(30deg) rotateZ(-4deg)}
  100%{transform:translateY(0) var(--rest)}}
.cube3d .cube.tumbling{transition:none;animation:bb-tumble 1100ms cubic-bezier(.22,.72,.28,1) forwards}
.cube3d.b .cube.tumbling{animation-name:bb-tumble-b;animation-duration:1180ms;animation-direction:normal}
@media (prefers-reduced-motion:reduce){.cube3d .cube.tumbling{animation:none}.cube3d .cube{transition:none}}