/* Simples — added interaction (M9–M13)
 *
 * Sits on top of the signed-off motion set (M1 reveal / M4 glyph morph /
 * M7 dark parallax / M8 accordion). Nothing here changes template markup, layout,
 * type or spacing — it only adds movement, so the pages still measure identically
 * to the design handoff.
 *
 * All of it is scoped to .js and paired with simples-motion-extra.js. To switch the
 * whole layer off, drop the two enqueues in functions.php: the site falls back to
 * exactly the approved four motions.
 *
 * Vocabulary is deliberately the existing one — hairline, 8px signal square, the
 * four geometric glyphs. No new colours, no shadows, no easing curves beyond the
 * two already in use.
 */

/* ---- M9 repeating rows: signal hairline draws left→right on hover ----
   Applies to every repeating element in the system, so pages without list rows
   (contact, engine, services, case pages) get the same treatment on their data
   blocks and steps. */
a.row, a.crow, a.post, a.nxt,
.stat, .tot, .st, .kpi, .step, .ap, .acc-item {
  position: relative;
}

a.row::after, a.crow::after, a.post::after, a.nxt::after,
.stat::after, .tot::after, .st::after, .kpi::after, .step::after, .ap::after, .acc-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}

a.row:hover::after, a.crow:hover::after, a.post:hover::after, a.nxt:hover::after,
.stat:hover::after, .tot:hover::after, .st:hover::after, .kpi:hover::after,
.step:hover::after, .ap:hover::after, .acc-item:hover::after,
.acc-item.is-open::after {
  transform: scaleX(1);
}

/* mono row numbers pick up the signal alongside the line */
a.row:hover .no, a.crow:hover .no, .step:hover .no, .ap:hover .no {
  color: var(--signal);
}

a.row .no, a.crow .no, .step .no, .ap .no {
  transition: color var(--t-fast);
}

/* the → slides on hover (grid items are blockified, so no display change needed) */
a.row .arr, a.crow .arr, a.post .arr {
  transition: transform 260ms cubic-bezier(.2, .7, .2, 1);
}

a.row:hover .arr, a.crow:hover .arr, a.post:hover .arr {
  transform: translateX(6px);
}

/* ---- M10 nav: 5px signal square marks hover and the current page ---- */
.nav-list a, .menu-body a {
  position: relative;
}

.nav-list a::before, .menu-body a::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--signal);
  transform: scale(0);
  transition: transform 200ms cubic-bezier(.2, .7, .2, 1);
}

.nav-list a::before {
  left: -12px;
  top: .62em;
}

.menu-body a::before {
  left: -12px;
  top: 1.05em;
}

.nav-list a:hover::before, .nav-list a[aria-current]::before,
.menu-body a:hover::before, .menu-body a[aria-current]::before {
  transform: scale(1);
}

/* ---- M11 / M12 hero geometry: follows the pointer, drifts with scroll ----
   Offsets and rotation are written by simples-motion-extra.js. */
[data-glyphs] .glyph {
  transition: transform 600ms cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}

/* ---- M13 staggered entry ----
   Children of a revealing section arrive in sequence rather than all at once.
   The delay is set per child by the script. */
.js [data-reveal] [data-stagger] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms ease var(--sd, 0ms), transform 420ms cubic-bezier(.2, .7, .2, 1) var(--sd, 0ms);
}

.js [data-reveal].is-in [data-stagger] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  a.row::after, a.crow::after, a.post::after, a.nxt::after,
  .stat::after, .tot::after, .st::after, .kpi::after, .step::after, .ap::after, .acc-item::after,
  .nav-list a::before, .menu-body a::before,
  [data-glyphs] .glyph,
  .js [data-reveal] [data-stagger] {
    transition: none;
  }

  .js [data-reveal] [data-stagger] {
    opacity: 1;
    transform: none;
  }
}