/* Custom overrides mimicking @layer base from Tailwind config */
body {
  background-color: #050505;
  color: #e5e5e5;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #050505; 
}
::-webkit-scrollbar-thumb {
  background: #262626; 
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ccb674; 
}

/* Hide native browser icons for date and time inputs */
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

/* Glowing Bottom Line Animation - Refined */
.glowing-border-container {
  position: relative;
  padding-bottom: 8px;
  display: inline-block;
}

.glowing-border-container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(204, 182, 116, 0.2) 20%, 
    rgba(204, 182, 116, 1) 50%, 
    rgba(204, 182, 116, 0.2) 80%, 
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shine 3s infinite linear;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

/* New Metal Gold Text Class - High Contrast & WebKit Support for Mobile */
.text-metal-gold {
  background: linear-gradient(to bottom, #BF953F 0%, #FCF6BA 25%, #B38728 50%, #FBF5B7 75%, #AA771C 100%);
  background-size: 200% auto;
  color: #ccb674; /* Fallback for browsers not supporting clip */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; /* Critical for Mobile Safari/Chrome */
  animation: shine 3s linear infinite;
  font-weight: 700;
}

/* Animation reveal for mobile services - SLOWER transition (2.5s) */
/* PERFORMANCE OPTIMIZATION: added will-change */
.reveal-hidden {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 4s ease-out, transform 4s ease-out;
  will-change: opacity, transform;
}
.reveal-visible {
  opacity: 1;
  transform: translateX(0);
}