/* Custom styles for Efraín Montellano — Beauty & Hair Salon */

/* Smooth font rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hero asymmetric layout adjustments */
@media (max-width: 767px) {
  #hero {
    min-height: auto;
    padding-top: 100px;
    padding-bottom: 60px;
  }
  #hero .relative {
    max-width: 100%;
  }
}

/* Mobile menu open state */
#mobileMenu.open {
  opacity: 1 !important;
  pointer-events: all !important;
}

/* Hamburger animation */
#menuBtn.active #bar1 {
  transform: rotate(45deg) translate(5px, 5px);
}
#menuBtn.active #bar2 {
  opacity: 0;
}
#menuBtn.active #bar3 {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Navbar scrolled state */
#navbar.scrolled {
  background: rgba(250, 248, 245, 0.95) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 20px rgba(80, 33, 54, 0.08);
}

/* Gallery image hover */
#gallery img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Service card hover lift */
#services .group:hover {
  transform: translateY(-4px);
}

/* Floating accent card */
.absolute.-bottom-6 {
  backdrop-filter: blur(8px);
}

/* Form focus states */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(168, 82, 120, 0.15);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .sr, .sr-left, .sr-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  #gallery img {
    transition: none !important;
  }
}

/* Selection color */
::selection {
  background: #e8c5d6;
  color: #502136;
}