#modelli-su-misura {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: clamp(140px, 24vw, 260px);
  padding: clamp(6px, 1.2vw, 12px) 0 clamp(3px, 0.6vw, 6px);
}

#modelli-su-misura .modelli-grid {
  position: relative;
  width: calc(100% * var(--grid-scale, 1));
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: 100%;
}

#modelli-su-misura .modelli-tiles {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--cols, 9), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows, 6), minmax(0, 1fr));
  gap: clamp(4px, 1vw, 10px);
}

#modelli-su-misura .modelli-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  opacity: 0.12;
  transform: translate(var(--scatter-x, 0px), var(--scatter-y, 0px)) scale(0.9);
  will-change: transform, opacity;
  transition: box-shadow 0.18s ease, background-color 0.18s ease;
  background: rgba(var(--tile-rgb, 140, 230, 255), calc(var(--tile-alpha, 0.72) + var(--halo, 0) * 0.18));
}

#modelli-su-misura .modelli-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: rgba(var(--tile-rgb, 140, 230, 255), calc(var(--halo, 0) * 0.28));
  opacity: var(--halo, 0);
  transition: opacity 0.18s ease;
  pointer-events: none;
}

#modelli-su-misura .modelli-tile.is-azure {
  --tile-rgb: 140, 230, 255;
  --tile-alpha: 0.72;
  box-shadow: 0 0 calc(10px + 18px * var(--halo, 0)) rgba(140, 230, 255, calc(0.16 + var(--halo, 0) * 0.32));
}

#modelli-su-misura .modelli-tile.is-lilac {
  --tile-rgb: 160, 135, 255;
  --tile-alpha: 0.70;
  box-shadow: 0 0 calc(10px + 18px * var(--halo, 0)) rgba(160, 135, 255, calc(0.14 + var(--halo, 0) * 0.28));
}


#modelli-su-misura .modelli-grid.is-animate .modelli-tile {
  animation: modelli-assemble 2.7s ease-out forwards;
  animation-delay: var(--delay, 0s);
  opacity: 0.75;
}

#modelli-su-misura .modelli-grid.is-animate .modelli-tile:nth-child(5n) {
  animation-duration: 3s;
}

@keyframes modelli-assemble {
  0% {
    opacity: 0.18;
    transform: translate(var(--scatter-x, 0px), var(--scatter-y, 0px)) scale(0.88);
  }
  70% {
    opacity: 0.95;
    transform: translate(0px, 0px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #modelli-su-misura .modelli-tile,
  #modelli-su-misura .modelli-grid.is-animate .modelli-tile {
    animation: none !important;
    opacity: 1;
    transform: translate(0px, 0px) scale(1);
  }
}