/* 
 * Image Scroll Effect for Project Cards
 * Adapted from portfolio-custom.css for reuse on the homepage
 */

/* Container for scrollable images */
.scroll-img-container {
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border-radius: 0.75rem 0.75rem 0 0;
}

/* Top scroll indicator that appears on hover */
.scroll-img-container::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  z-index: 10;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M7 8l5-5 5 5M7 16l5 5 5-5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
}

.project-card:hover .scroll-img-container::before {
  opacity: 0.8;
  transform: scale(1);
}

/* Image styling for the scroll effect */
.scroll-img-container img {
  transition: transform 0.65s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
  transform-origin: top center;
  transform: translateY(0);
  height: auto;
  min-height: 220px;
  object-fit: cover;
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  object-position: top center !important;
}

/* Bottom scroll indicator */
.scroll-indicator-bottom {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 13l5 5 5-5M7 6l5 5 5-5'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  pointer-events: none;
}

/* Touch device styles */
.active-touch img {
  transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1) !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Bottom gradient indicator for scrollability */
.scroll-img-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, #6366F1, #EC4899);
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
  opacity: 0.7;
}

.project-card:hover .scroll-img-container::after,
.active-touch .scroll-img-container::after {
  transform: scaleX(1);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .scroll-img-container {
    height: 200px;
  }
  
  .scroll-img-container img {
    height: 400px;
  }
}