/* ============================================================
   DIGITAL SAMAAJ — HIGH PERFORMANCE MICRO-INTERACTIONS
   ============================================================ */

/* 1. Hardware Accelerated Smooth Page Fade-In Transition */
.page {
  opacity: 0;
  transform: translateY(12px) scale(0.99);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  display: none !important;
}

.page.active {
  display: block !important;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 2. Tactical Button Micro-Press States & Ambient Shadows */
.btn-primary, .btn-ghost, .btn-wa, .see-all, .tablet-filter-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  will-change: transform, box-shadow;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(91, 76, 255, 0.35) !important;
}

.btn-primary:active, .btn-ghost:active, .btn-wa:active {
  transform: translateY(0) scale(0.96) !important;
  opacity: 0.95;
}

/* 3. Infinite Loading Skeleton Shimmer */
.skeleton {
  background: linear-gradient(90deg, 
    var(--border, #e2e8f0) 25%, 
    var(--surface, #f8fafc) 50%, 
    var(--border, #e2e8f0) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite linear;
  border-radius: 8px;
}

.dark-theme .skeleton {
  background: linear-gradient(90deg, 
    #334155 25%, 
    #1e293b 50%, 
    #334155 75%
  );
  background-size: 200% 100%;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Skeleton Containers for Fast Feedback States */
.skeleton-card {
  height: 240px;
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1.5px solid var(--border);
}

.skeleton-text {
  height: 14px;
  width: 100%;
  margin-bottom: 12px;
  border-radius: 4px;
}

.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 85%; }

/* 4. Smooth Floating Action & Navigation Highlight Overlays */
.nav-item {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), 
              color 0.25s ease !important;
}

.nav-item:active {
  transform: scale(0.9);
}

/* Touch Device Native Feedback */
@media (hover: hover) {
  .nav-item:hover svg {
    transform: translateY(-2px) scale(1.05);
  }
}

/* 5. Progressive List Image Fade-in */
.slide-img, .card-thumbnail img, .img-prompt-preview img {
  opacity: 0;
  animation: image-fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes image-fade-in {
  to { opacity: 1; }
}