/* Layout for the three rows under #work */
.marquees {
  position: relative;
  display: grid;
  gap: clamp(16px, 2vw, 16px);
  margin: 150px auto;
  overflow: hidden;
}

/* One scrolling row */
.marquee {
  /* tune these per row if you like */
  --gap: 16px;
  overflow: hidden;
  /* Fade edges like your Framer export */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 12.5%,
    black 87.5%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 12.5%,
    black 87.5%,
    transparent 100%
  );
  border-bottom: 7px solid white;
}

/* The moving strip that contains two copies of the content */
.marquee__track {
  display: flex;
  width: max-content;
  /* grow to fit children */
  gap: var(--gap);
  animation: marquee 35s linear infinite;
  will-change: transform;
  padding-bottom: 16px;
}

/* Reverse direction for the middle row */
.marquee--reverse .marquee__track {
  animation-direction: reverse;
}

/* One copy of the content */
.marquee__content {
  display: flex;
  align-items: center;
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  /* don't collapse; needed for a seamless loop */
}

/* Items in a row */
.marquee__content > li {
  flex: 0 0 auto;
}

/* Demo image styling – adjust as needed */
.marquee img {
  display: block;
  height: 220px;
  width: auto;
  border-radius: 16px;
  object-fit: cover;
  background: radial-gradient(circle,rgba(255, 59, 245, 1) 0%, rgba(238, 251, 63, 1) 0%, rgba(240, 229, 84, 1) 0%, rgba(135, 245, 141, 1) 18%, rgba(253, 83, 222, 1) 41%, rgba(255, 5, 93, 1) 91%);
}

/* Pause on hover if you want 
    .marquee:hover .marquee__track {
      animation-play-state: paused;
    }*/

/* Seamless loop by sliding exactly half the track width (2 copies => 50%) */
@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Respect reduced‑motion preferences */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

.card {
  position: relative;
  flex: 0 0 var(--card-w);
  height: var(--card-h);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.35);
  transform: translateZ(0);
}

.card img {
  /* keep your flash pulse */
  animation: flash var(--flash-period, 42s) linear var(--flash-offset, -3s)
      infinite,
    kb-zoom var(--kb-duration, 18s) ease-in-out var(--kb-delay, 0s) infinite
      alternate; /* new */

  /* for smooth zoom */
  transform-origin: var(--kb-ox, 50%) var(--kb-oy, 50%);
  will-change: transform, filter;
}



@keyframes zooming {
  0% {
    transform: scale(1.15);
  }
  80% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}

/* Short pulse: white then back to normal, linearly */
@keyframes flash {
  0%,
  0.9% {
    filter: grayscale(0) contrast(1) brightness(1);
  }

  /* idle */
  1.0% {
    filter: grayscale(1) contrast(0.2) brightness(9);
  }

  /* peak white */
  1.5%,
  50% {
    filter: grayscale(0) contrast(1) brightness(1);
  }

  /* return */
  50.1% 100% {
    filter: grayscale(0) brightness(1);
  }
}

/* Staggered periods and negative delays to feel random‑ish.
       Extend these lines to match how many images you have. */
.card:nth-child(1) img {
  --flash-period: 43s;
  --flash-offset: -19s;
}

.card:nth-child(2) img {
  --flash-period: 31s;
  --flash-offset: -7s;
}

.card:nth-child(3) img {
  --flash-period: 53s;
  --flash-offset: -35s;
}

.card:nth-child(4) img {
  --flash-period: 37s;
  --flash-offset: -22s;
}

.card:nth-child(5) img {
  --flash-period: 47s;
  --flash-offset: -11s;
}

.card:nth-child(6) img {
  --flash-period: 29s;
  --flash-offset: -18s;
}

.card:nth-child(7) img {
  --flash-period: 59s;
  --flash-offset: -40s;
}

.card:nth-child(8) img {
  --flash-period: 41s;
  --flash-offset: -9s;
}

.card:nth-child(9) img {
  --flash-period: 35s;
  --flash-offset: -25s;
}

.card:nth-child(10) img {
  --flash-period: 61s;
  --flash-offset: -14s;
}

.card:nth-child(11) img {
  --flash-period: 33s;
  --flash-offset: -5s;
}

.card:nth-child(12) img {
  --flash-period: 49s;
  --flash-offset: -28s;
}

.card:nth-child(13) img {
  --flash-period: 43s;
  --flash-offset: -19s;
}

.card:nth-child(14) img {
  --flash-period: 31s;
  --flash-offset: -7s;
}

.card:nth-child(15) img {
  --flash-period: 53s;
  --flash-offset: -35s;
}

.card:nth-child(16) img {
  --flash-period: 37s;
  --flash-offset: -22s;
}

.card:nth-child(17) img {
  --flash-period: 47s;
  --flash-offset: -11s;
}

.card:nth-child(18) img {
  --flash-period: 29s;
  --flash-offset: -18s;
}

.card:nth-child(19) img {
  --flash-period: 59s;
  --flash-offset: -40s;
}

.card:nth-child(20) img {
  --flash-period: 41s;
  --flash-offset: -9s;
}

.card:nth-child(21) img {
  --flash-period: 35s;
  --flash-offset: -25s;
}

.card:nth-child(22) img {
  --flash-period: 61s;
  --flash-offset: -14s;
}

.card:nth-child(23) img {
  --flash-period: 33s;
  --flash-offset: -5s;
}

.card:nth-child(24) img {
  --flash-period: 49s;
  --flash-offset: -28s;
}

.card:nth-child(25) img {
  --flash-period: 43s;
  --flash-offset: -19s;
}

.card:nth-child(26) img {
  --flash-period: 31s;
  --flash-offset: -7s;
}

.card:nth-child(27) img {
  --flash-period: 53s;
  --flash-offset: -35s;
}

.card:nth-child(28) img {
  --flash-period: 37s;
  --flash-offset: -22s;
}

.card:nth-child(29) img {
  --flash-period: 47s;
  --flash-offset: -11s;
}

.card:nth-child(30) img {
  --flash-period: 29s;
  --flash-offset: -18s;
}

.card:nth-child(31) img {
  --flash-period: 59s;
  --flash-offset: -40s;
}

.card:nth-child(32) img {
  --flash-period: 41s;
  --flash-offset: -9s;
}

.card:nth-child(33) img {
  --flash-period: 35s;
  --flash-offset: -25s;
}

.card:nth-child(34) img {
  --flash-period: 61s;
  --flash-offset: -14s;
}

.card:nth-child(35) img {
  --flash-period: 33s;
  --flash-offset: -5s;
}

.card:nth-child(36) img {
  --flash-period: 49s;
  --flash-offset: -28s;
}

.card:nth-child(37) img {
  --flash-period: 43s;
  --flash-offset: -19s;
}

.card:nth-child(38) img {
  --flash-period: 31s;
  --flash-offset: -7s;
}

.card:nth-child(39) img {
  --flash-period: 53s;
  --flash-offset: -35s;
}

.card:nth-child(40) img {
  --flash-period: 37s;
  --flash-offset: -22s;
}

.card:nth-child(41) img {
  --flash-period: 47s;
  --flash-offset: -11s;
}

/* Ken Burns‑style zoom with a small optional pan */
@keyframes kb-zoom {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(var(--kb-tx, 0), var(--kb-ty, 0), 0)
      scale(var(--kb-end, 1.14));
  }
}
@media (prefers-reduced-motion: reduce) {
  .card img {
    /* keep the flash, drop the zoom */
    animation: flash var(--flash-period, 42s) linear var(--flash-offset, -3s)
      infinite;
    transform: none;
  }
}

/* Progressive enhancement: if CSS random() exists, make the timing truly random per page load.
       Currently in Safari Technology Preview – not widely shipped yet. */
@supports (animation-delay: random(0s, 1s)) {
  .flash {
    --flash-period: random(22s, 58s, 1s);
    --flash-offset: calc(-1 * random(0s, var(--flash-period)));
  }
}