/* Custom styles for Black Pearl Tattoo Parlor */

/* Smooth focus outlines for accessibility */
*:focus-visible {
  outline: 2px solid #ff7a50;
  outline-offset: 2px;
}

/* Selection color */
::selection {
  background: #ff7a50;
  color: #0f0f11;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal.revealed { opacity: 1 !important; transform: none !important; }
  .group:hover img { transform: none !important; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Navbar glass effect on scroll */
nav.scrolled {
  background: rgba(8, 8, 9, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(113, 113, 122, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* Gallery image hover */
.group:hover img {
  transform: scale(1.05);
}

/* Custom select arrow */
select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.25em 1.25em;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Fade-in for hero elements (visible by default, JS enhances) */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-animated {
  animation: fadeInUp 0.8s ease forwards;
}

.hero-animated-delay-1 { animation-delay: 0.2s; opacity: 0; }
.hero-animated-delay-2 { animation-delay: 0.4s; opacity: 0; }
.hero-animated-delay-3 { animation-delay: 0.6s; opacity: 0; }