/**
 * BSTM Store - Pattern Backgrounds
 * أنماط خلفيات النجوم لمتجر BSTM
 */

/* خلفيات أنماط النجوم */
.pattern-background {
  position: relative;
}

.pattern-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  background-repeat: repeat;
}

/* نمط النجوم الأحمر */
.pattern-red-stars::before {
  background-image: url('../images/patterns/red-stars.svg');
  background-size: 300px auto;
}

/* نمط النجوم البيج */
.pattern-beige-stars::before {
  background-image: url('../images/patterns/beige-stars.svg');
  background-size: 300px auto;
}

/* تطبيق النمط على بطاقات المنتج */
.product-card.with-pattern {
  overflow: hidden;
  position: relative;
}

/* تطبيق النمط على الهيدرات والأقسام */
.section-heading.with-pattern,
.section-footer.with-pattern {
  position: relative;
  overflow: hidden;
}

/* إضافة تأثير دوران خفيف للنمط */
.rotate-pattern::before {
  transform: rotate(10deg);
}

/* تأثير تحريك بطيء للنمط (للمؤثرات الحركية) */
@keyframes pattern-float {
  0% { background-position: 0 0; }
  100% { background-position: 300px 300px; }
}

.animated-pattern::before {
  animation: pattern-float 80s linear infinite;
}

/* مؤثرات تفاعلية للنمط عند مرور المؤشر */
.hover-pattern:hover::before {
  opacity: 0.12;
  transition: opacity 0.3s ease;
}