/* Soft cursor-follow 3D tilt (Option A) for:
   - suburb .services-main-grid .service-card
   - .gds-trust-badges-grid .gds-trust-badge (homepage + suburbs)
   Paired with /js/suburb-service-tilt.js
   Text-quality: no permanent will-change; content on slight translateZ. */

.services-main-grid,
.gds-trust-badges-grid {
  perspective: 1000px;
}

.services-main-grid .service-card,
.gds-trust-badges-grid .gds-trust-badge {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.services-main-grid .service-card {
  transition:
    transform 0.15s ease-out,
    box-shadow 0.2s ease,
    border-color 0.3s ease,
    background 0.3s ease;
}

.gds-trust-badges-grid .gds-trust-badge {
  transition:
    transform 0.15s ease-out,
    box-shadow 0.2s ease;
}

/* Promote GPU layer only while interacting — permanent will-change blurs text */
.services-main-grid .service-card:hover,
.services-main-grid .service-card.is-tilting,
.gds-trust-badges-grid .gds-trust-badge:hover,
.gds-trust-badges-grid .gds-trust-badge.is-tilting {
  will-change: transform, box-shadow;
}

/* Content stays on a near-flat plane inside the tilt (sharper type) */
.services-main-grid .service-card > *,
.gds-trust-badges-grid .gds-trust-badge > * {
  transform: translateZ(0.1px);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Coarse / touch: subtle static lift on cards only (badges keep CSS hover scale) */
@media (hover: none), (pointer: coarse) {
  .services-main-grid .service-card:hover,
  .services-main-grid .service-card:active {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(11, 26, 46, 0.14);
  }

  .services-main-grid .service-card:hover,
  .services-main-grid .service-card:active,
  .services-main-grid .service-card.is-tilting,
  .gds-trust-badges-grid .gds-trust-badge:hover,
  .gds-trust-badges-grid .gds-trust-badge:active,
  .gds-trust-badges-grid .gds-trust-badge.is-tilting {
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-main-grid .service-card {
    transition: border-color 0.2s ease, background 0.2s ease !important;
    will-change: auto;
  }

  .gds-trust-badges-grid .gds-trust-badge {
    will-change: auto;
    /* leave transform alone so CSS hover scale still works */
  }

  .services-main-grid .service-card:hover,
  .services-main-grid .service-card:active,
  .services-main-grid .service-card.is-tilting {
    transform: none !important;
    box-shadow: 0 0 0 2px rgba(77, 178, 255, 0.55), 0 8px 24px rgba(0, 102, 204, 0.1) !important;
    will-change: auto;
  }

  .services-main-grid .service-card > *,
  .gds-trust-badges-grid .gds-trust-badge > * {
    transform: none;
  }
}