/* ClickLocal - inner-page interaction layer (2 Sep 2026).
   Same rules as the homepage: motion only when it tells the reader something
   (a step completing, a figure counting to its real value, a list arriving in order).
   Every element is readable at rest; if JS never runs nothing is hidden. */

/* staggered reveal for sibling cards: fx.js sets --d per element */
.rv{transition-delay:var(--d,0ms)}

/* ---- numbered process steps: complete one after another ---- */
.steps .step{position:relative;transition:border-color .3s}
.steps .step::before{transition:color .3s,transform .3s;transform-origin:left center}
.steps .step>div{transition:opacity .45s ease,transform .45s ease}
.steps.fx-armed .step::before{color:var(--dim)}
.steps.fx-armed .step>div{opacity:.35;transform:translateX(8px)}
.steps.fx-armed .step.fx-on::before{color:var(--accent);transform:scale(1.12)}
.steps.fx-armed .step.fx-on>div{opacity:1;transform:none}
.step:hover h4{color:var(--accent);transition:color .2s}

/* ---- symptom / scope lists: one line at a time, mark first ---- */
.rv.in .pains li,.rv.in .checks li{animation:fxLine .45s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*70ms)}
.rv.in .pains li::before,.rv.in .checks li::before{animation:fxMark .35s ease both;animation-delay:calc(var(--i,0)*70ms + 120ms)}
.pains li,.checks li{transition:color .2s}
.pains li:hover,.checks li:hover{color:var(--text)}
@keyframes fxLine{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes fxMark{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

/* ---- stat bar: figures count up (fx.js), unit mark fades in after ---- */
.statbar b i{transition:opacity .3s;transition-delay:1.2s}
.statbar.fx-armed:not(.fx-done) b i{opacity:0}

/* ---- case-study metric tiles arrive in sequence ---- */
.cs-card.in .cs-metrics>div{animation:fxTile .4s ease both;animation-delay:calc(var(--i,0)*90ms + 200ms)}
@keyframes fxTile{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- FAQ: single-open accordion with an easing answer ---- */
.faq details p{animation:fxAnswer .32s ease both}
.faq summary{transition:color .2s}
.faq summary:hover{color:var(--accent)}
@keyframes fxAnswer{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---- cards: a quieter version of the homepage tile lift ---- */
.card.rv,.cs-card.rv{transition:opacity .55s ease,transform .55s ease,border-color .25s,box-shadow .25s}
.card .more{transition:opacity .25s,transform .25s}

/* ---- page hero eyebrow: the same cursor tick the homepage console uses ---- */
.page-hero .eyebrow::after{content:"▍";color:var(--accent);margin-left:6px;animation:fxBlink 1.1s steps(1) infinite}
.page-hero .lead-card .eyebrow::after{content:none}
.page-hero .statbar{margin-top:36px}
@keyframes fxBlink{50%{opacity:0}}

@media (prefers-reduced-motion: reduce){
  .rv{transition-delay:0ms}
  .rv.in .pains li,.rv.in .checks li,.rv.in .pains li::before,.rv.in .checks li::before,.cs-card.in .cs-metrics>div,.faq details p,.page-hero .eyebrow::after{animation:none}
  .steps.fx-armed .step>div{opacity:1;transform:none}
  .steps.fx-armed .step::before{color:var(--accent)}
}