/* ===== v2 MOTION LAYER (27 Oct 2026). Source: rebwand-studio/tools/rebwand-hackett-v2/motion.css. Only applies under
   html.mo (set by motion.js when motion is allowed), so reduced motion is v1 exactly. ===== */

/* 1. the fluid cursor sits over everything and takes no clicks */

/* 3. headings rise line by line out of a mask */
.mo .h-w{display:inline-block;vertical-align:top;padding:.08em .08em .5em;margin:-.08em -.08em -.5em;
  /* the words rise through a soft edge, not a hard line (his note, 30 Oct: "anyway to fix this harsh line on this animation?"):
     a mask that fades out over the bottom of the word's box replaces the hard overflow clip; room at the sides keeps
     Bricolage's round letters whole. The waiting words start 170% down, wholly under the soft edge, so no letter tops
     show before the rise (his note, 30 Oct: "still ready to come up but visible, looks tacky") */
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - .44em),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - .44em),transparent);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.mo .h-wi{display:inline-block;will-change:transform;transform:translate3d(0,170%,0)}

/* 4. rolling labels */
.rl{display:inline-flex;position:relative;overflow:hidden;vertical-align:bottom;line-height:1.25}
.rl-a,.rl-b{display:inline-flex;white-space:pre}
.rl-b{position:absolute;left:0;top:0}
.rl-c{display:inline-block;transition:transform .5s var(--e);transition-delay:calc(var(--i) * 14ms)}
.rl-b .rl-c{transform:translate3d(0,110%,0)}
@media(hover:hover){
  .btn:hover .rl-a .rl-c,.go:hover .rl-a .rl-c,.hero-go:hover .rl-a .rl-c,.cb button:hover .rl-a .rl-c{transform:translate3d(0,-110%,0)}
  .btn:hover .rl-b .rl-c,.go:hover .rl-b .rl-c,.hero-go:hover .rl-b .rl-c,.cb button:hover .rl-b .rl-c{transform:none}
}

/* 5. magnetic controls spring back */
.mo .btn,.mo .hd-burger,.mo .sl-nav button,.mo .cb button,.mo .mn-x{transition:transform .6s cubic-bezier(.2,1.4,.4,1),background .3s ease,color .3s ease,border-color .3s ease}

/* 6. the hero card leans; it keeps its place in the layout */
.mo .card{will-change:transform;transform-style:preserve-3d}

/* 7. the tickers are driven by the scroll, not the clock */
.mo .tk-r{animation:none;will-change:transform}

/* 8. the work resolves out of blocks */
.px-c{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:grayscale(1) contrast(1.08) brightness(.9);image-rendering:pixelated;transition:opacity .35s ease}

/* 10. the process pins on laptops: the section is the runway, the stage holds */
html.pin-on #how{height:320vh;padding:0}
html.pin-on .how-pin{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:6rem 0 3rem}
html.pin-on .how-pin .pr-grid{margin-top:3.5rem}
html.pin-on .cols{height:clamp(20rem,44svh,30rem)}
.how-prog{display:none}
html.pin-on .how-prog{display:block;margin:1.5rem var(--gut) 0 calc(var(--gut) + (100% - 2 * var(--gut) - 2rem) / 2.75 + 2rem);height:1px;background:var(--line);overflow:hidden}
.how-prog i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}

/* 11. the business slider wipes in from the right and settles from a zoom */
.mo .sl-ph figure{opacity:1;visibility:visible;transition:none;clip-path:inset(0 0 0 100%)}
.mo .sl-ph figure.was{clip-path:inset(0);z-index:1}
.mo .sl-ph figure.on{clip-path:inset(0);z-index:2;transition:clip-path .9s cubic-bezier(.77,0,.18,1)}
.mo .sl-ph figure img{transform:scale(1.14);transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.mo .sl-ph figure.on img{transform:none}
.mo .sl-ph figure figcaption{opacity:0;transform:translateY(.5rem);transition:opacity .5s ease .35s,transform .7s var(--e) .35s}
.mo .sl-ph figure.on figcaption{opacity:1;transform:none}

/* 12. the cards that lean */
.mo .svc,.mo .bx{transition:opacity .8s var(--e),transform .7s var(--e),border-color .3s ease;will-change:transform}
@media(hover:hover){.mo .svc:hover,.mo .bx:hover{border-color:rgba(255,255,255,.22)}}

/* answers come into focus as they open */
.mo .q-a p{filter:blur(6px);opacity:0;transition:filter .6s ease,opacity .5s ease}
.mo .q.on .q-a p{filter:none;opacity:1;transition-delay:.12s}

/* cards and tiles arrive one after another */
.mo .grid3 .tile:nth-child(3n+2),.mo .bento .bx:nth-child(2),.mo .feat > :nth-child(2),.mo .sv .svc:nth-child(2){transition-delay:.1s}
.mo .grid3 .tile:nth-child(3n),.mo .bento .bx:nth-child(3),.mo .feat > :nth-child(3),.mo .sv .svc:nth-child(3){transition-delay:.2s}
.mo .bento .bx:nth-child(4){transition-delay:.3s}

/* 13. the footer's name: each letter of "rebwand" can thin toward the pointer */
.ft-wm .fl-c{display:inline-block;width:auto;transition:font-weight .35s ease}

/* 14. the menu's links rise in one after another */
.mo .mn-l a{opacity:0;transform:translate3d(0,1.5rem,0);transition:opacity .5s ease,transform .8s var(--e),color .3s ease}
html.mo.menu-open .mn-l a{opacity:1;transform:none;transition:opacity .5s ease calc(.15s + var(--i) * 60ms),transform .8s var(--e) calc(.15s + var(--i) * 60ms),color .25s ease 0s}



/* 1. the pointer's canvas: behind the content, over the textured ground, takes no clicks */
.fx-fluid{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;display:block}
/* on laptops the grid is drawn in 3D by the pointer's canvas (motion.js 1); the flat CSS grid stands down */
.fx3d .bgx-grid{display:none}
/* v3: the plugged-in price cards lean like v2's cards and arrive one after another */
.mo .mp-card{transition:transform .7s var(--e),border-color .3s ease;will-change:transform}
@media(hover:hover){.mo .mp-card:not(.mp-bundle):hover{border-color:rgba(255,255,255,.22)}}
.mo .mp-grid .mp-card:nth-child(2){transition-delay:.1s}.mo .mp-grid .mp-card:nth-child(3){transition-delay:.2s}