/* Therapy Unlocked motion layer (loaded after facelift.css). Hidden states are set from JS only;
   everything here is either inert without JS or gated by the .motion class. */

/* skip link: first tab stop, hidden until focused */
.skip{position:absolute;left:16px;top:-64px;z-index:100;background:var(--sage-btn);color:#fff;padding:12px 20px;border-radius:999px;font-weight:600;font-size:15px;transition:top .3s var(--ease)}
.skip:focus{top:12px}
main:focus{outline:none}

/* heading mask: text rises through a clipped window, descenders kept */
.motion .m-mask{overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}

/* while GSAP drives an element, no CSS transition may fight it */
.m-run,.m-run *{transition:none!important}

/* hero leaf window drifts slowly with the scroll (var set from JS) */
@media (min-width:901px){
  .motion .hero .wrap::after,.motion .nf::after,.motion .eq-thanks::after{translate:0 calc(-50% + var(--leaf-y,0px))}
}

/* "Your first two weeks": a sage stem draws node to node */
.steps-draw::after{content:"";position:absolute;left:20px;top:19px;height:2px;border-radius:2px;background:var(--sage-text);
  width:calc(2*(100% - 80px)/3 + 80px - 20px);transform-origin:0 50%;transform:scaleX(var(--stem,0));pointer-events:none}
.steps-draw .step{opacity:.42;transition:opacity .9s var(--ease)}
.steps-draw .step.on{opacity:1}
.steps-draw .step .n{z-index:1;transform:scale(.82);transition:transform .9s var(--ease)}
.steps-draw .step.on .n{transform:none}
@media (max-width:900px){
  .steps-draw::after{left:19px;top:20px;bottom:20px;width:2px;height:auto;transform-origin:50% 0;transform:scaleY(var(--stem,0))}
}