.services .section-label,

.services .services-head {

  opacity: 0;

  transform: translateY(28px);

  transition:

    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),

    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);

}

.services .service-grid {

  transform: scaleX(0.86);

  transform-origin: left;

  transition: transform 1s 0.16s cubic-bezier(0.22, 1, 0.36, 1);

}

.services .service-card {

  opacity: 0;

  transform: translateY(42px);

  transition:

    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),

    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),

    background 0.35s ease;

}

.services .service-card:nth-child(2) {

  transition-delay: 0.14s;

}

.services.is-visible .section-label,

.services.is-visible .services-head,

.services.is-visible .service-card {

  opacity: 1;

  transform: translateY(0);

}

.services.is-visible .services-head {

  transition-delay: 0.08s;

}

.services.is-visible .service-grid {

  transform: scaleX(1);

}

.services .service-card:before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(

    120deg,

    transparent 25%,

    rgba(255, 255, 255, 0.035) 48%,

    transparent 72%

  );

  transform: translateX(-110%);

  transition: transform 0.8s ease;

  pointer-events: none;

}

.services .service-card {

  position: relative;

}

.services .service-card:hover {

  background: rgba(255, 255, 255, 0.025);

  transform: translateY(-4px);

}

.services .service-card:hover:before {

  transform: translateX(110%);

}

.services .service-number {

  display: inline-block;

  transition:

    transform 0.35s ease,

    text-shadow 0.35s ease;

}

.services .service-card:hover .service-number {

  transform: translateX(5px);

  text-shadow: 0 0 15px rgba(189, 213, 74, 0.55);

}

@media (prefers-reduced-motion: reduce) {

  .services .section-label,

  .services .services-head,

  .services .service-grid,

  .services .service-card {

    opacity: 1;

    transform: none;

    transition: none;

  }

  .services .service-card:before {

    display: none;

  }

}
