/*
 * "Trusted by nonprofits everywhere" customer logo wall (homepage).
 * One-colour logos (Donor Fuse dark green #2D413D), all the same visual size, on a
 * grid tilted 45 degrees, drift upwards in an endless random stream built by customer-logos.js; hovering a logo
 * zooms it a little and shows the customer's original logo (background removed) in the same spot.
 * Without JavaScript, or with "reduce motion", the static list is shown as a still grid.
 */
.dfl { overflow: hidden; }
.dfl h2 { margin-top: 0; margin-bottom: 2.5rem; }
.dfl-window { position: relative; }

/* ---- static list: still grid (no JS / reduced motion) and screen-reader list ---- */
.dfl .dfl-static {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dfl .dfl-static li { position: relative; margin: 0; padding: 0; height: 3rem; }
.dfl-static img { display: block; height: 3rem; width: auto; max-width: 9rem; object-fit: contain; }
.dfl-static .dfl-color { display: none; }
/* The green images never take the mouse: right-click / "open image in new tab" / drag only ever
   reach the original logo (loaded on hover), never the green one. */
.dfl .dfl-mono { pointer-events: none; -webkit-user-drag: none; user-select: none; }

/* ---- live stream (customer-logos.js) ---- */
.dfl-js .dfl-window {
  height: 26rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
}
.dfl-js .dfl-static { /* kept for screen readers only */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dfl-stream { position: absolute; inset: 0; will-change: transform; }
.dfl-item { position: absolute; transition: transform 0.25s ease; }
.dfl-item:hover { transform: scale(1.15); z-index: 2; } /* small zoom on hover */
.dfl-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dfl-item .dfl-mono { opacity: 0.95; transition: opacity 0.25s; }
.dfl-item .dfl-color { opacity: 0; transition: opacity 0.25s; }
.dfl-item:hover .dfl-color { opacity: 1; }
.dfl-item:hover .dfl-mono { opacity: 0; }

@media screen and (max-width: 767px) {
  .dfl h2 { margin-bottom: 2rem; }
  .dfl-js .dfl-window { height: 22rem; }
  .dfl .dfl-static { gap: 2rem 2.25rem; }
  .dfl .dfl-static li, .dfl-static img { height: 2.5rem; }
  .dfl-static img { max-width: 7rem; }
}