/* The selected ribbon direction: a continuous textile current behind the garments. */
.collection{isolation:isolate;--art-travel:0;--ribbon-repeat:1350px}
.collection-art{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:clip;border-radius:inherit}
.art-viewport{position:sticky;top:0;height:100svh;overflow:hidden;contain:paint}
.ribbon-field{position:absolute;inset:0}
.ribbon-flow{position:absolute;left:-28%;top:calc(var(--ribbon-repeat)*-1);width:155%;height:calc(100% + var(--ribbon-repeat));background:url('assets/ribbon-thread.svg') 50% 0 / 100% var(--ribbon-repeat) repeat-y;animation:ribbon-down 48s linear infinite}
.ribbon-flow-secondary{left:-63%;width:170%;opacity:.34;animation-duration:67s;animation-delay:-31s}
@keyframes ribbon-down{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,var(--ribbon-repeat),0)}}

/* Each needle, its eye, and the attached thread are one drawing. */
.sewing-motif{position:absolute;width:clamp(210px,24vw,365px);height:auto;overflow:visible;opacity:.76;transform:translate3d(0,calc(var(--art-travel)*220px),0)}
.sewing-motif-one{right:-1%;top:20%}
.sewing-motif-two{left:0%;top:63%;width:clamp(220px,25vw,390px)}
.needle-drift{animation:needle-down 23s linear infinite;will-change:transform,opacity}
.sewing-motif-two .needle-drift{animation-duration:29s;animation-delay:-13s}
@keyframes needle-down{0%{transform:translateY(-75px);opacity:0}12%{opacity:1}84%{opacity:1}100%{transform:translateY(155px);opacity:0}}
.loose-thread{fill:none;stroke:#b18c50;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.thread-shadow{fill:none;stroke:#6382cf;stroke-width:.8;opacity:.44}
.thread-stitches{fill:none;stroke:#6684c8;stroke-width:1.1;stroke-dasharray:5 7;opacity:.5}
.needle-metal{fill:#e3e8f2;stroke:#7084ad;stroke-width:1.3;fill-rule:evenodd}
.needle-shine{fill:none;stroke:#fff;stroke-width:1.2;stroke-linecap:round}
.needle-eye{fill:none;stroke:#647da9;stroke-width:1}
.collection[data-motion="paused"] .ribbon-flow,.collection[data-motion="paused"] .needle-drift{animation-play-state:paused}
.collection:not([data-art-active="true"]) .ribbon-flow,.collection:not([data-art-active="true"]) .needle-drift{animation-play-state:paused;will-change:auto}
.collection[data-art-active="true"][data-motion="playing"] .ribbon-flow{will-change:transform}
.background-motion{margin-left:auto;border:1px solid #2c41672e;border-radius:30px;padding:10px 14px;min-height:40px;display:flex;gap:10px;align-items:center;background:#ffffffb3;color:#35435f;font-size:11px;cursor:pointer}
.background-motion:hover{background:#fff;border-color:#314cb166}
.background-motion:focus-visible{outline:2px solid #173ce8;outline-offset:3px}
.background-motion[hidden]{display:none}
.collection-toolbar{gap:22px}
.product-caption{position:relative;z-index:1}
@media(max-width:700px){
  .collection{--ribbon-repeat:960px}
  .ribbon-flow{left:-65%;width:230%;animation-duration:44s}
  .ribbon-flow-secondary{left:-115%;width:240%;animation-duration:61s}
  .sewing-motif{width:190px}.sewing-motif-one{right:-48px;top:15%}.sewing-motif-two{left:-44px;top:64%;width:210px}
  .collection-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:13px}.collection-toolbar>.filters{grid-column:1/-1;justify-content:flex-end}
  .collection-toolbar>span{font-size:9px;letter-spacing:.5px}
  .background-motion{margin-left:0;padding:9px 11px;min-height:40px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .ribbon-field,.ribbon-flow,.sewing-motif,.needle-drift{animation:none!important;transform:none!important;will-change:auto}
  .needle-drift{opacity:1}
}