/* Custom styles supplementing Tailwind */

/* Smooth focus styles */
*:focus-visible {
    outline: 2px solid #ff8a6c;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Selection color */
::selection {
    background-color: rgba(255, 107, 63, 0.3);
    color: #2d2d3a;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f6f6f7;
}
::-webkit-scrollbar-thumb {
    background: #a1a1b5;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #7a7a94;
}

/* Subtle entrance for hero elements (above fold — no JS needed) */
.hero-gradient h1,
.hero-gradient p,
.hero-gradient a,
.hero-gradient .inline-flex {
    animation: heroFadeIn 0.8s ease forwards;
}
.hero-gradient p { animation-delay: 0.15s; }
.hero-gradient a:first-of-type { animation-delay: 0.3s; }
.hero-gradient a:last-of-type { animation-delay: 0.4s; }
.hero-gradient .inline-flex { animation-delay: 0.05s; }

@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Reduce motion for hero animations */
@media (prefers-reduced-motion: reduce) {
    .hero-gradient h1,
    .hero-gradient p,
    .hero-gradient a,
    .hero-gradient .inline-flex {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Input autofill styling */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

/* Print styles */
@media print {
    nav, .reveal, #contact-form, #form-success { display: none; }
    body { color: #000; background: #fff; }
}