/* ===== HERO MOSAIC ===== */
.hero-bg.mosaic{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(8, 1fr);
  z-index:0;
}

/* tile */
.hero-bg.mosaic .tile{
  background-size: 1400% 800%;
  opacity:0;
  transform: translateY(12px) rotateZ(-1.5deg) scale(.98);
  transition:
    opacity .7s ease,
    transform 1.2s cubic-bezier(.22,.61,.36,1);
}

/* แสดง tile */
.hero-bg.mosaic .tile.show{
  opacity:1;
  transform: translateY(0) rotateZ(0) scale(1);
}

/* overlay (ของเดิมคุณ) */
.hero-bg.mosaic::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(11,46,74,.55) 0%,
    rgba(11,46,74,.35) 45%,
    rgba(11,46,74,.15) 70%,
    rgba(11,46,74,.05) 100%
  );
  z-index:2;
}