/* ============================================================
   MOTION: the five signals, for every theme-rendered page.
   Authority: Alvin Design Voice Section 0 non-negotiable 5.

   Before this, only the homepage, About and Chiropractic carried
   text animation or a .fx mobile twin. Measured: text animation 0
   on blog articles and the blog index, and no .fx anywhere except
   chiro.js. Everything here is gated behind prefers-reduced-motion.
   ============================================================ */

/* ---- 3. text animation: word-level heading reveal ---------------- */
.js-anim .tc-split-word{
  display:inline-block;
  opacity:0;
  transform:translateY(0.5em);
  transition:opacity .62s var(--ease), transform .62s var(--ease);
  will-change:opacity, transform;
}
.js-anim .tc-split-word.in{opacity:1;transform:none}

/* ---- 4 + 5. hover, with a .fx twin that mobile gets on scroll ----
   Every rule below is written once for :hover and once for .fx so a
   touch device sees the same state change as a pointer device. Each
   moves the TEXT colour and a visual property, per non-negotiable 5. */
.svc-card:hover, .svc-card.fx{
  transform:translateY(-6px);
  background:var(--coral);
  border-color:transparent;
  box-shadow:var(--shadow-md);
}
.svc-card:hover h3, .svc-card.fx h3,
.svc-card:hover p,  .svc-card.fx p{color:#fff}

.tc-fig:hover img, .tc-fig.fx img{
  transform:scale(1.03);
  box-shadow:var(--shadow-md);
}
.tc-fig img{transition:transform .55s var(--ease), box-shadow .55s var(--ease)}
.tc-fig:hover figcaption, .tc-fig.fx figcaption{
  color:var(--navy);
  border-left-color:var(--teal);
}
.tc-fig figcaption{transition:color .35s var(--ease), border-color .35s var(--ease)}

.post-next-card:hover, .post-next-card.fx{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:rgba(5,127,126,.35);
}
.post-next-card:hover h3, .post-next-card.fx h3{color:var(--teal)}

.tc-post-card:hover, .tc-post-card.fx{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:rgba(5,127,126,.35);
}
.tc-post-card:hover h3, .tc-post-card.fx h3{color:var(--teal)}
.tc-post-card:hover .more, .tc-post-card.fx .more{color:var(--navy)}

.svc-steps li:hover, .svc-steps li.fx{
  transform:translateX(4px);
  border-color:rgba(5,127,126,.4);
  box-shadow:var(--shadow-md);
}
.svc-steps li:hover .svc-step-n, .svc-steps li.fx .svc-step-n{
  background:var(--teal);color:#fff;
}
.svc-steps li{transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease)}
.svc-steps .svc-step-n{transition:background .4s var(--ease), color .4s var(--ease)}

.loc-fact:hover .k, .loc-fact.fx .k{color:#fff}
.loc-fact{transition:transform .4s var(--ease)}
.loc-fact:hover, .loc-fact.fx{transform:translateY(-3px)}

.svc-checks li:hover, .svc-checks li.fx{color:var(--teal)}
.svc-checks li{transition:color .3s var(--ease)}

/* ---- reduced motion: everything above stands down ---------------- */
@media (prefers-reduced-motion:reduce){
  .js-anim .tc-split-word{opacity:1!important;transform:none!important;transition:none!important}
  .svc-card,.tc-fig img,.post-next-card,.tc-post-card,.svc-steps li,.loc-fact{transition:none!important}
  .svc-card:hover,.svc-card.fx,
  .post-next-card:hover,.post-next-card.fx,
  .tc-post-card:hover,.tc-post-card.fx,
  .svc-steps li:hover,.svc-steps li.fx,
  .loc-fact:hover,.loc-fact.fx{transform:none!important}
  .tc-fig:hover img,.tc-fig.fx img{transform:none!important}
}