/* projects.css — portfolio grid, filters, clients/brands logo grid */
.portfolio{padding:100px 0;}
#portfolio-flters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:44px;}
#portfolio-flters li{
  padding:9px 18px;border-radius:30px;border:1px solid var(--glass-border);background:transparent;
  font-family:var(--font-label);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);
  font-weight:700;cursor:pointer;transition:all var(--dur-fast);
}
#portfolio-flters li:hover, #portfolio-flters li.filter-active{background:var(--yellow);color:var(--navy-950);border-color:var(--yellow);}

.portfolio-item{margin-bottom:24px;position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--glass-border);}
.portfolio-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease);}
.portfolio-item:hover img{transform:scale(1.06);}
.portfolio-info{
  position:absolute;inset:0;background:linear-gradient(180deg, transparent 45%, rgba(0,19,45,.92));
  display:flex;flex-direction:column;justify-content:flex-end;padding:20px;opacity:0;transition:opacity var(--dur);
}
.portfolio-item:hover .portfolio-info{opacity:1;}
.portfolio-info h4{font-size:16px;color:var(--white);}
.portfolio-info p{font-family:var(--font-label);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin-bottom:4px;}
.portfolio-info .preview-link{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:9px;background:rgba(0,19,45,.7);
  display:flex;align-items:center;justify-content:center;color:var(--white);
}
.portfolio-item[hidden]{display:none;}

/* clients / brands logo grid */
.clients{padding:70px 0;border-top:1px solid var(--glass-border);}
.clients h1{font-size:24px;margin-bottom:36px;text-align:center;}
.clients .row > div{padding:18px;}
.clients img{
  max-height:52px;width:auto;margin:0 auto;filter:grayscale(1) brightness(1.8) opacity(.55);
  transition:filter var(--dur-fast);
}
.clients img:hover{filter:none;opacity:1;}

/* Sliding logo marquee — auto-scroll, pause on hover, grayscale-to-color */
.logo-marquee-wrap{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee-track{
  display:flex;gap:52px;width:max-content;align-items:center;
  animation:logo-marquee 34s linear infinite;
}
.logo-marquee-track.reverse{animation-direction:reverse;animation-duration:40s;}
.logo-marquee-wrap:hover .logo-marquee-track{animation-play-state:paused;}
@keyframes logo-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.logo-marquee-track img{
  height:44px;width:auto;object-fit:contain;flex-shrink:0;
  filter:grayscale(1) brightness(1.8) opacity(.55);transition:filter var(--dur-fast);
}
.logo-marquee-track img:hover{filter:none;opacity:1;}
@media (prefers-reduced-motion: reduce){
  .logo-marquee-track{animation:none;overflow-x:auto;}
}