/**
 * Dicari-dong - Core Custom Stylesheet
 * Standar: Production-grade CSS, Hardware-Accelerated Animations
 */

/* =====================================================================
   1. ANIMASI NATIVE KEYFRAMES
   ===================================================================== */

/**
 * Alur pergeseran gradasi warna halus terinspirasi dari warna Pantone
 * Memanfaatkan optimalisasi background-position untuk performa GPU optimal
 */
@keyframes logoGradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/**
 * Efek pemindaian cahaya (Shimmer) untuk komponen loading skeleton
 */
@keyframes skeletonShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Animasi transisi masuk: Muncul dan Bergeser ke Atas */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animasi transisi masuk: Muncul dan Bergeser ke Bawah */
@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =====================================================================
   2. KELAS UTILITAS & INTERAKSI MIKRO KUSTOM
   ===================================================================== */

/**
 * Efek Gradasi Beranimasi pada Logo
 * Rentang Warna: #6C63FF → #A855F7 → #EC4899 → #F97316 → #6C63FF
 */
.logo-gradient {
  background: linear-gradient(
    270deg,
    #6C63FF,
    #A855F7,
    #EC4899,
    #F97316,
    #6C63FF
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: logoGradientFlow 6s ease infinite;
  will-change: background-position;
}

/**
 * Komponen Shimmer Efek Pulse untuk Skeleton Card
 */
.shimmer {
  background: linear-gradient(
    90deg, 
    #1A1A24 0%, 
    #22223A 50%, 
    #1A1A24 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite linear;
  will-change: background-position;
}

/* Penataan Fokus Glow Ungu Tipis pada Kotak Input Utama */
.input-glow:focus {
  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.25);
}

/**
 * Kelas Utilitas Penyembunyian Bilah Geser (Scrollbar Masking)
 * Berguna untuk wadah tab kategori horizontal di perangkat mobile
 */
.scrollbar-none {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}
.scrollbar-none::-webkit-scrollbar {
  display: none;  /* Safari dan Chrome */
}


/* =====================================================================
   3. IMPLEMENTASI KELAS ANIMASI MASUK HETERO
   ===================================================================== */

.animate-fade-up {
  animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-down {
  animation: fadeDown 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Staggered Delay Utility Classes untuk Efek Transisi Bertahap */
.animation-delay-150 {
  animation-delay: 150ms;
  /* Mencegah kilatan komponen sebelum animasi dipicu */
  opacity: 0; 
}

.animation-delay-300 {
  animation-delay: 300ms;
  opacity: 0;
}


/* =====================================================================
   4. PENATAAN GLOBAL SCROLLBAR UTAMA SISTEM
   ===================================================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0F0F13;
}

::-webkit-scrollbar-thumb {
  background: #2D2D45;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #5A5A80;
}