/*
 * styles.css — Site-wide styles and small utility replacements
 * - Provides base smoothing and scroll padding
 * - Implements scroll-reveal helpers used by nav.js (animate-on-scroll)
 * - Replaces a few Tailwind config-dependent utilities (accent colors, rings)
 * - Defines keyframe animations used by the UI and typing game
 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
  /* Scroll padding to account for fixed nav height (80px = h-20) */
  scroll-padding-top: 80px;
}
/* Scroll reveal helper classes */
.animate-on-scroll {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  transform: translateY(20px);
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Active nav link styles (desktop) */
.nav-link.active {
  background-color: #38bdf8; /* accent-500 */
  color: #ffffff;
}
.dark .nav-link.active {
  background-color: #0ea5e9; /* accent-600 */
  color: #ffffff;
}
/* Active nav link styles (mobile) */
.dark .mobile-nav-link.active {
  color: #38bdf8; /* accent-500 */
  background-color: rgb(31 41 55); /* gray-800 */
}
.mobile-nav-link.active {
  color: #0ea5e9; /* accent-600 */
  background-color: rgb(243 244 246); /* gray-100 */
}
/* Subtle background artifacts */
.background-artifacts {
  background-image:
    radial-gradient(1200px 800px at 85% 10%, rgba(56, 189, 248, 0.08), rgba(56, 189, 248, 0) 60%),
    radial-gradient(900px 600px at 10% 90%, rgba(14, 165, 233, 0.06), rgba(14, 165, 233, 0) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23a3a3a3' fill-opacity='0.15'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 16px 16px;
  background-position: center, center, top left;
  opacity: 0.6;
  filter: saturate(90%);
}
.dark .background-artifacts {
  background-image:
    radial-gradient(1200px 800px at 85% 10%, rgba(56, 189, 248, 0.12), rgba(56, 189, 248, 0) 60%),
    radial-gradient(900px 600px at 10% 90%, rgba(14, 165, 233, 0.10), rgba(14, 165, 233, 0) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23ffffff' fill-opacity='0.06'/%3E%3C/svg%3E");
  opacity: 0.7;
  filter: saturate(110%);
}

/* Replacement utilities for Tailwind config-dependent classes */
.bg-accent-500 { background-color: #38bdf8 !important; }
.bg-accent-600 { background-color: #0ea5e9 !important; }
.text-accent-500 { color: #38bdf8 !important; }
.text-accent-600 { color: #0ea5e9 !important; }
.dark .bg-accent-600 { background-color: #0ea5e9 !important; }
.dark .text-accent-500 { color: #38bdf8 !important; }

/* Simple ring focus replacements used by the typing game */
.focus\:ring-accent-500:focus { box-shadow: 0 0 0 2px #38bdf8; outline: none; }
.focus\:ring-green-500:focus { box-shadow: 0 0 0 2px #22c55e; outline: none; }

/* Animations previously supplied by Tailwind config */
@keyframes fade-in-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
.animate-cursor-blink { animation: cursor-blink 0.7s infinite; }
.animate-shake { animation: shake 0.5s ease-in-out; }

/* Utility classes to mimic Tailwind color with opacity variants used in markup */
.bg-accent-500\/10 { background-color: rgba(56, 189, 248, 0.10) !important; }
.bg-accent-500\/30 { background-color: rgba(56, 189, 248, 0.30) !important; }