/* ==========================================================================
   ANIMAÇÕES E INTERATIVIDADE FLUIDA - DSI PESQUISA DE OPINIÃO
   ========================================================================== */

/* --------------------------------------------------------------------------
   CARROSSEL COM ROLAGEM LATERAL AUTOMÁTICA (INFINITE MARQUEE)
   -------------------------------------------------------------------------- */
.client-carousel-wrapper {
  overflow: hidden;
  background-color: var(--color-bg-main);
  padding: 45px 0;
  position: relative;
}

/* Máscara de desvanecimento nas laterais do carrossel */
.client-carousel-wrapper::before,
.client-carousel-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.client-carousel-wrapper::before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.client-carousel-wrapper::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.marquee-container {
  display: flex;
  width: max-content;
  animation: marquee-scroll 32s linear infinite;
}

.marquee-container:hover {
  animation-play-state: paused; /* Pausa ao passar o mouse para melhor UX */
}

.marquee-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  filter: grayscale(20%);
  opacity: 0.85;
  transition: all 0.3s ease;
  height: 55px;
}

.marquee-item:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Exatamente metade da largura total da lista duplicada para loop invisível */
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   INTERSECTION OBSERVER - REVELAÇÃO SUAVE NO SCROLL (FADE-IN-UP)
   -------------------------------------------------------------------------- */
.reveal-up {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

/* Atrasos escalonados para efeito em cascata nos cards Bento Grid */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* --------------------------------------------------------------------------
   MICRO-INTERAÇÕES CORPORATIVAS DE ELEVAÇÃO
   -------------------------------------------------------------------------- */
.hover-float {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-float:hover {
  transform: translateY(-5px);
}

.pulse-accent {
  animation: soft-pulse 3s infinite ease-in-out;
}

@keyframes soft-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(131, 207, 235, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(131, 207, 235, 0);
  }
}

/* Transições na Pílula do Cabeçalho durante a Rolagem */
.pill-header.scrolled {
  padding: 6px 6px 6px 24px;
  background-color: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 35px rgba(26, 52, 64, 0.12);
  border-color: #C0DEED;
}

@media (max-width: 991px) {
  .pill-header.scrolled {
    padding: 6px 6px 6px 18px;
  }
}