/* Crown & Blade — custom styles (Tailwind CDN handles the utilities). */

:root { color-scheme: dark; }
html { scroll-padding-top: 5.5rem; }
body { font-family: 'DM Sans', sans-serif; }

.hero-image { background-image: linear-gradient(90deg, rgba(8,8,8,.96) 0%, rgba(8,8,8,.82) 42%, rgba(8,8,8,.24) 100%), url('https://images.unsplash.com/photo-1503951914875-452162b0f3f1?auto=format&fit=crop&w=2200&q=85'); }
.texture { background-image: radial-gradient(rgba(255,255,255,.11) .7px, transparent .7px); background-size: 8px 8px; }

.service-card, .barber-card { transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.service-card:hover, .barber-card:hover { transform: translateY(-3px); }
.service-card.is-selected, .barber-card.is-selected { border-color: #d7a64f; background-color: #191713; }

.focus-ring:focus-visible { outline: 2px solid #e9bd71; outline-offset: 3px; }
/* Time options hide their radio inputs, so show keyboard focus on the label. */
.time-option:has(input:focus-visible) { outline: 2px solid #e9bd71; outline-offset: 3px; }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.enter { animation: rise .65s ease both; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }