/* Custom styles for Horizon Beauty Station */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #070e1a;
}
::-webkit-scrollbar-thumb {
  background: #1e3a5f;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0d9488;
}

/* Floating card animations */
.floating-card {
  animation: float 6s ease-in-out infinite;
}

.card-1 {
  animation-delay: 0s;
}
.card-2 {
  animation-delay: -1.5s;
}
.card-3 {
  animation-delay: -3s;
}
.card-4 {
  animation-delay: -4.5s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* Scroll reveal base - content always visible by default */
.scroll-reveal {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Only apply hidden state when JS adds the class */
.scroll-reveal.revealed {
  opacity: 0;
  transform: translateY(30px);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .floating-card {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* Navbar glass effect */
#navbar.scrolled {
  background: rgba(7, 14, 26, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(30, 58, 95, 0.3);
}

/* Selection color */
::selection {
  background: rgba(20, 184, 166, 0.3);
  color: #fff;
}

/* Image hover zoom */
.group img {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Mobile menu transitions */
#mobile-menu {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#mobile-menu.active {
  opacity: 1;
  pointer-events: all;
}

/* Subtle gradient text support for browsers that need it */
.text-transparent {
  -webkit-background-clip: text;
  background-clip: text;
}