/* Custom styles that complement Tailwind */

/* Smooth focus outlines for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #f0602e;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Selection color */
::selection {
  background: rgba(240, 96, 46, 0.2);
  color: #2a2c33;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #1e1f25;
}
::-webkit-scrollbar-thumb {
  background: #5c606b;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #7a7e8a;
}

/* Body light scrollbar */
body.bg-charcoal-50::-webkit-scrollbar-track {
  background: #f6f6f7;
}
body.bg-charcoal-50::-webkit-scrollbar-thumb {
  background: #c4c6cb;
}
body.bg-charcoal-50::-webkit-scrollbar-thumb:hover {
  background: #9fa2aa;
}

/* Prevent flash of unstyled content */
html {
  background: #f6f6f7;
}
html.dark-init {
  background: #1e1f25;
}

/* Subtle entrance for hero elements (no blocking) */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-animate {
  animation: fade-up 0.8s ease forwards;
}

.hero-animate-delay-1 { animation-delay: 0.1s; opacity: 0; }
.hero-animate-delay-2 { animation-delay: 0.2s; opacity: 0; }
.hero-animate-delay-3 { animation-delay: 0.3s; opacity: 0; }
.hero-animate-delay-4 { animation-delay: 0.4s; opacity: 0; }

/* Print styles */
@media print {
  header, .pulse-dot, .blob { display: none; }
  body { color: #000; background: #fff; }
  a { color: #000; }
}