/* Each tile displays its own 180 x 200 region from the supplied 1600 x 720
   reference. The original icons and labels stay intact; no settings crop. */
.site .tools-honeycomb{height:auto;aspect-ratio:auto;gap:4px}
.site .hex-row{margin-top:0;flex-shrink:0}
.site .hex-row .tool-tile{
  position:relative;
  flex-shrink:0;
  background:none;
  -webkit-mask:none;
  mask:none;
  overflow:visible;
  cursor:default;
  outline:none;
  transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  transition:transform .2s ease-out,filter .25s;
}
.site .hex-row .tool-art{
  display:block;
  width:100%;
  height:100%;
  background-image:url('../assets/tools/app-icons.jpg');
  background-repeat:no-repeat;
  background-size:888.888889% 360%;
  background-position:calc(var(--tool-x) / 1420 * 100%) calc(var(--tool-y) / 520 * 100%);
  -webkit-mask:url('../assets/ui/rounded-hexagon.svg') center / 100% 100% no-repeat;
  mask:url('../assets/ui/rounded-hexagon.svg') center / 100% 100% no-repeat;
}
@media(hover:hover) and (pointer:fine){
  .site .hex-row .tool-tile:hover{filter:drop-shadow(0 0 calc(60 * var(--u)) #009ef018)}
}
.site .hex-row .tool-tile:focus{filter:drop-shadow(0 0 calc(60 * var(--u)) #009ef018)}
.site .hex-row .tool-tile:focus-visible{filter:drop-shadow(0 0 1px #f2f2f2) drop-shadow(0 0 calc(60 * var(--u)) #009ef018)}
@media(prefers-reduced-motion:reduce){
  .site .hex-row .tool-tile{transform:none;transition:none}
}