/* Mosaic texture layer — Relay Mosaic validator
   Pure-CSS mosaic tiles. Referenced from index.html and 404.html. */

.mosaic {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.mosaic .tile {
  position: absolute;
  border-radius: 22%;
  opacity: 0.5;
  transform: rotate(var(--r, 0deg));
}

.mosaic .t1 { width: 96px;  height: 96px;  left: 4%;  top: 18%;  --r: 14deg;  background: linear-gradient(135deg, rgba(124,140,255,.34), rgba(124,140,255,0)); }
.mosaic .t2 { width: 56px;  height: 56px;  left: 14%; top: 58%;  --r: -18deg; background: linear-gradient(135deg, rgba(178,148,255,.36), rgba(178,148,255,0)); }
.mosaic .t3 { width: 34px;  height: 34px;  left: 9%;  top: 40%;  --r: 40deg;  background: linear-gradient(135deg, rgba(122,224,214,.30), rgba(122,224,214,0)); }
.mosaic .t4 { width: 72px;  height: 72px;  right: 8%; top: 14%;  --r: -12deg; background: linear-gradient(315deg, rgba(178,148,255,.30), rgba(178,148,255,0)); }
.mosaic .t5 { width: 44px;  height: 44px;  right: 16%; top: 46%;  --r: 26deg;  background: linear-gradient(315deg, rgba(124,140,255,.30), rgba(124,140,255,0)); }
.mosaic .t6 { width: 120px; height: 120px; right: 4%; bottom: 6%;  --r: 8deg;   background: linear-gradient(315deg, rgba(122,224,214,.24), rgba(122,224,214,0)); }
.mosaic .t7 { width: 40px;  height: 40px;  left: 24%; bottom: 10%; --r: -30deg; background: linear-gradient(135deg, rgba(139,155,255,.28), rgba(139,155,255,0)); }
.mosaic .t8 { width: 64px;  height: 64px;  left: 34%; top: 8%;    --r: 20deg;  background: linear-gradient(135deg, rgba(178,148,255,.22), rgba(178,148,255,0)); }
.mosaic .t9 { width: 30px;  height: 30px;  right: 30%; bottom: 18%; --r: -8deg; background: linear-gradient(315deg, rgba(122,224,214,.32), rgba(122,224,214,0)); }

@media (prefers-reduced-motion: reduce) {
  .mosaic .tile { transform: none; }
}