/* Extracted and improved styles from index.html
   - Keeps Tailwind usage but centralizes custom styles
   - Adds focus styles and reduces heavy transitions on all elements
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&family=Space+Grotesk:wght@400;600;700&display=swap');

/* Reduce overly-broad transition selector for performance */
*:focus { outline: none; }
button:focus, a:focus {
  outline: 3px solid rgba(99,102,241,0.25);
  outline-offset: 2px;
}

.gradient-text {
  background: linear-gradient(90deg, #3b82f6, #9333ea, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-shift 4s ease infinite;
  background-size: 300% auto;
}

@keyframes gradient-shift {
  0%,100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

.skill-bar { transition: width 1.8s cubic-bezier(0.25,0.46,0.45,0.94); }
.floating { animation: floating 4s ease-in-out infinite; }
@keyframes floating { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-15px)} }
.pulse-glow { animation: pulse-glow 2.5s ease-in-out infinite; }
@keyframes pulse-glow { 0%,100%{box-shadow:0 0 25px rgba(59,130,246,0.4)} 50%{box-shadow:0 0 50px rgba(147,51,234,0.7)} }
.card-hover { transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
.card-hover:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 15px 30px rgba(0,0,0,0.3); }

.theme-toggle { position: relative; width: 60px; height: 30px; background: linear-gradient(to right,#3b82f6,#9333ea); border-radius:30px; cursor:pointer; border:2px solid transparent; box-shadow:0 0 10px rgba(59,130,246,0.5);} 
.theme-toggle.active { background: linear-gradient(to right,#facc15,#f97316); box-shadow:0 0 10px rgba(250,204,21,0.7); }
.theme-toggle-circle { position:absolute; top:3px; left:3px; width:20px; height:20px; background:white; border-radius:50%; transition:transform 0.4s; display:flex; align-items:center; justify-content:center; }
.theme-toggle.active .theme-toggle-circle { transform: translateX(30px); }

/* Dark and light mode helpers */
body { font-family: 'Inter', sans-serif; background-color: #111827; color:#f3f4f6; }
.bg-gray-900{background-color:#111827!important}
.bg-gray-800\/50{background-color:rgba(31,41,55,0.7)!important}
.bg-gray-800\/70{background-color:rgba(31,41,55,0.9)!important}
.border-gray-700{border-color:#374151!important}
.text-gray-300{color:#d1d5db!important}
.text-gray-400{color:#9ca3af!important}

nav{background-color:rgba(17,24,39,0.95)!important;border-bottom:1px solid #374151}

body.light-mode{background:linear-gradient(135deg,#ffffff 0%,#e5e7eb 100%);color:#1f2937}
body.light-mode .bg-gray-900{background-color:#ffffff!important}
body.light-mode .bg-gray-800\/50{background-color:rgba(249,250,251,0.9)!important}
body.light-mode .bg-gray-800\/70{background-color:#ffffff!important}
body.light-mode .text-gray-100, body.light-mode .text-gray-300{color:#1f2937!important}
body.light-mode .text-gray-400{color:#4b5563!important}
body.light-mode .border-gray-700, body.light-mode .border-gray-800{border-color:#d1d5db!important}
body.light-mode nav{background-color:rgba(255,255,255,0.9)!important;border-bottom:1px solid #d1d5db}
body.light-mode #mobile-menu{background-color:rgba(249,250,251,0.98)!important}

.hero-img-border{border-color:#374151}
body.light-mode .hero-img-border{border-color:#d1d5db}
.font-space{font-family:'Space Grotesk',sans-serif}

/* Skip link for accessibility */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;left:auto;padding:0.75rem 1rem;background:#111827;color:#fff;border-radius:6px;z-index:60}

/* Minimal project-overlay styles (keeps original look) */
.project-overlay{position:absolute;inset:0;padding:1.25rem;background:linear-gradient(180deg,rgba(17,24,39,0.6),rgba(17,24,39,0.8));color:#fff;opacity:0;transition:opacity 0.25s ease;display:flex;flex-direction:column;justify-content:flex-end}
.relative:hover .project-overlay, .project-overlay:focus-within{opacity:1}

/* small utility for visually hidden text */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}