/* ==========================================================================
   DESIGN SYSTEM & CUSTOM STYLES — BELLEZZA VERONA
   ========================================================================== */

/* Smooth Scroll Behavior */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Offset for sticky navbar */
}

/* Custom Base Configuration */
body {
  font-family: 'Outfit', sans-serif;
  background-color: #FDFBF7; /* Cream background */
  color: #121212; /* Obsidian deep text */
}

/* Serif font overrides */
.font-serif {
  font-family: 'Playfair Display', serif;
}

/* Premium Hero Blending Background */
.hero-bg {
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.55)),
    url('https://images.unsplash.com/photo-1560066984-138dadb4c035?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Gold Title Accent Lines */
.section-title::after {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  background: linear-gradient(90deg, #DCB97A, #B87B2E);
  margin: 16px auto 0;
  border-radius: 4px;
}

/* Elegant Service Card Image Animation */
.card-img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover .card-img {
  transform: scale(1.05);
}

/* Floating WhatsApp Pulse Anim Ring */
.pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
  animation: pulse 2.2s infinite cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Scroll Reveal Effect Animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Gallery Filter Transition Animations */
.gallery-item {
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-item.hidden-item {
  opacity: 0;
  transform: scale(0.92);
  pointer-events: none;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Dynamic FAQ Accordion Transitions */
.faq-content {
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item.active {
  background-color: #FFFDF9;
  border-color: #DCB97A;
  box-shadow: 0 10px 25px -10px rgba(184, 123, 46, 0.12);
}
.faq-item.active .faq-icon {
  transform: rotate(180deg);
  color: #B87B2E;
}

/* Premium Dynamic Interactive Calculator Active States */
.calc-label {
  transition: all 0.25s ease;
}
.calc-label:has(input:checked) {
  background-color: rgba(184, 123, 46, 0.08);
  border-color: rgba(220, 185, 122, 0.6);
  box-shadow: 0 4px 15px -3px rgba(184, 123, 46, 0.15);
}

/* Active buttons in the gallery filtering system */
.gallery-filter-btn.active {
  background-color: #B87B2E;
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 8px 20px -6px rgba(184, 123, 46, 0.4);
}