/* ============================================================
   GET BLESSED BARBERSHOP — Custom CSS Overrides
   Handles animations and transitions that Tailwind can't do inline
   ============================================================ */

/* ---- Smooth Scroll (fallback for older browsers) ---- */
html {
  scroll-behavior: smooth;
}

/* ---- Scroll-triggered Fade-in Animation ---- */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Mobile Menu Hamburger Animation ---- */
#menu-toggle.active #bar1 {
  transform: translateY(6px) rotate(45deg);
}

#menu-toggle.active #bar2 {
  opacity: 0;
}

#menu-toggle.active #bar3 {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---- Header Scroll State ---- */
#header.scrolled {
  background-color: rgba(10, 10, 10, 0.95);
  border-bottom-color: rgba(42, 42, 42, 0.6);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* ---- Lightbox Transitions ---- */
#lightbox {
  opacity: 0;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
}

#lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

#lightbox-img {
  transform: scale(0.9);
  transition: transform 0.3s ease-out;
}

#lightbox.active #lightbox-img {
  transform: scale(1);
}

/* ---- Custom Scrollbar (Webkit browsers) ---- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #d4a853;
}

/* ---- Form Focus Glow ---- */
input:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.15);
}

/* ---- Gallery Item Hover Shimmer ---- */
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(212, 168, 83, 0) 0%,
    rgba(212, 168, 83, 0.08) 50%,
    rgba(212, 168, 83, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.gallery-item:hover::after {
  opacity: 1;
}

/* ---- Prevent body scroll when mobile menu is open ---- */
body.menu-open {
  overflow: hidden;
}

/* ---- Selection Color ---- */
::selection {
  background-color: rgba(212, 168, 83, 0.3);
  color: #f5f5f5;
}