@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@keyframes progress-bar-animation {
  from { width: 0%; }
  to { width: 100%; }
}

.animate-progress {
  animation: progress-bar-animation 5s linear forwards;
}

/* Utility class baru untuk menyembunyikan scrollbar */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

@keyframes highlight {
  from { background-color: #e0f2fe; } /* light-blue-100 */
  to { background-color: transparent; }
}

.highlight-comment {
  animation: highlight 2s ease-out;
}

@keyframes glowing-border {
  0% { border-color: #3b82f6; } /* blue-500 */
  25% { border-color: #8b5cf6; } /* violet-500 */
  50% { border-color: #ec4899; } /* pink-500 */
  75% { border-color: #8b5cf6; } /* violet-500 */
  100% { border-color: #3b82f6; } /* blue-500 */
}

/* Keyframes untuk animasi teks berkilau */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes aurora-bg {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Keyframes untuk animasi Efek Mengetik */
@keyframes typing-reveal {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: orange; }
}

 @keyframes underline-reveal {
  0% { width: 0; }
  100% { width: 100%; }
 }
 

 .range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.range-slider:hover::-webkit-slider-thumb {
  transform: scale(1.2);
}

.range-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease-in-out;
}

.range-slider:hover::-moz-range-thumb {
  transform: scale(1.2);
}