/* Portfolio Section Styles */

.portfolio-section-1 {
  @apply relative;
}

.portfolio-image-container {
  @apply relative w-full h-[600px] rounded-3xl overflow-hidden;
}

.portfolio-image {
  @apply w-full h-full object-cover;
  /* Curved cutout effect - creates a smooth curved edge on the right side */
  clip-path: polygon(0% 0%, 85% 0%, 100% 20%, 100% 80%, 85% 100%, 0% 100%);
  transition: clip-path 0.3s ease;
}

/* Alternative curved cutout - more dramatic curve */
.portfolio-image-curved {
  @apply w-full h-full object-cover;
  clip-path: polygon(0% 0%, 80% 0%, 100% 15%, 100% 85%, 80% 100%, 0% 100%);
  transition: clip-path 0.3s ease;
}

/* Wave-like curved cutout */
.portfolio-image-wave {
  @apply w-full h-full object-cover;
  clip-path: polygon(0% 0%, 90% 0%, 100% 30%, 100% 70%, 90% 100%, 0% 100%);
  transition: clip-path 0.3s ease;
}

/* Organic curved cutout with multiple curves */
.portfolio-image-organic {
  @apply w-full h-full object-cover;
  clip-path: polygon(
    0% 0%,
    75% 0%,
    90% 25%,
    100% 50%,
    90% 75%,
    75% 100%,
    0% 100%
  );
  transition: clip-path 0.3s ease;
}

/* Hover effects for interactive curved cutouts */
.portfolio-image-container:hover .portfolio-image {
  clip-path: polygon(0% 0%, 80% 0%, 100% 15%, 100% 85%, 80% 100%, 0% 100%);
}

.portfolio-image-container:hover .portfolio-image-curved {
  clip-path: polygon(0% 0%, 75% 0%, 100% 20%, 100% 80%, 75% 100%, 0% 100%);
}

.portfolio-image-container:hover .portfolio-image-wave {
  clip-path: polygon(0% 0%, 85% 0%, 100% 25%, 100% 75%, 85% 100%, 0% 100%);
}

.portfolio-image-container:hover .portfolio-image-organic {
  clip-path: polygon(
    0% 0%,
    70% 0%,
    85% 20%,
    100% 45%,
    85% 80%,
    70% 100%,
    0% 100%
  );
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .portfolio-image,
  .portfolio-image-curved,
  .portfolio-image-wave,
  .portfolio-image-organic {
    clip-path: none;
    @apply rounded-3xl;
  }

  .portfolio-image-container:hover .portfolio-image,
  .portfolio-image-container:hover .portfolio-image-curved,
  .portfolio-image-container:hover .portfolio-image-wave,
  .portfolio-image-container:hover .portfolio-image-organic {
    clip-path: none;
  }
}

/* Additional decorative elements for enhanced visual appeal */
.portfolio-decorative-shape {
  @apply absolute -top-4 -right-4 w-24 h-24 bg-accent/10 rounded-full;
  animation: float 6s ease-in-out infinite;
}

.portfolio-decorative-shape-2 {
  @apply absolute -bottom-4 -left-4 w-16 h-16 bg-accent/15 rounded-full;
  animation: float 8s ease-in-out infinite reverse;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}