/* =========================================
   SERVIÇOS PREMIUM + ANIMAÇÃO
========================================= */

.grid-servicos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:25px;
  margin-top:50px;
}

/* CARD */
.service-card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  height:320px;
  cursor:pointer;

  opacity:0;

  box-shadow:
    0 10px 30px rgba(0,0,0,.25);

  transition:
    transform .45s ease,
    box-shadow .45s ease,
    opacity .8s ease;
}

/* esquerda */
.service-card.anim-left{
  transform:
    translateX(-80px)
    translateY(40px)
    scale(.96);
}

/* direita */
.service-card.anim-right{
  transform:
    translateX(80px)
    translateY(40px)
    scale(.96);
}

/* aparece */
.service-card.show{
  opacity:1;
  transform:
    translateX(0)
    translateY(0)
    scale(1);
}

/* imagem */
.service-card img{
  width:100%;
  height:100%;
  object-fit:cover;

  transition:
    transform .8s ease,
    filter .6s ease;
}

/* overlay */
.service-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.58) 45%,
      rgba(0,0,0,.18) 100%);

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  padding:28px;
  z-index:2;
}

/* título */
.service-overlay h3{
  color:#fff;
  font-size:24px;
  font-weight:700;
  margin-bottom:10px;

  opacity:.95;

  text-shadow:
    0 2px 12px rgba(0,0,0,.8);

  transition:.4s ease;
}

/* texto */
.service-overlay p{
  color:rgba(255,255,255,.82);

  font-size:15px;
  line-height:1.5;

  opacity:.88;

  max-width:90%;

  transition:.4s ease;
}

/* brilho */
.service-card::before{
  content:"";

  position:absolute;
  top:-100%;
  left:-40%;

  width:70%;
  height:300%;

  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,.25),
      transparent);

  transform:rotate(25deg);

  transition:1s;
  z-index:3;
}

/* hover */
.service-card:hover{
  transform:
    translateY(-12px)
    scale(1.02);

  box-shadow:
    0 20px 45px rgba(0,0,0,.45);
}

.service-card:hover::before{
  left:140%;
}

.service-card:hover img{
  transform:scale(1.12);
  filter:brightness(.75);
}

/* MOBILE */
@media(max-width:768px){

  .grid-servicos{
    gap:18px;
  }

  .service-card{
    height:260px;
  }

  .service-card.anim-left,
  .service-card.anim-right{
    transform:
      translateY(50px)
      scale(.96);
  }

  .service-card.show{
    transform:
      translateY(0)
      scale(1);
  }

  .service-overlay{
    padding:22px;
  }

  .service-overlay h3{
    font-size:20px;
  }

  .service-overlay p{
    font-size:14px;
    max-width:100%;
  }

}

/* PARALLAX SUAVE */

.service-card img{
  will-change:transform;
}