/**
 * Index Page Styles - Lokenath Marketing
 * Homepage-specific styles
 * 
 * Contents:
 * - Hero carousel
 * - Carousel indicators
 * - Testimonial panning
 * - Image effects
 */

/* =====================
   HERO CAROUSEL
   ===================== */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.hero-slide.active {
  opacity: 1;
}

/* =====================
   CAROUSEL INDICATORS
   ===================== */
.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s;
}

.carousel-dot.active {
  background: #ffd700;
  transform: scale(1.3);
}

/* =====================
   TESTIMONIAL CAROUSEL
   ===================== */
.testimonial-slide {
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.testimonial-slide.active {
  display: block;
  opacity: 1;
}

/* Mobile: 1 card at a time with horizontal scroll and better spacing */
@media (max-width: 767px) {
  .testimonial-slide.active .grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    gap: 1rem; /* Add gap between cards */
    padding: 0 1.5rem; /* Add left-right padding */
  }
  
  .testimonial-slide.active .grid::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  
  .testimonial-slide.active .grid > div {
    flex: 0 0 95%; /* Larger cards - 95% width for bigger images */
    scroll-snap-align: center;
  }
  
  /* Reduce image height on mobile for less zoom */
  .testimonial-slide.active .grid > div .relative {
    height: 10rem !important; /* h-40 instead of h-48 */
  }
}

/* Carousel Dots for Testimonials */
.testimonial-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s;
}

.testimonial-dot.active {
  background: #ffd700;
  transform: scale(1.3);
}

/* =====================
   IMAGE EFFECTS
   ===================== */

/* Image Panning Effect */
@keyframes panImage {
  0% {
    transform: scale(1.1) translateX(0);
  }
  50% {
    transform: scale(1.1) translateX(-5%);
  }
  100% {
    transform: scale(1.1) translateX(0);
  }
}

.pan-image {
  animation: panImage 20s ease-in-out infinite;
}

/* Shine Effect */
@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.shine-effect {
  position: relative;
  overflow: hidden;
}

.shine-effect::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shine 3s infinite;
}

/* =====================
   PAGE LOADER
   ===================== */
#page-loader {
  transition: opacity 0.5s ease;
}