/* DRONEHAZE V21 / two separate, reversible scroll choreographies.
   Scope: home statement + selected work only. Progressive enhancement. */
html.dh21-motion .home .statement .dh-statement-type .dh-line--one > .dh-wordline {
  opacity: calc(.13 + .87 * var(--dh-t1, 1)) !important;
  transform-origin: left center;
  transform: translate3d(calc((1 - var(--dh-t1, 1)) * -75px), calc((1 - var(--dh-t1, 1)) * 62px), 0)
    scale(calc(1.34 - .34 * var(--dh-t1, 1))) !important;
  clip-path: inset(0 calc((1 - var(--dh-t1, 1)) * 94%) 0 0);
}
html.dh21-motion .home .statement .dh-statement-type .dh-line--two > .dh-wordline {
  opacity: calc(.08 + .92 * var(--dh-t2, 1)) !important;
  transform-origin: right center;
  transform: translate3d(calc((1 - var(--dh-t2, 1)) * 75px), calc((1 - var(--dh-t2, 1)) * 66px), 0)
    scale(calc(1.26 - .26 * var(--dh-t2, 1))) !important;
  clip-path: inset(0 0 0 calc((1 - var(--dh-t2, 1)) * 94%));
}
html.dh21-motion .home .statement .dh-statement-type .dh-line--two::after {
  height: clamp(3px, .36vw, 5px);
  width: clamp(115px, 31vw, 380px);
  transform: scaleX(var(--dh-tline, 1));
}
/* Give the short copy a visible but less theatrical follow-through. */
html.dh21-motion .home .statement[data-dh-kinetic] > p:last-child {
  opacity: calc(.25 + .75 * var(--dh-copy, 1)) !important;
  transform: translate3d(0,calc((1 - var(--dh-copy, 1)) * 34px),0) !important;
}
/* WORK: editorial horizontal image-wipe with a hairline scanner and quiet labels.
   The outer links always remain in the document flow and keyboard accessible. */
html.dh21-motion .home .work .work-grid > .work-item {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
html.dh21-motion .home .work .section-head .overline {
  opacity: calc(.38 + .62 * var(--dh21-head, 1));
  transform: translate3d(calc((1 - var(--dh21-head, 1)) * -22px),0,0);
}
html.dh21-motion .home .work .section-head h2 {
  opacity: calc(.25 + .75 * var(--dh21-head, 1));
  transform: translate3d(0,calc((1 - var(--dh21-head, 1)) * 30px),0);
}
html.dh21-motion .home .work .work-item figure {
  position: relative;
  isolation: isolate;
}
html.dh21-motion .home .work .work-item figure > img {
  clip-path: inset(0 calc((1 - var(--dh21-reveal, 1)) * 100%) 0 0);
  transform: scale(calc(1.12 - .12 * var(--dh21-reveal, 1)));
  transition: filter .85s ease; /* Keep existing hover color, but not its scale override. */
}
html.dh21-motion .home .work .work-item figure::after {
  content: '';
  position: absolute;
  z-index: 4;
  top: 0;
  left: calc(var(--dh21-reveal, 1) * 100%);
  width: 2px;
  height: 100%;
  background: #fb3449;
  opacity: var(--dh21-sweep, 0);
  pointer-events: none;
}
html.dh21-motion .home .work .work-item .work-marker {
  opacity: var(--dh21-label, 1);
}
html.dh21-motion .home .work .work-item .work-meta {
  opacity: calc(.14 + .86 * var(--dh21-label, 1));
  transform: translate3d(0,calc((1 - var(--dh21-label, 1)) * 23px),0);
}
html.dh21-motion .home .work .work-item:hover figure > img {
  transform: scale(calc(1.165 - .12 * var(--dh21-reveal, 1)));
  filter: saturate(1.1);
}
@media (max-width: 760px) {
  html.dh21-motion .home .statement .dh-statement-type .dh-line--one > .dh-wordline {
    transform: translate3d(calc((1 - var(--dh-t1, 1)) * -26px), calc((1 - var(--dh-t1, 1)) * 38px),0)
      scale(calc(1.18 - .18 * var(--dh-t1, 1))) !important;
  }
  html.dh21-motion .home .statement .dh-statement-type .dh-line--two > .dh-wordline {
    transform: translate3d(calc((1 - var(--dh-t2, 1)) * 26px), calc((1 - var(--dh-t2, 1)) * 38px),0)
      scale(calc(1.14 - .14 * var(--dh-t2, 1))) !important;
  }
  html.dh21-motion .home .work .work-item figure > img {
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* Reduced-distance equivalents still reveal content on user-controlled scroll. */
  html.dh21-motion .home .statement .dh-statement-type .dh-line--one > .dh-wordline {
    transform: translate3d(0, calc((1 - var(--dh-t1, 1)) * 14px),0) scale(1) !important;
  }
  html.dh21-motion .home .statement .dh-statement-type .dh-line--two > .dh-wordline {
    transform: translate3d(0, calc((1 - var(--dh-t2, 1)) * 14px),0) scale(1) !important;
  }
  html.dh21-motion .home .work .work-item figure > img { transform: none !important; }
}