.avalicacoes-dos-clientes{

    box-sizing: border-box;
    min-height: 100vh;
    width: 100%;
    padding: 100px;
}

.texto-intro-avaliacoes{
    padding: 50px;
    text-align: center;
}

.nota-geral-avaliacao{
    font-size: 3rem;
    color: #00ff41;
}

.starts{
    width: 100%;
    display: flex;
    gap: 15px;
    justify-content: center;
}

.avalicacoes-dos-clientes h3{
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.btn-ver-mais-avaliacoes{
    border: #00ff41 0.5px solid;
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-block;
    transition: .5s;
}

.btn-ver-mais-avaliacoes:hover{
    transition: .5s;
    background-color: #00ff41;
}

.texto-intro-avaliacoes small i{
    color: #00ff41;
    font-size: 1rem;
    margin-bottom: 20px;
}


.conteiner-cards-avaliacoes{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.card-avalicacoes img{
    width: 30px;
}

.card-avalicacoes{
    
    animation: scaleWave 5s cubic-bezier(0.4, 0, 0.2, 1) ;
    
    border: 0.5px solid #00bb833a;
    padding: 20px;
    border-radius: 15px;
    transition: transform 0.4s ease;
    will-change: transform;
    overflow: hidden;
}

.card-avalicacoes h3{
    margin: 10px 0px;
    font-size: 1rem;
    text-transform: capitalize;
}

.card-avalicacoes  span i{
    color: #00ff41;
    margin-right: 5px;
    font-size: 0.7rem;
}


.card-avalicacoes p{
    font-weight: 200;
    margin-top: 15px;
    font-size: 0.8rem;
}

.card-avalicacoes small{
    margin-top: 15px;
    font-size: 0.5rem;
}





/* 2. Criação do facho de luz (sombra/reflexo metalizado diagonal) */




/* 4. Sequência de Atraso (Delay) para criar o efeito de onda card por card */
.conteiner-cards-avaliacoes .card-avalicacoes:nth-child(1) { animation-delay: 0s; }
.conteiner-cards-avaliacoes .card-avalicacoes:nth-child(2) { animation-delay: 0.2s; }
.conteiner-cards-avaliacoes .card-avalicacoes:nth-child(3) { animation-delay: 0.5s; }
.conteiner-cards-avaliacoes .card-avalicacoes:nth-child(4) { animation-delay: 0.7s; }
.conteiner-cards-avaliacoes .card-avalicacoes:nth-child(5) { animation-delay: 0.9s; }



/* Keyframes do fecho de luz passando */
@keyframes shineWave {
  0% {
    transform: rotate(35deg) translateY(-100%);
  }
  100% {
    transform: rotate(35deg) translateY(100%);
  }
}

/* Keyframes do leve scale */
@keyframes scaleWave {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03); /* Dá um zoom sutil de 3% no momento em que a luz passa */
  }
}


/* 1. Configuração base dos cards + animação automática em loop */
.card-avalicacoes {
  position: relative;
  overflow: hidden; /* Garante que o brilho não "vaze" para fora do card */
  will-change: transform;
  
  /* Animação do card (escala) */
  animation: scaleWave 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 2. Criação do facho de luz (reflexo metalizado diagonal) */
.card-avalicacoes::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 42%,
    rgba(255, 255, 255, 0.123) 50%, /* Brilho metalizado */
    transparent 58%
  );
  transform: rotate(35deg) translateY(-100%);
  pointer-events: none;
  
  /* Animação do brilho sincronizada para passar exatamente durante o zoom */
  animation: shineWave 35s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 3. Sequência de Atraso (Delay) individual e em onda para cada card */
.conteiner-cards-avaliacoes .card-avalicacoes:nth-child(1) { animation-delay: 0s; }
.conteiner-cards-avaliacoes .card-avalicacoes:nth-child(1)::after { animation-delay: 0s; }

.conteiner-cards-avaliacoes .card-avalicacoes:nth-child(2) { animation-delay: 0.3s; }
.conteiner-cards-avaliacoes .card-avalicacoes:nth-child(2)::after { animation-delay: 0.3s; }

.conteiner-cards-avaliacoes .card-avalicacoes:nth-child(3) { animation-delay: 0.6s; }
.conteiner-cards-avaliacoes .card-avalicacoes:nth-child(3)::after { animation-delay: 0.6s; }

.conteiner-cards-avaliacoes .card-avalicacoes:nth-child(4) { animation-delay: 0.9s; }
.conteiner-cards-avaliacoes .card-avalicacoes:nth-child(4)::after { animation-delay: 0.9s; }

.conteiner-cards-avaliacoes .card-avalicacoes:nth-child(5) { animation-delay: 1.2s; }
.conteiner-cards-avaliacoes .card-avalicacoes:nth-child(5)::after { animation-delay: 1.2s; }

/* 4. Keyframes do Zoom (cresce e volta) */
@keyframes scaleWave {
  0%, 70%, 100% {
    transform: scale(1);
    background-color: rgb(6, 63, 21);
  }
  25% {
    transform: scale(1.03); /* Pico do zoom exatamente quando a luz passa */
    background-color: rgb(6, 49, 43);
  }
}

/* 5. Keyframes do Brilho (passa no momento exato do zoom) */
@keyframes shineWave {
  0%, 10% {
    transform: rotate(35deg) translateY(-100%);
  }
  25%, 40% {
    transform: rotate(35deg) translateY(100%); /* O fecho de luz cruza o card aqui */
  }
  100% {
    transform: rotate(35deg) translateY(100%); /* Fica em repouso o resto do tempo */
  }
}


.bg-estrela{

  width: 50%;
  position: absolute;
  mix-blend-mode:lighten;
  filter: blur(15px);
  
  margin-left: 50%;
  transform: translateX(-50%);

}