/* Keep hover movement independent of the scroll entrance transform. */
.home-services-grid .service.service__style--2,
.home-research-card {
  position: relative;
  overflow: visible;
  cursor: pointer;
  translate: 0 0;
  transition: translate 650ms cubic-bezier(0.05, 0.2, 0.1, 1);
}

.home-research-card {
  transition: translate 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}

.home-research-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 18px -3px var(--color-primary);
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}

@property --service-glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.home-services-grid .service.service__style--2 {
  isolation: isolate;
  border: 1px solid #edf1f8;
}

/* Unequal light arcs keep the outline softly irregular rather than uniformly lit. */
.home-services-grid .service.service__style--2::before,
.home-services-grid .service.service__style--2::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: #7644FF;
  --service-glow-arcs: conic-gradient(from var(--service-glow-angle, 0deg),
    transparent 0deg 22deg, #fff 48deg, transparent 86deg 150deg,
    #fff 178deg, transparent 204deg 262deg,
    #fff 304deg, transparent 338deg 360deg);
  /* Intersect the moving arcs with a hollow ring to keep the color at the edge. */
  -webkit-mask: var(--service-glow-arcs), linear-gradient(#fff 0 0), linear-gradient(#fff 0 0) content-box;
  -webkit-mask-composite: source-in, xor;
  mask: var(--service-glow-arcs), linear-gradient(#fff 0 0), linear-gradient(#fff 0 0) content-box;
  mask-composite: intersect, exclude;
  opacity: 0;
  transition: opacity 400ms ease;
  animation: service-edge-drift 8s linear infinite paused;
  pointer-events: none;
}

.home-services-grid .service.service__style--2::after {
  inset: -8px;
  padding: 8px;
  border-radius: 18px;
  filter: blur(5px);
}

@keyframes service-edge-drift {
  to { --service-glow-angle: 360deg; }
}

/* Replace the template's fixed-color shadow and touch hover movement. */
.home-services-grid .service.service__style--2:hover {
  box-shadow: none;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .home-services-grid .service.service__style--2:hover {
    translate: 0 -5px;
  }

  .home-research-card:hover {
    translate: 0 -10px;
  }

  .home-research-card:hover::before {
    opacity: 0.18;
  }

  .home-services-grid .service.service__style--2:hover::before {
    opacity: 0.4;
    animation-play-state: running;
  }

  .home-services-grid .service.service__style--2:hover::after {
    opacity: 0.12;
    animation-play-state: running;
  }
}

/* Content stays visible when JavaScript or IntersectionObserver is unavailable. */
.home-reveal-pending {
  opacity: 0;
  transform: translateY(24px);
}

.home-reveal-entering {
  animation: home-reveal 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: var(--home-reveal-delay, 0ms);
}

@keyframes home-reveal {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .home-reveal-pending,
  .home-reveal-entering {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .home-services-grid .service.service__style--2,
  .home-services-grid .service.service__style--2:hover,
  .home-services-grid .service.service__style--2::before,
  .home-services-grid .service.service__style--2::after,
  .home-research-card,
  .home-research-card:hover,
  .home-research-card::before {
    translate: none;
    transition: none;
    animation: none;
  }
}