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

:root {
  --primary: #10B981;
  --primary-hover: #059669;
  --primary-light: #34d399;
  --primary-dark: #047857;
  --primary-glow: rgba(16, 185, 129, 0.4);
  --bg-dark: #050608;
  --bg-card: #0a0d12;
  --border-dark: #1e293b;
  --accent-cyan: #14b8a6;
}

body {
  background-color: var(--bg-dark);
  color: #f1f5f9;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  overflow-x: hidden;
}

/* Custom Emerald Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #050608;
}
::-webkit-scrollbar-thumb {
  background: #10B981;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #34d399;
}

/* Mobile Scrollbar Hide Utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Hero Vector Image Sizing - Fully Responsive */
.hamza-floating-character {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hamza-floating-character img {
  max-height: 420px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 640px) {
  .hamza-floating-character img {
    max-height: 320px;
  }
}

/* Slim Animated Gauge Meter (0 to Target Fill Animation) */
.hamza-progress-svg {
  filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.4));
  animation: circleGlowPulse 2.5s ease-in-out infinite alternate;
}

.hamza-progress-circle {
  transition: stroke-dashoffset 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: stroke-dashoffset;
}

.hamza-skill-bar {
  transition: width 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: width;
}

.hamza-skill-card:hover .hamza-progress-svg {
  filter: drop-shadow(0 0 12px rgba(52, 211, 153, 0.95));
}