/* ============================================================================
   BOBBY TYSON'S — "BALANCE" motion layer                            (2026-09-15)
   Canvas instruments live in balance.js (wheel, tread, torque). This is the CSS
   half: headings spin up a few degrees and stop dead level, the accent phrase
   gets a tread band that rolls beneath it, cards seat like a bead on a rim,
   the trust plate stamps, and nothing overshoots.
   ========================================================================== */

.wheel{aspect-ratio:1}
.hero__wheel,.phero__wheel{position:absolute}
.torque__hub.wheel{position:relative}
.wheel canvas{position:absolute;inset:0;width:100%;height:100%}
.tread{display:block;width:100%;height:34px;overflow:hidden}
.tread canvas{display:block;width:100%;height:100%}

/* 1. spin up, stop true */
.js .spin{opacity:0}
.js .spin.in{animation:spin .8s cubic-bezier(.2,1.1,.3,1) forwards}
@keyframes spin{0%{opacity:0;transform:rotate(-2.2deg) translateY(10px);transform-origin:0 100%}70%{opacity:1}100%{opacity:1;transform:none}}

/* 2. the tread band under the accent phrase */
.js .spin .y{position:relative;display:inline-block}
.js .spin .y::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:.14em;background:repeating-linear-gradient(90deg,var(--yolk) 0 .55em,transparent .55em .8em);transform:scaleX(0);transform-origin:0 50%}
.js .spin.in .y::after{animation:roll .9s cubic-bezier(.2,.9,.2,1) .45s forwards}
@keyframes roll{to{transform:scaleX(1)}}

/* 3. bead pops onto the rim */
.js .fx{opacity:0;transform:translateY(14px) scale(.985);transition:opacity .7s cubic-bezier(.2,1.1,.3,1),transform .7s cubic-bezier(.2,1.1,.3,1)}
.js .fx.in{opacity:1;transform:none}
.js .fx.d1{transition-delay:.08s}.js .fx.d2{transition-delay:.16s}.js .fx.d3{transition-delay:.24s}.js .fx.d4{transition-delay:.32s}

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

/* 5. hover torques a card a fraction, then holds */
.card,.svc,.rev,.rack li{transition:transform .22s cubic-bezier(.2,1.3,.35,1),box-shadow .22s,border-color .22s,background .22s}
.card:hover,.svc:hover,.rev:hover{}
.rack li:hover{background:var(--yolk);color:var(--navy);border-color:var(--yolk)}

/* 6. the button seats */
.btn{transition:transform .2s cubic-bezier(.2,1.3,.35,1),background .2s,color .2s,box-shadow .2s}
.btn--yolk:hover{}

@media (prefers-reduced-motion:reduce){
  .js .spin,.js .spin.in{opacity:1;animation:none}
  .js .spin.in .y::after{animation:none;transform:scaleX(1)}
  .js .fx{opacity:1;transform:none;transition:none}
  .card:hover,.svc:hover,.rev:hover,.btn--yolk:hover{transform:none}
}