/* ============================================================================
   BENTWRENCH — "TORQUE" motion layer                                (2026-09-15)
   Canvas instruments live in torque.js (wrench, noise). Here: headlines arrive in
   one short deliberate pull that stops hard at spec, the accent phrase carries a
   ratchet line that advances in notches, content seats with a hard stop, cards
   lift a hair on hover. Nothing floats; everything is torqued down.
   ========================================================================== */

.wrench{position:relative;width:100%;aspect-ratio:1/1;max-width:30rem;justify-self:center;background:var(--ink2);border:1px solid var(--line-w);border-radius:16px;overflow:hidden}
.wrench canvas{position:absolute;inset:0;width:100%;height:100%}
.noise__scope{position:relative;width:100%;aspect-ratio:16/10;max-width:34rem;justify-self:center;background:#181B1F;border:1px solid var(--line-w);border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.noise__scope canvas{position:absolute;inset:0;width:100%;height:100%}

/* 1. one pull, hard stop */
.js .pull{opacity:0}
.js .pull.in{animation:pull .42s cubic-bezier(.3,1.4,.4,1) forwards}
@keyframes pull{0%{opacity:0;transform:translateX(-14px)}100%{opacity:1;transform:none}}

/* 2. the ratchet line */
.js .pull .y{position:relative;display:inline-block}
.js .pull .y::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:.12em;background:repeating-linear-gradient(90deg,currentColor 0 .35em,transparent .35em .55em);opacity:.5;clip-path:inset(0 100% 0 0)}
.js .pull.in .y::after{animation:ratchet .8s steps(8,end) .3s forwards}
@keyframes ratchet{to{clip-path:inset(0 0 0 0)}}

/* 3. content seats */
.js .fx{opacity:0;transform:translateY(12px)}
.js .fx.in{animation:seat .4s cubic-bezier(.3,1.3,.4,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 seat{to{opacity:1;transform:none}}

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

/* 5. cards */
.rule,.rev,.chapter{transition:transform .24s cubic-bezier(.3,1.3,.4,1),box-shadow .28s,border-color .24s}
.rule:hover,.rev:hover{border-color:var(--acc)}
.btn{transition:transform .2s cubic-bezier(.3,1.3,.4,1),box-shadow .2s,background .2s,color .2s}
.btn--acc:hover{}

@media (prefers-reduced-motion:reduce){
  .js .pull,.js .pull.in{opacity:1;transform:none;animation:none}
  .js .pull.in .y::after{animation:none;clip-path:inset(0 0 0 0)}
  .js .fx,.js .fx.in{opacity:1;transform:none;animation:none}
  .rule:hover,.rev:hover,.btn--acc:hover{transform:none}
}