/* =============================================
   Robe&Co. — Custom Styles
   ============================================= */

/* --- Smooth scroll --- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

/* --- Navbar scrolled state --- */
#navbar.scrolled {
  background: rgba(40, 40, 40, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* --- Hero fade-on-scroll --- */
.hero-content {
  transition: opacity 0.1s linear, transform 0.1s linear;
}

/* --- Scroll indicator animation --- */
.scroll-line {
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% {
    opacity: 1;
    transform: scaleY(1);
  }
  50% {
    opacity: 0.3;
    transform: scaleY(0.5);
  }
}

/* --- Reveal-on-scroll animations --- */
.reveal-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-up.delay-1 {
  transition-delay: 0.1s;
}

.reveal-up.delay-2 {
  transition-delay: 0.2s;
}

.reveal-up.delay-3 {
  transition-delay: 0.3s;
}

/* --- Service cards hover lift --- */
.service-card {
  transform: translateY(0);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease;
}

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

/* --- WhatsApp button pulse --- */
#whatsapp-btn {
  animation: whatsappPulse 3s ease-in-out infinite;
}

@keyframes whatsappPulse {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
  }
  50% {
    box-shadow: 0 4px 24px rgba(37, 211, 102, 0.5);
  }
}

/* --- Mobile menu hamburger animation --- */
#mobile-menu-btn.active #bar1 {
  transform: translateY(4px) rotate(45deg);
}

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

#mobile-menu-btn.active #bar3 {
  width: 1.5rem;
  transform: translateY(-4px) rotate(-45deg);
}

/* --- Selection color --- */
::selection {
  background: #fe8019;
  color: #1d2021;
}