/* Work: code-only remainder. The look of the hero and the shelf is native Webflow (wk3-*, sh-* classes);
   this file only carries motion, the open/closed states the script toggles, and rules the Designer can't hold. */

/* ---------- hero: the rule draws, the labels and lede fade up, the headline rises word by word ---------- */
.wk3-meta::after{transform-origin:left;transform:scaleX(0);animation:wk3draw 1.2s cubic-bezier(.16,1,.3,1) .1s forwards}
.wk3-ml,.wk3-mr{opacity:0;transform:translateY(8px);animation:wk3in .8s cubic-bezier(.16,1,.3,1) .35s forwards}
.wk3-mr{animation-delay:.55s}
.wk3-lede{opacity:0;transform:translateY(14px);animation:wk3in .9s cubic-bezier(.16,1,.3,1) .7s forwards}
@keyframes wk3draw{to{transform:scaleX(1)}}@keyframes wk3in{to{opacity:1;transform:none}}
.wk3-h1 .wk3-s{display:block;text-wrap:balance}
.wk3-h1 .wr{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .03em .16em;margin:0 -.03em -.16em}
.wk3-h1 .wi{display:inline-block;transform:translateY(112%);transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
.wk3-h1.in .wi{transform:none}
/* the hero dot grid (HL Kit) runs edge to edge, from the top of the page, behind the copy */
.wk3-hero>.hl-field{left:calc(-1*var(--wk-gx,60px));right:calc(-1*var(--wk-gx,60px));top:calc(-1*var(--wk-gy,149px));bottom:-40px;z-index:-1}
.wk3-hero>*:not(.hl-field){position:relative;z-index:1}

/* ---------- shelf: the open/close is driven by GSAP in work.js (one timeline per change, interruptible), so no CSS
   transitions here: a CSS transition on a property GSAP writes every frame would lag behind it and stutter ---------- */
@media (min-width:768px){
  .sh-cover{will-change:transform,filter;transform-origin:50% 50%}
  .sh-card .lattice,.sh-card .lattice-breathe,.sh-spine,.sh-cap,.sh-shade{will-change:opacity}
  .sh-more{display:block}
  .sh-more-in{height:0;overflow:hidden}
}
/* credits: a project without a named client starts at the role */
.sh-cr-c:empty{display:none}

/* ---------- reduced motion (system setting or the site's Reduce motion switch) ---------- */
@media (prefers-reduced-motion:reduce){.wk3-meta::after,.wk3-ml,.wk3-mr,.wk3-lede{animation:none;opacity:1;transform:none}.wk3-h1 .wi{transform:none;transition:none}}
body.a11y-motion .wk3-meta::after,body.a11y-motion .wk3-ml,body.a11y-motion .wk3-mr,body.a11y-motion .wk3-lede{animation:none;opacity:1;transform:none}
body.a11y-motion .wk3-h1 .wi{transform:none;transition:none}