/* ============================================
   STUNNING NAILS — Custom Styles
   ============================================ */

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: #1B4332;
  color: #FAFAF5;
}

/* ---------- Hero Animations ---------- */
.hero-eyebrow {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease forwards;
  animation-delay: 0.2s;
}

.hero-headline {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s ease forwards;
  animation-delay: 0.4s;
}

.hero-sub {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease forwards;
  animation-delay: 0.6s;
}

.hero-ctas {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease forwards;
  animation-delay: 0.8s;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Section Labels ---------- */
.section-label {
  letter-spacing: 0.15em;
}

.section-title {
  letter-spacing: -0.02em;
}

.section-desc {
  letter-spacing: 0.01em;
}

/* ---------- Service Cards ---------- */
.services-grid .service-card {
  transform: translateY(0);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.services-grid .service-card:hover {
  transform: translateY(-6px);
}

/* ---------- Feature Pills ---------- */
.feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  color: #D4E4D7;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.feature-pill:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ---------- Gallery ---------- */
.gallery-item {
  cursor: pointer;
}

.gallery-item img {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* ---------- Testimonial Cards ---------- */
.testimonials-grid .testimonial-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonials-grid .testimonial-card:hover {
  transform: translateY(-4px);
}

/* ---------- CTA Buttons ---------- */
.cta-primary {
  box-shadow: 0 4px 14px rgba(27, 67, 50, 0.3);
}

.cta-primary:hover {
  box-shadow: 0 8px 28px rgba(27, 67, 50, 0.35);
}

.cta-secondary {
  backdrop-filter: blur(4px);
}

/* ---------- Scroll Reveal (progressive enhancement) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }

  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }
  .reveal-delay-5 { transition-delay: 0.5s; }
  .reveal-delay-6 { transition-delay: 0.6s; }
}

/* ---------- Navbar Transition ---------- */
.navbar-scrolled {
  background: rgba(10, 28, 21, 0.95) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.navbar-scrolled .nav-link {
  color: rgba(250, 250, 245, 0.85) !important;
}

.navbar-scrolled .nav-link:hover {
  color: #FAFAF5 !important;
}

/* ---------- Mobile Menu ---------- */
.mobile-menu-open {
  opacity: 1 !important;
  pointer-events: all !important;
}

/* ---------- Smooth anchor offset ---------- */
section[id] {
  scroll-margin-top: 80px;
}

/* ---------- Form Focus ---------- */
input:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.1);
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .hero-headline {
    font-size: 3rem;
  }

  .section-title {
    font-size: 2.25rem;
  }
}