/* ============================================================================
   DEE'S AUTO REPAIR — "SHIFT" motion layer                          (2026-09-15)
   Canvas instruments live in shift.js (tach, gate). Here: headlines engage
   through a gate with a pause in neutral, the accent phrase carries a gold rule
   that clicks into place, content engages in one clean throw, cards pull in.
   ========================================================================== */

.tach{position:relative;width:100%;aspect-ratio:1/1;max-width:26rem;justify-self:center;background:var(--ink2);border:1px solid var(--line-w);border-radius:50%;overflow:hidden;box-shadow:0 30px 60px -36px rgba(0,0,0,.8),inset 0 0 0 10px rgba(0,0,0,.18)}
.tach canvas{position:absolute;inset:0;width:100%;height:100%}
.gate__stage{position:relative;width:100%;aspect-ratio:16/10;max-width:34rem;justify-self:center;background:var(--ink2);border:1px solid var(--line-w);border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.gate__stage canvas{position:absolute;inset:0;width:100%;height:100%}

/* 1. engage through the gate: two throws with a pause */
.js .engage{opacity:0}
.js .engage.in{animation:engage .9s cubic-bezier(.3,.9,.3,1) forwards}
@keyframes engage{0%{opacity:0;transform:translate(-18px,0)}35%{opacity:1;transform:translate(0,0)}55%{transform:translate(0,0)}100%{opacity:1;transform:none}}

/* 2. the rule clicks in */
.js .engage .y{position:relative;display:inline-block}
.js .engage .y::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:.1em;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}
.js .engage.in .y::after{animation:click .5s cubic-bezier(.3,1.4,.4,1) .6s forwards}
@keyframes click{to{transform:scaleX(1)}}

/* 3. one clean throw */
.js .fx{opacity:0;transform:translateY(12px)}
.js .fx.in{animation:throw .5s cubic-bezier(.3,1.2,.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 throw{to{opacity:1;transform:none}}

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

/* 5. cards */
.way,.rev,.chapter{transition:transform .28s cubic-bezier(.3,1.2,.4,1),box-shadow .3s,border-color .28s}
.way:hover,.rev:hover{border-color:var(--gold)}
.btn{transition:transform .22s cubic-bezier(.3,1.2,.4,1),box-shadow .22s,background .22s,color .22s}
.btn--gold:hover{}

@media (prefers-reduced-motion:reduce){
  .js .engage,.js .engage.in{opacity:1;transform:none;animation:none}
  .js .engage.in .y::after{animation:none;transform:scaleX(1)}
  .js .fx,.js .fx.in{opacity:1;transform:none;animation:none}
  .way:hover,.rev:hover,.btn--gold:hover{transform:none}
}