/* My Works */
.my-works {
  background-color: #fff7f4; /* мягкий фон вместо тёмного */
  padding: var(--spacing-xxl);
  text-align: center;
  min-height: 800px;
}

.my-works h2 {
  color: var(--dark-color);
  font-size: var(--font-size-xxl);
  margin-bottom: var(--spacing-lg);
  text-transform: none;
  font-weight: 600;
}

/* Галерея */
.my-works .gallery-item {
  transform: rotate(2deg);
  transition: transform 0.3s ease;
  padding: var(--spacing-md);
  position: relative;
}

.my-works .gallery-item:nth-child(even) {
  transform: rotate(-2deg);
}

.my-works .gallery-item img {
  width: 100%;
  height: auto;
  border: var(--border-medium) solid var(--accent-color); /* светлый бордюр */
  border-radius: var(--border-radius-lg);
  display: block;
  cursor: pointer;
  margin-bottom: var(--spacing-md);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.my-works .gallery-item:hover {
  transform: rotate(0deg) scale(1.03);
}

.my-works .gallery-item:hover img {
  border-color: var(--secondary-color); /* акцент при наведении */
}

/* Тэги */
.gallery-item-tag {
  display: inline-flex;
  background-color: var(--secondary-color);
  font-size: var(--font-size-sm);
  color: var(--white-color);
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-md);
  border: var(--border-thin) solid var(--white-color);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.gallery-item-tag:hover {
  border-color: var(--primary-color);
}

.gallery-item-tag-secondary {
  background-color: var(--primary-color);
}

/* Декор */
.my-works.has-decor {
  position: relative;
  overflow: hidden;
}

.my-works.has-decor::before {
  content: "";
  position: absolute;
  top: 50px;
  left: 0px;
  width: 300px;
  height: 300px;
  background-image: var(--decor-img);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
  animation: floatDecor 8s ease-in-out infinite;
}

/* Анимация "плавания" */
@keyframes floatDecor {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(10px, -5px);
  }
  50% {
    transform: translate(0, -10px);
  }
  75% {
    transform: translate(-10px, -5px);
  }
  100% {
    transform: translate(0, 0);
  }
}