/* =========================================================
   The Inward Lab: motion tied to scrolling (18/10) — driven by assets/js/scrollfx.js on every device.
   Progress p (0 → 1) = how far the element has travelled up the screen; scrolling back reverses it.
   · [data-sfx=zip]            statement: one line per phrase, alternate sides, zipped to the centre by the scroll
   · [data-sfx=em-from-right]  (kept for reuse) a phrase travels in from the right edge to its place
   · [data-sfx=words]          method heading: words come into full light one by one
   · [data-sfx=type]           quote + contact heading: typed out, with a caret, as you scroll
   · [data-sfx=method]         the thread fills across the four steps; each step lights as it is reached
   Without JavaScript, or with reduced motion, every element simply shows its final state.
   ========================================================= */
.method-track { position: relative; height: 2px; margin-top: var(--s6); background: rgba(239,235,224,.14); }
.method-fill { position: absolute; inset: 0; background: var(--sage-brand); transform-origin: left center; }
.method .steps { margin-top: var(--s4); }
.method .step .rule { display: none; }   /* the shared thread replaces the four separate rules */

/* states exist only once scrollfx.js has taken an element over (.sfx) */
.sfx-em em { display: inline-block; will-change: transform; }
.sfx-words .w { color: rgba(239,235,224,.24); transition: color .9s var(--ease-ui); }
.sfx-words .w.on { color: var(--on-night); }
.sfx-type .c { opacity: 0; }
.sfx-type .c.on { opacity: 1; }
.sfx-type .c.caret { box-shadow: 2px 0 0 0 currentColor; }
.sfx-type.done .c.caret { box-shadow: none; }

.method-fill.sfx-fill { transform: scaleX(0); }
.method-fill.sfx-fill::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%;
  background: var(--taupe); box-shadow: 0 0 0 6px rgba(179,182,155,.22); }
.sfx-method .step { opacity: .32; transform: translateY(14px); transition: opacity 1.1s var(--ease-ui), transform 1.1s var(--ease-ui); }
.sfx-method .step .sn { transition: color .4s var(--ease-ui); }
.sfx-method .step .h3 { position: relative; display: inline-block; }
.sfx-method .step .h3::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--taupe); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-ui) .2s; }
.sfx-method .step.lit { opacity: 1; transform: none; }
.sfx-method .step.lit .sn { color: var(--taupe-light); }
.sfx-method .step.lit .h3::after { transform: scaleX(1); }
.sfx-method .step.now .sn::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--taupe-light); margin-right: 8px; vertical-align: middle; }
/* the scroll lights the steps here, so their one-time xoro entries step aside (one element, one motion) */
html.wdx-js .sfx-method .step [data-v] { visibility: visible !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .sfx-em em, .sfx-method .step, .sfx-zip .zl { transform: none !important; opacity: 1 !important; }
}