/* ============================================================
   logos.css — client logo marquee (trust strip), all page families.
   Track holds the list twice; the second copy is aria-hidden so the loop
   is seamless. Edges fade AND blur: a mask fades the track, two edge
   panels add a backdrop blur that grows toward the sides.
   ============================================================ */
.clogos{position:relative;max-width:1200px;margin:0 auto;padding:36px 48px 44px;overflow:hidden}
.clogos-label{display:block;text-align:center;font-family:var(--mono,'DM Mono','Noto Sans Thai',monospace);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted,#6a6a6a);margin:0 0 26px}
body.lang-th .clogos-label{font-family:'Noto Sans Thai',sans-serif!important;letter-spacing:normal!important;text-transform:none;font-size:13.2px}
body.lang-jp .clogos-label{letter-spacing:.1em!important}
.clogos-view{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.clogos-view::before,.clogos-view::after{content:"";position:absolute;top:0;bottom:0;width:16%;z-index:2;pointer-events:none;
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.clogos-view::before{left:0;-webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent)}
.clogos-view::after{right:0;-webkit-mask-image:linear-gradient(270deg,#000,transparent);mask-image:linear-gradient(270deg,#000,transparent)}
.clogos-track{display:flex;width:max-content;animation:clogosSlide var(--clogos-dur,48s) linear infinite}
.clogos-view:hover .clogos-track{animation-play-state:paused}
.clogos-list{display:flex;align-items:center;gap:clamp(40px,5vw,72px);padding-right:clamp(40px,5vw,72px);margin:0;list-style:none}
.clogos-list li{flex:0 0 auto;display:flex;align-items:center;height:44px}
.clogos-list img{display:block;height:var(--lh,34px);width:auto;max-width:170px;object-fit:contain;
  filter:grayscale(1) contrast(1.05);opacity:.62;transition:filter .35s,opacity .35s}
.clogos-list li:hover img{filter:none;opacity:1}
.clogos-list img.is-light{filter:grayscale(1) invert(1) contrast(1.1);opacity:.55}
.clogos-list li:hover img.is-light{filter:invert(1);opacity:.9}
@keyframes clogosSlide{to{transform:translateX(-50%)}}
@media(max-width:768px){
  .clogos{padding:28px 20px 34px}
  .clogos-list li{height:36px}
  .clogos-list img{height:calc(var(--lh,34px)*.8);max-width:130px}
}
@media(prefers-reduced-motion:reduce){
  .clogos-track{animation:none;width:auto}
  .clogos-list{flex-wrap:wrap;justify-content:center;row-gap:24px;padding-right:0}
  .clogos-list[aria-hidden="true"]{display:none}
  .clogos-view{-webkit-mask-image:none;mask-image:none}
  .clogos-view::before,.clogos-view::after{display:none}
}
.page-wrap .clogos{padding-left:0;padding-right:0}