/* ==============================
   ANISS PORTFOLIO — Global Styles
   ============================== */

/* Animations */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.3); }
  50% { box-shadow: 0 0 25px rgba(59, 130, 246, 0.6); }
}

.animate-fade-in {
  animation: fade-in 0.8s ease-out both;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Line clamp utility */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Focus ring removal for clean UI */
input:focus, button:focus {
  outline: none;
}

/* Smooth transitions globally */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Mobile touch improvements */
@media (max-width: 640px) {
  html {
    -webkit-text-size-adjust: 100%;
  }
  
  body {
    -webkit-overflow-scrolling: touch;
  }
}

/* Range input styling (volume slider) */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  border: 2px solid #3b82f6;
  cursor: pointer;
}


input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  border: 2px solid #3b82f6;
  cursor: pointer;
  border: none;
}

/* Imported from index.html */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
.font-sans { font-family: 'Inter', sans-serif; }
.font-serif { font-family: 'Playfair Display', serif; }
.font-mono { font-family: 'Fira Code', monospace; }

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #444;
}