/* ============================================================================
   WADE TIRE — "ROTATION" motion layer                               (2026-09-15)
   Canvas instruments live in rotation.js (roll, corners). Here: headlines sweep
   in on an arc, the accent phrase carries four tread marks that step across one
   at a time, cards arrive cornering and settle, the four-corner grid lights in
   sequence. Everything moves in fours.
   ========================================================================== */

.roll{position:absolute;left:0;right:0;bottom:0;pointer-events:none}
.roll canvas{position:absolute;inset:0;width:100%;height:100%}
.corners__stage{position:relative;width:100%;aspect-ratio:1/1.15;max-width:30rem;justify-self:center;background:var(--ink2);border:1px solid var(--line-w);border-radius:14px;overflow:hidden}
.corners__stage canvas{position:absolute;inset:0;width:100%;height:100%}

/* 1. on an arc */
.js .arc{opacity:0}
.js .arc.in{animation:arcin .7s cubic-bezier(.22,.9,.24,1) forwards}
@keyframes arcin{0%{opacity:0;transform:translate(-16px,10px) rotate(-1.1deg)}100%{opacity:1;transform:none}}

/* 2. four tread marks, stepped */
.js .arc .y{position:relative;display:inline-block}
.js .arc .y::after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:.14em;background:repeating-linear-gradient(90deg,currentColor 0 14%,transparent 14% 25%);opacity:.45;clip-path:inset(0 100% 0 0)}
.js .arc.in .y::after{animation:stepfour .9s steps(4,end) .45s forwards}
@keyframes stepfour{to{clip-path:inset(0 0 0 0)}}

/* 3. cornering in */
.js .fx{opacity:0;transform:translateY(15px) rotate(-.5deg)}
.js .fx.in{animation:corner .46s cubic-bezier(.2,1.2,.3,1) forwards}
.js .fx.d1.in{animation-delay:.09s}.js .fx.d2.in{animation-delay:.18s}.js .fx.d3.in{animation-delay:.27s}.js .fx.d4.in{animation-delay:.36s}
@keyframes corner{0%{opacity:0;transform:translateY(15px) rotate(-.5deg)}70%{opacity:1;transform:translateY(-3px) rotate(.2deg)}100%{opacity:1;transform:none}}

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

/* 5. the four corners light in sequence */
.js .quad__cell{transition:transform .3s cubic-bezier(.2,1.2,.3,1),box-shadow .3s,border-color .3s}
.js .quad__cell:hover{border-color:var(--acc)}
.js .quad__cell .quad__k{transition:background .3s}
.js .quad__cell:hover .quad__k{background:var(--acc);color:#fff}

/* 6. the band advances in four steps */
.band{position:relative;overflow:hidden}
.band::after{content:"";position:absolute;top:0;bottom:0;left:0;width:25%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc) 24%,transparent),transparent);animation:fourstep 6.4s steps(4,end) infinite;pointer-events:none}
@keyframes fourstep{from{transform:translateX(-100%)}to{transform:translateX(400%)}}

.rev{transition:transform .24s cubic-bezier(.2,1.25,.3,1),box-shadow .28s}
.rev:hover{}
.btn{transition:transform .22s cubic-bezier(.18,.8,.3,1),box-shadow .22s,background .22s,color .22s}
.btn--acc:hover{}

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