/* =====================================================================
   Opera Populi : mosaïque générative
   ===================================================================== */

/* ---------- Mosaïque générative (SVG injecté par [data-mosaic]) ---------- */
.mosaic { position: relative; overflow: hidden; background: var(--grout); }
.mosaic svg { width: 100%; height: 100%; }
.tile { transform-box: fill-box; transform-origin: center; transform: rotate(var(--r, 0deg)); }
.tile--1 { fill: var(--tess-1); }
.tile--2 { fill: var(--tess-2); }
.tile--3 { fill: var(--tess-3); }
.tile--4 { fill: var(--tess-4); }
.tile--5 { fill: var(--tess-5); }
.tile--6 { fill: var(--tess-6); }
.tile--empty { fill: var(--socket); }
@media (prefers-reduced-motion: no-preference) {
  .mosaic .tile:not(.tile--empty) { animation: tile-in var(--dur-slow) var(--ease-spring) both; animation-delay: var(--d, 0ms); }
  .mosaic .tile.is-new { animation: tile-pop 1s var(--ease-spring) both; animation-delay: 0ms; }
}
@keyframes tile-in { from { opacity: 0; transform: rotate(calc(var(--r, 0deg) - 30deg)) scale(.3); } }
@keyframes tile-pop {
  0% { opacity: 0; transform: rotate(calc(var(--r, 0deg) + 45deg)) scale(1.9); }
  55% { opacity: 1; }
}