.projects { padding: 22px 0 32px; background: #fff; }
.projects-shell { position: relative; isolation: isolate; }
.projects-shell::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb,var(--cs-navy) 65%,transparent) 0%, color-mix(in srgb,var(--cs-navy) 65%,transparent) 75%, color-mix(in srgb,var(--cs-cyan) 55%,transparent) 100%);
}
.projects-marquee {
  overflow-x: auto;
  scrollbar-width: none;
}
.projects-marquee::-webkit-scrollbar { display: none; }
.projects-belt { display: flex; width: max-content; }
.projects-group { display: flex; gap: 0; padding-right: 0; flex-shrink: 0; }
.project-image {
  position: relative; isolation: isolate; flex: 0 0 auto;
  width: 288px; height: 174px; overflow: hidden;
  border-radius: 0; background: var(--cs-navy);
}
.project-image img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(1.03);
}
.projects.is-ready .projects-marquee { overflow: hidden; }
.projects.is-ready .projects-belt {
  animation: projects-drift var(--projects-duration, 138s) linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.projects.is-ready.is-running:not(.is-paused) .projects-belt { animation-play-state: running; }
.projects [hidden] { display: none !important; }
.projects-pause {
  position: absolute; right: 12px; bottom: 10px; z-index: 2;
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 1px solid #ffffff50; border-radius: 50%; color: #fff;
  background: color-mix(in srgb,var(--cs-navy) 65%,transparent); backdrop-filter: blur(5px);
}
.projects-pause .material-symbols-outlined { font-size: 16px; }
.projects-pause:hover { background: var(--cs-navy); }
@keyframes projects-drift { to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  .projects { padding: 18px 0 26px; }
  .project-image { width: 248px; height: 152px; }
}
@media (prefers-reduced-motion: reduce) {
  .projects.is-ready .projects-belt { animation: none; will-change: auto; }
  .projects.is-ready .projects-marquee { overflow-x: auto; }
  .projects-group--clone { display: none; }
  .projects-pause { display: none; }
}