/* ==========================================================================
   A1A Surveying — Motion (active on the home page)

   Two effects, both cheap and both safe at any width:
     1. Slide-up service cards
     2. Count-up stat band

   (The plat backdrop behind the page is the third piece of motion — its
   styles live in site.css, next to the layers it moves.)

   Nothing here is positioned relative to a feature inside an image, so it
   lands identically in every browser and at every screen size.

   Optional motions the site is NOT running by default (hero parallax,
   reveal on scroll, station rail) live in motion-optional.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Slide-up service cards
   The detail panel rests just below the card and slides up over the face.
   Desktop: on hover. Touch: on tap (JS flips aria-expanded).
   -------------------------------------------------------------------------- */

.svc__panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--paper-2);
  border-top: 2px solid var(--aqua-600);
  border-radius: var(--r-md);

  /* translate3d, not translateY: it puts the panel on its own compositor
     layer, so sliding it is a GPU move rather than a repaint of the card's
     rounded clip and background texture every frame. That is what takes the
     judder out of it. */
  transform: translate3d(0, 100%, 0);
  transition: transform var(--dur-card) var(--ease-card);
  will-change: transform;
  backface-visibility: hidden;
}

.svc__panel h4 { margin: 0 0 12px; font-size: clamp(20px, 1.9vw, 22px); }
.svc__panel p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.svc__panel .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--space-5); }

/* Open state — set by main.js on tap/keyboard, everywhere. */
.svc[data-open="true"] .svc__panel { transform: translate3d(0, 0, 0); }

/* Pointer devices also open it on hover. Gated on (hover: hover) so a card
   tapped on a phone does not get stuck open by a lingering hover state.
   Deliberately NOT :focus-within — that would fight the click toggle, since
   clicking a card also moves focus into it. Keyboard users press the
   "Details" button, which sets data-open above. */
@media (hover: hover) and (pointer: fine) {
  .svc:hover .svc__panel { transform: translate3d(0, 0, 0); }
}

/* The title lifts a touch as the panel comes up, on the same curve so the
   two movements read as one. */
.svc__title { transition: transform var(--dur-card) var(--ease-card); }
.svc[data-open="true"] .svc__title { transform: translate3d(0, -6px, 0); }

@media (hover: hover) and (pointer: fine) {
  .svc:hover .svc__title { transform: translate3d(0, -6px, 0); }
}


/* --------------------------------------------------------------------------
   2. Count-up stat band
   The numbers are written into the HTML at their final value so they read
   correctly with JavaScript off; main.js zeroes them and counts up when the
   band scrolls into view.
   -------------------------------------------------------------------------- */

.stat__value[data-count] { font-variant-numeric: tabular-nums; }


/* --------------------------------------------------------------------------
   Reduced motion
   Everything above resolves to its finished state — no drift, no slide.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .svc__panel,
  .svc__title { transition: none; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}