.uc-bg-1 {
    background-color: #ffffff;
    
    /* Слой 1: Шум */
    background-image: 
        radial-gradient(circle at 30% 40%, rgba(200, 200, 200, 0.08) 0px, transparent 8%),
        radial-gradient(circle at 70% 80%, rgba(150, 150, 150, 0.1) 0px, transparent 10%),
        
        /* Слой 2: Мелкие точки (наждачка) */
        repeating-linear-gradient(45deg, 
            rgba(0, 0, 0, 0.1) 0px, 
            rgba(0, 0, 0, 0.2) 1px, 
            rgba(255, 255, 255, 0) 1px, 
            rgba(255, 255, 255, 0) 4px
        );
}


/* Гофрированный картон косые линии */
.uc-bg-2 {
  background-color: #fff;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 0px,
    rgba(255, 255, 255, 0.2) 2px,
    rgba(255, 255, 255, 0.2) 2px,
    rgba(255, 255, 255, 0.2) 4px
  );
  background-size: 8px 8px;
  position: relative;
  overflow: hidden;
}

.uc-bg-2::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.05) 3px,
    rgba(0,0,0,0.05) 6px
  );
  transform: rotate(30deg);
  animation: move 20s linear infinite;
}

@keyframes move {
  0% { transform: rotate(30deg) translate(0, 0); }
  100% { transform: rotate(30deg) translate(10px, 10px); }
}



/* точки */
.uc-bg-3 {
    /* Белый фон */

    /* Создаем слой с шумом */
    background-image: radial-gradient(rgba(0, 0, 0, 0.2) 1px, transparent 1px);
    background-size: 3px 3px;
    
    /* Альтернативный вариант с линейным градиентом для более "полосатой" наждачки */
    /* background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 2px, transparent 2px, transparent 4px); */
}

.uc-bg-3-w {
    /* Белый фон */

    /* Создаем слой с шумом */
    background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px);
    background-size: 3px 3px;
    
    /* Альтернативный вариант с линейным градиентом для более "полосатой" наждачки */
    /* background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 2px, transparent 2px, transparent 4px); */
}

/* картон */   
.uc-bg-4-bl {
  background-color: #fff;
  background-image: 
    linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,0.1) 25%, transparent 25%),
    linear-gradient(135deg, rgba(255,255,255,0.1) 25%, transparent 25%),
    linear-gradient(-135deg, rgba(255,255,255,0.1) 25%, transparent 25%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  position: relative;
}

.uc-bg-4-wh {
  background-color: #fff;
  background-image: 
    linear-gradient(45deg, rgba(0,0,0,0.5) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(0,0,0,0.5) 25%, transparent 25%),
    linear-gradient(135deg, rgba(0,0,0,0.1) 25%, transparent 25%),
    linear-gradient(-135deg, rgba(0,0,0,0.1) 25%, transparent 25%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  position: relative;
}

.uc-bg-4-bl ::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,');
  opacity: 0.15;
  pointer-events: none;
}
.uc-bg-4-wh ::before  {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,');
  opacity: 0.15;
  pointer-events: none;
}




/* Современный минималистичный "картон" */   
.uc-bg-5 {
  background: #fff;
  background-image: 
    repeating-linear-gradient(75deg, 
      rgba(170, 130, 80, 0.07) 0px, 
      rgba(170, 130, 80, 0.1) 2px,
      transparent 2px, 
      transparent 8px
    ),
    repeating-linear-gradient(135deg, 
      rgba(150, 110, 60, 0.1) 0px, 
      rgba(150, 110, 60, 0.1) 2px,
      transparent 2px, 
      transparent 8px
    );
  box-shadow: 
    inset 0 2px 5px rgba(0,0,0,0.1),
    inset 0 -2px 5px rgba(255,255,240,0.3);
  border-radius: 4px;
}