/* ============================================================================
   WILLIS FURNITURE — "THE SHOWFLOOR" motion layer                   (2026-09-15)
   Canvas instruments live in showfloor.js (floor, delivery). Here: headlines
   are set down with weight and settle, a rug unrolls beneath the accent phrase,
   cards are placed like pieces on a floor, cushions compress on hover.
   ========================================================================== */

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

/* 1. set down with weight */
.js .place{opacity:0}
.js .place.in{animation:place .8s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes place{0%{opacity:0;transform:translateY(-10px) scale(1.02)}70%{opacity:1;transform:translateY(2px) scale(.995)}100%{opacity:1;transform:none}}

/* 2. the rug unrolls */
.js .place .y{position:relative;display:inline-block}
.js .place .y::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:-.12em;height:.09em;background:var(--amber);border-radius:2px;transform:scaleX(0);transform-origin:0 50%}
.js .place.in .y::after{animation:unroll .9s cubic-bezier(.2,.8,.2,1) .45s forwards}
@keyframes unroll{to{transform:scaleX(1)}}

/* 3. placed */
.js .fx{opacity:0;transform:translateY(12px)}
.js .fx.in{animation:set .6s cubic-bezier(.2,.9,.2,1) forwards}
.js .fx.d1.in{animation-delay:.1s}.js .fx.d2.in{animation-delay:.2s}.js .fx.d3.in{animation-delay:.3s}.js .fx.d4.in{animation-delay:.4s}
@keyframes set{to{opacity:1;transform:none}}

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

/* 5. cushions compress */
.piece,.rev,.chapter{transition:transform .35s cubic-bezier(.2,.9,.2,1),box-shadow .35s,border-color .35s}
.piece:hover,.rev:hover{transform:translateY(2px) scale(.995);box-shadow:0 10px 24px -18px rgba(0,0,0,.4);border-color:var(--amber)}
.btn{transition:transform .25s cubic-bezier(.2,.9,.2,1),box-shadow .25s,background .25s,color .25s}
.btn--ink:hover{transform:translateY(1px);box-shadow:0 8px 20px -12px rgba(30,43,56,.7)}

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