/* ============================================
   SLIDER ANIMATIONS — Hero Bento Slider
   Premium Animations, Neon Borders, and Mobile Fixes
   ============================================ */

/* ===== 1. NEON GLOWING BORDER ANIMATION (restored) ===== */
.bento-slider {
  box-shadow: 0 10px 40px rgba(168, 85, 247, 0.15), 0 0 20px rgba(0, 0, 0, 0.8);
}

.bento-slider::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    transparent, 
    transparent, 
    transparent, 
    #a855f7, 
    #ec4899, 
    #3b82f6
  );
  animation: spinNeonBorder 4s linear infinite;
  z-index: -2;
}

@keyframes spinNeonBorder {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== 1b. ACCENT STRIP — hidden, spinning neon border hi accent dega ===== */
.accent-strip {
  display: none;
}

/* ===== 2. BACKGROUND ORBS ANIMATION ===== */
.matrix-orb {
  filter: blur(50px);
  animation: floatBentoOrb 10s ease-in-out infinite;
}
.matrix-orb.orb-2 {
  animation-delay: -3s;
}

@keyframes floatBentoOrb {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -20px) scale(1.1); }
}

/* ===== 3. DESKTOP SLIDE ITEM TRANSITIONS ===== */
.product-slide-item {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.05);
  filter: blur(10px); /* Desktop cinematic blur */
  will-change: opacity, transform, filter, visibility;
  backface-visibility: hidden;
  transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1);
  z-index: 1;
}

.product-slide-item.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  filter: blur(0);
  z-index: 2;
}

/* ===== 4. DESKTOP CONTENT TRANSITIONS ===== */
.product-slide-content {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  filter: blur(5px);
  will-change: opacity, transform, filter;
  transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.product-slide-item.active .product-slide-content {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition-delay: 0.2s;
}

/* ===== 5. DESKTOP ICON TRANSITIONS ===== */
.product-slide-icon {
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: scale(0.5) rotate(-10deg);
  will-change: opacity, transform;
  transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.product-slide-item.active .product-slide-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition-delay: 0.15s;
  animation: floatBentoIcon 4s ease-in-out infinite forwards;
  animation-delay: 0.9s; /* Wait for entry animation to finish */
}

@keyframes floatBentoIcon {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1); }
}

/* ===== 6. DOTS ANIMATION ===== */
.product-slider-dots .dot {
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.product-slider-dots .dot.active {
  background: #a855f7;
  width: 24px;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.6);
}

/* ============================================
   MOBILE SPECIFIC ULTRA-SMOOTH ANIMATIONS
   (Slower, No-Blur for GPU Performance)
   ============================================ */
@media (max-width: 576px) {
  
  /* Mobile Slide Wrapper: Slower & No Blur */
  .product-slide-item {
    filter: none; /* Removed blur to stop GPU lag/jhatka */
    transform: scale(1.02); /* Very subtle scale */
    /* 1.4 seconds duration for ultra smoothness */
    transition: all 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  
  .product-slide-item.active {
    filter: none;
    transform: scale(1);
  }
  
  /* Mobile Content Glide: Slower & Upward */
  .product-slide-content {
    filter: none !important;
    transform: translateY(15px) scale(0.98) !important; 
    transition: all 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }
  
  .product-slide-item.active .product-slide-content {
    transform: translateY(0) scale(1) !important;
    transition-delay: 0.15s !important;
  }
  
  /* Mobile Icon Pop-in: Slower */
  .product-slide-icon {
    transform: scale(0.8) rotate(0deg) !important; /* No rotation on mobile to save frames */
    transition: all 1.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  
  .product-slide-item.active .product-slide-icon {
    transform: scale(1) rotate(0deg) !important;
    transition-delay: 0.2s;
  }

}