/* Move the animated hairline from the gallery to the existing footer rule. */
html #work .wl-index-controls { border-top-color: transparent; }
footer[data-framer-name="Footer · native shared structure"] [data-framer-name="footer rule"].wl-portfolio-seam {
  position: relative;
  background-color: transparent;
}
.wl-portfolio-seam__line {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
  color: var(--ink, #171813);
  isolation: isolate;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.6%, #000 98.4%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 1.6%, #000 98.4%, transparent);
}
.wl-portfolio-seam__line > span {
  position: absolute;
  inset-block: 0;
  display: block;
  pointer-events: none;
  animation-play-state: paused;
}
.wl-portfolio-seam__ground {
  inset-inline: 0;
  background: currentColor;
  opacity: .16;
  animation: wl-seam-breath 12.6s ease-in-out -3.8s infinite;
}
.wl-portfolio-seam__draw {
  left: 0;
  width: 63%;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, currentColor 5%, currentColor 76%, transparent);
  animation: wl-seam-draw 9.8s cubic-bezier(.4, 0, .2, 1) -2.7s infinite;
}
.wl-portfolio-seam__return {
  right: 0;
  width: 49%;
  transform-origin: right center;
  background: linear-gradient(90deg, transparent, currentColor 28%, currentColor 91%, transparent);
  animation: wl-seam-return 14.2s cubic-bezier(.4, 0, .2, 1) -8.4s infinite;
}
.wl-portfolio-seam__trace {
  left: 12%;
  width: 21%;
  background: linear-gradient(90deg, transparent, currentColor 40%, currentColor 64%, transparent);
  animation: wl-seam-trace 7.7s ease-in-out -4.1s infinite;
}
.wl-portfolio-seam__light {
  left: 0;
  width: clamp(120px, 23%, 320px);
  background: linear-gradient(90deg, transparent, var(--bg, #FCFCF9) 48%, transparent);
  opacity: 0;
  transform: translate3d(var(--wl-seam-x, -400px), 0, 0);
  transition: transform 420ms cubic-bezier(.22, .61, .36, 1), opacity 500ms ease;
}
.wl-portfolio-seam[data-seam-running] .wl-portfolio-seam__line > span {
  animation-play-state: running;
}
.wl-portfolio-seam[data-seam-running] .wl-portfolio-seam__light {
  opacity: var(--wl-seam-near, 0);
}
@keyframes wl-seam-breath {
  0%, 100% { opacity: .09; }
  28% { opacity: .21; }
  51% { opacity: .035; }
  77% { opacity: .15; }
}
@keyframes wl-seam-draw {
  0%, 100% { transform: scaleX(.04); opacity: 0; }
  17% { transform: scaleX(.36); opacity: .54; }
  39% { transform: scaleX(1); opacity: .38; }
  56% { transform: scaleX(.94); opacity: .08; }
  73% { transform: scaleX(.52); opacity: .27; }
  88% { transform: scaleX(.08); opacity: 0; }
}
@keyframes wl-seam-return {
  0%, 100% { transform: scaleX(.15); opacity: .08; }
  25% { transform: scaleX(.87); opacity: .29; }
  48% { transform: scaleX(1); opacity: .48; }
  66% { transform: scaleX(.63); opacity: .04; }
  84% { transform: scaleX(.28); opacity: .19; }
}
@keyframes wl-seam-trace {
  0%, 100% { transform: translate3d(-55%, 0, 0) scaleX(.35); opacity: 0; }
  24% { transform: translate3d(22%, 0, 0) scaleX(.72); opacity: .26; }
  49% { transform: translate3d(126%, 0, 0) scaleX(1); opacity: .46; }
  74% { transform: translate3d(241%, 0, 0) scaleX(.64); opacity: .15; }
  91% { transform: translate3d(310%, 0, 0) scaleX(.24); opacity: 0; }
}
html.motion-paused .wl-portfolio-seam__line > span {
  animation-play-state: paused !important;
}
html.motion-paused .wl-portfolio-seam__light {
  opacity: 0 !important;
  transition: none;
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  footer[data-framer-name="Footer · native shared structure"] [data-framer-name="footer rule"].wl-portfolio-seam {
    background-color: var(--line, #E3E3DC);
  }
  .wl-portfolio-seam__line { display: none; }
}
@media (forced-colors: active) {
  footer[data-framer-name="Footer · native shared structure"] [data-framer-name="footer rule"].wl-portfolio-seam { background-color: CanvasText; forced-color-adjust: none; }
}