/* --- Client Logo Rotator (CSS) --- */
place-items: center;
min-height: 260px; /* tweak as needed / or use vh */
padding: var(--pad);
background: #111; /* initial bg before first cycle */
transition: background-color 600ms ease;
overflow: hidden;
isolation: isolate;
}


@media (min-width: 768px){
.client-rotator{ min-height: 360px; --maxW: 420px; --pad: 64px; }
}


/* Force rotator to fill its column */
#client-rotator {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;  /* ensures full stretch */
}

/* Mobile tweak — make sure it's tall enough to show off */
@media (max-width: 767.98px) {
  #client-rotator {
    min-height: 300px;  /* adjust as needed: 250px–400px works well */
  }
}

/* --- Logo layers --- */
.client-rotator .logo{
position: absolute;
inset: 0;
margin: auto;
max-width: min(70vw, var(--maxW));
width: auto;
height: auto;
object-fit: contain;
opacity: 0;
transform: translateY(12px);
will-change: opacity, transform;
/* small shadow helps PNGs on light brand colors */
filter: drop-shadow(0 1px 0 rgba(0,0,0,.04)) drop-shadow(0 10px 18px rgba(0,0,0,.12));
}


/* visible state (no animation) */
.logo.show{
opacity: 1;
transform: translateY(0);
}


/* Keyframes */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOutUp {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-12px); }
}


/* Animated states (applied via JS) */
.anim-in { animation: fadeInUp var(--fade) ease both; }
.anim-out { animation: fadeOutUp var(--fade) ease both; }


/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
.client-rotator{ transition: none; }
.logo{ transition: none; animation: none !important; transform: none !important; }
}