/* v241: restrained pointer-responsive depth for the homepage service cards. */
html[data-theme] body main .showcase-service-card[data-card-motion="ready"] {
  --v241-card-accent: var(--light-card-accent, var(--home-card-accent, #49c6cf));
  --v241-tilt-x: 0deg;
  --v241-tilt-y: 0deg;
  --v241-glow-x: 50%;
  --v241-glow-y: 42%;
  backface-visibility: hidden;
  transform: perspective(960px) translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) !important;
  transform-origin: 50% 70%;
  transform-style: preserve-3d;
  transition:
    transform 460ms cubic-bezier(.16, 1, .3, 1),
    border-color 260ms ease,
    box-shadow 460ms cubic-bezier(.16, 1, .3, 1),
    filter 320ms ease !important;
  will-change: transform;
}

html[data-theme] body main .showcase-service-card[data-card-motion="ready"]::before {
  transform: scale(1);
  transform-origin: var(--v241-glow-x) var(--v241-glow-y);
  transition: transform 620ms cubic-bezier(.16, 1, .3, 1), opacity 280ms ease !important;
}

html[data-theme] body main .showcase-service-card[data-card-motion="ready"]::after {
  background:
    radial-gradient(
      circle at var(--v241-glow-x) var(--v241-glow-y),
      color-mix(in srgb, var(--v241-card-accent) 28%, white),
      transparent 24%
    ),
    linear-gradient(110deg, transparent 34%, rgba(255, 255, 255, .2), transparent 64%) !important;
  opacity: .48 !important;
  transition: transform 700ms cubic-bezier(.16, 1, .3, 1), opacity 260ms ease !important;
}

html[data-theme] body main section.home-hero-showcase .showcase-service-card[data-card-motion="ready"] > span,
html[data-theme] body main section.home-hero-showcase .showcase-service-card[data-card-motion="ready"] > small {
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transition:
    transform 460ms cubic-bezier(.16, 1, .3, 1),
    box-shadow 320ms ease,
    border-color 260ms ease !important;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  html[data-theme] body main .showcase-service-card[data-card-motion="ready"]:is(:hover, :focus-visible) {
    z-index: 2;
    border-color: var(--v241-card-accent) !important;
    filter: saturate(1.1) contrast(1.035) brightness(1.035) !important;
    box-shadow:
      0 34px 68px rgba(2, 8, 16, .44),
      0 0 0 1px color-mix(in srgb, var(--v241-card-accent) 54%, transparent),
      0 0 34px color-mix(in srgb, var(--v241-card-accent) 24%, transparent),
      inset 0 1px rgba(255, 255, 255, .18) !important;
    transform:
      perspective(960px)
      translate3d(0, -9px, 0)
      scale(1.018)
      rotateX(var(--v241-tilt-x))
      rotateY(var(--v241-tilt-y)) !important;
  }

  html[data-theme="light"] body main .showcase-service-card[data-card-motion="ready"]:is(:hover, :focus-visible) {
    box-shadow:
      0 34px 68px rgba(36, 58, 68, .28),
      0 0 0 1px color-mix(in srgb, var(--v241-card-accent) 48%, transparent),
      0 0 30px color-mix(in srgb, var(--v241-card-accent) 18%, transparent),
      inset 0 1px rgba(255, 255, 255, .96) !important;
  }

  html[data-theme] body main .showcase-service-card[data-card-motion="ready"]:is(:hover, :focus-visible)::before {
    opacity: .76 !important;
    transform: scale(1.075);
  }

  html[data-theme="light"] body main .showcase-service-card[data-card-motion="ready"]:is(:hover, :focus-visible)::before {
    opacity: 1 !important;
  }

  html[data-theme] body main .showcase-service-card[data-card-motion="ready"]:is(:hover, :focus-visible)::after {
    opacity: .92 !important;
    transform: translateX(64%);
  }

  html[data-theme] body main section.home-hero-showcase .showcase-service-card[data-card-motion="ready"]:is(:hover, :focus-visible) > span {
    border-color: color-mix(in srgb, var(--v241-card-accent) 62%, transparent) !important;
    box-shadow:
      0 18px 34px rgba(2, 7, 12, .3),
      0 0 0 1px color-mix(in srgb, var(--v241-card-accent) 24%, transparent),
      inset 0 1px rgba(255, 255, 255, .12) !important;
    transform: translate3d(0, -4px, 22px);
  }

  html[data-theme] body main section.home-hero-showcase .showcase-service-card[data-card-motion="ready"]:is(:hover, :focus-visible) > small {
    border-color: color-mix(in srgb, var(--v241-card-accent) 42%, transparent) !important;
    box-shadow: 0 18px 34px rgba(2, 7, 12, .28), inset 0 1px rgba(255, 255, 255, .1) !important;
    transform: translate3d(0, -2px, 14px);
  }

  html[data-theme="light"] body main section.home-hero-showcase .showcase-service-card[data-card-motion="ready"]:is(:hover, :focus-visible) > :is(span, small) {
    box-shadow: 0 18px 34px rgba(23, 35, 45, .2), inset 0 1px rgba(255, 255, 255, .96) !important;
  }

  html[data-theme] body main .showcase-service-card[data-card-motion="ready"]:active {
    transition-duration: 110ms !important;
    transform: perspective(960px) translate3d(0, -3px, 0) scale(.992) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] body main .showcase-service-card[data-card-motion="ready"],
  html[data-theme] body main .showcase-service-card[data-card-motion="ready"]:is(:hover, :focus-visible, :active),
  html[data-theme] body main .showcase-service-card[data-card-motion="ready"]::before,
  html[data-theme] body main .showcase-service-card[data-card-motion="ready"]:is(:hover, :focus-visible)::before,
  html[data-theme] body main .showcase-service-card[data-card-motion="ready"]::after,
  html[data-theme] body main .showcase-service-card[data-card-motion="ready"]:is(:hover, :focus-visible)::after,
  html[data-theme] body main section.home-hero-showcase .showcase-service-card[data-card-motion="ready"] > :is(span, small) {
    transition: none !important;
    transform: none !important;
  }
}