/* ============================================================================
   ANDERSON MECHANICAL — "SUPPLY & RETURN" motion layer              (2026-09-15)
   Canvas instruments live in authority.js (house, tuneup). Here: headings come in
   on a slow current and settle; the accent phrase gets a gold rule that draws in
   from the left like a register opening; content drifts up; the shield motif
   draws itself; cards lift on a draught.
   ========================================================================== */

.house{position:relative;width:100%;aspect-ratio:4/3;max-width:36rem;border-radius:12px;overflow:hidden;border:1px solid var(--line-w);box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.house canvas{position:absolute;inset:0;width:100%;height:100%}
.tuneup__stage{position:relative;width:100%;aspect-ratio:4/3;max-width:32rem;justify-self:center;border-radius:12px;overflow:hidden;border:1px solid var(--line-w);box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.tuneup__stage canvas{position:absolute;inset:0;width:100%;height:100%}

/* 1. headings on a current */
.js .drift{opacity:0}
.js .drift.in{animation:driftin .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes driftin{0%{opacity:0;transform:translateX(-18px)}60%{opacity:1;transform:translateX(3px)}100%{opacity:1;transform:none}}

/* 2. the register opens under the accent */
.js .drift .y{position:relative;display:inline-block}
.js .drift .y::after{content:"";position:absolute;left:0;bottom:-.06em;height:.08em;width:100%;background:var(--acc);transform:scaleX(0);transform-origin:left}
.js .drift.in .y::after{animation:reg .7s cubic-bezier(.2,.8,.2,1) .55s forwards}
@keyframes reg{to{transform:scaleX(1)}}

/* 3. content drifts up */
.js .fx{opacity:0;transform:translateY(14px)}
.js .fx.in{animation:up .6s cubic-bezier(.2,.8,.2,1) forwards}
.js .fx.d1.in{animation-delay:.08s}.js .fx.d2.in{animation-delay:.16s}.js .fx.d3.in{animation-delay:.24s}.js .fx.d4.in{animation-delay:.32s}
@keyframes up{to{opacity:1;transform:none}}
.js .fx.drift{transform:none}
.js .fx.drift.in{animation:driftin .9s cubic-bezier(.2,.8,.2,1) forwards}

/* 4. the shield draws itself */
.motif{width:6.5rem;color:var(--acc);margin-bottom:1.2rem}
.js .motif path{stroke-dasharray:200;stroke-dashoffset:200}
.js .motif.in path{animation:drawline 1.2s cubic-bezier(.3,.8,.3,1) forwards}
.js .motif.in .m2{animation-delay:.4s}.js .motif.in .m3{animation-delay:.9s}
@keyframes drawline{to{stroke-dashoffset:0}}

/* 5. pinned stage */
.tuneup.is-pinned .tuneup__pin{position:sticky;top:0;height:100vh;display:grid;align-items:center}
.tuneup.is-pinned .stage{opacity:.3;transition:opacity .35s ease,transform .35s cubic-bezier(.25,.85,.2,1);transform:translateX(-8px)}
.tuneup.is-pinned .stage.is-on{opacity:1;transform:none}
.tuneup.is-pinned .stage.is-done{opacity:.6;transform:none}
.tuneup.is-flat .stage{opacity:.55;transition:opacity .35s}
.tuneup.is-flat .stage.is-on{opacity:1}

/* 6. cards on a draught */
.reg,.rev,.chapter,.plan,.ph{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s}
.reg:hover,.rev:hover,.plan:hover{border-color:var(--acc);}
.ph img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.ph:hover img{transform:scale(1.03)}
.btn{transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s,color .2s}
.btn--acc:hover{box-shadow:0 12px 26px -12px rgba(224,165,38,.7)}
.hd__phone svg{transform-origin:50% 60%}
.hd__phone:hover svg{animation:ring .5s ease-in-out 2}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}

@media (prefers-reduced-motion:reduce){
  .js .drift,.js .drift.in,.js .fx,.js .fx.in{opacity:1;transform:none;animation:none}
  .js .drift .y::after,.js .drift.in .y::after{transform:none;animation:none}
  .js .motif path{stroke-dashoffset:0;animation:none}
  .hd__phone:hover svg{animation:none}
  .reg:hover,.rev:hover,.plan:hover,.ph:hover img{transform:none}
}