/* ============================================================================
   D & M AUTO REPAIR — "TEARDOWN" motion layer                       (2026-09-15)
   Canvas instruments live in teardown.js (engine, lift). Here: headings come in
   like a bay door going up; the accent phrase gets a torque stripe; content is
   set down on the bench; the sign strip runs like their banner; the gear draws.
   ========================================================================== */

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

/* 1. bay door */
.js .door{opacity:0}
.js .door.in{animation:door .7s cubic-bezier(.2,.9,.25,1) forwards}
@keyframes door{from{clip-path:inset(100% 0 0 0);opacity:1;transform:translateY(8px)}to{clip-path:inset(0 0 0 0);opacity:1;transform:none}}

/* 2. torque stripe */
.js .door .y{position:relative;display:inline-block}
.js .door .y::after{content:"";position:absolute;left:0;bottom:-.08em;height:.1em;width:100%;background:repeating-linear-gradient(90deg,var(--acc) 0 .6em,transparent .6em .85em);transform:scaleX(0);transform-origin:left}
.js .door.in .y::after{animation:stripe .6s steps(8) .45s forwards}
@keyframes stripe{to{transform:scaleX(1)}}

/* 3. set down on the bench */
.js .fx{opacity:0;transform:translateY(12px)}
.js .fx.in{animation:setdown .45s cubic-bezier(.2,.9,.3,1) forwards}
.js .fx.d1.in{animation-delay:.07s}.js .fx.d2.in{animation-delay:.14s}.js .fx.d3.in{animation-delay:.21s}.js .fx.d4.in{animation-delay:.28s}
@keyframes setdown{70%{opacity:1;transform:translateY(-2px)}100%{opacity:1;transform:none}}
.js .fx.door{transform:none}
.js .fx.door.in{animation:door .7s cubic-bezier(.2,.9,.25,1) forwards}

/* 4. the sign strip runs */
.sign{overflow:hidden;background:var(--acc);color:var(--ink);border-block:3px solid var(--ink)}
.sign__track{display:flex;gap:2.4rem;width:max-content;padding-block:.7rem;animation:sign 38s linear infinite;font-family:'Chakra Petch',system-ui,sans-serif;font-weight:700;font-size:.92rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.sign__track span::before{content:"\2605";margin-right:2.4rem;font-size:.7em;vertical-align:.1em}
@keyframes sign{to{transform:translateX(-50%)}}

/* 5. gear mark draws itself */
.motif{width:6.5rem;color:var(--acc-lite);margin-bottom:1.2rem}
.js .motif circle,.js .motif path{stroke-dasharray:160;stroke-dashoffset:160}
.js .motif.in circle,.js .motif.in path{animation:drawgear 1.1s cubic-bezier(.3,.8,.3,1) forwards}
.js .motif.in .m2{animation-delay:.35s}.js .motif.in .m3{animation-delay:.7s}
@keyframes drawgear{to{stroke-dashoffset:0}}

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

/* 7. surfaces */
.bin,.rev,.chapter,.ph{transition:transform .25s cubic-bezier(.2,.9,.3,1),box-shadow .25s,border-color .25s}
.bin:hover,.rev: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,.9,.3,1),box-shadow .2s,background .2s,color .2s}
.btn--acc:hover{box-shadow:0 12px 26px -12px rgba(242,106,27,.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 .door,.js .door.in,.js .fx,.js .fx.in{opacity:1;transform:none;animation:none;clip-path:none}
  .js .door .y::after,.js .door.in .y::after{transform:none;animation:none}
  .sign__track{animation:none;width:auto;flex-wrap:wrap;white-space:normal}
  .js .motif circle,.js .motif path{stroke-dashoffset:0;animation:none}
  .hd__phone:hover svg{animation:none}
  .bin:hover,.rev:hover,.ph:hover img{transform:none}
}