/* ============================================================
   ����𨅯���� Logo ��嚗��㚚� + about �梁鍂嚗�
   靘�皞� style.css 銵� 2427-2589嚗��娍𨯬蝘鳴���批捆�𧊋�㺿嚗�
   ============================================================ */

/* ============================================================
   09 BRANDS SERVED
   ============================================================ */
.brands-section {
  padding: 15.625vw 0 0;
  position: relative;
  background: var(--c-bg-section);
}

.brands-section::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 15.625vw;
  background-image: url(../../img/geyes-design-bg.png);
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
  content: '';
}

.brands-section-wrap {
  position: relative;
  z-index: 1;
  background: #191919;
  padding-top: 25px;
}

.brands-section-wrap .section-h1 {
  color: var(--c-on-dark);
}

.brands-section-wrap .section-h1 .accent {
  color: var(--c-on-dark);
}

.brands-section-wrap .section-h1 sup {
  color: var(--c-brand);
}

.brands-section-wrap .section-h4 {
  color: var(--c-on-dark);
}

.brands-section-wrap .body-l {
  color: var(--c-on-dark);
}

/* logo ��嚗帋�𠹺�见�拇�垍�⊿�鞱�煾收���捆�膥 */
.logo-wall {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
}

/* 皛煾�㰘蕭頩文�枏耦皜豢�辷�𡁶眏 JS 閮剖�� --x / --y嚗龦SS 隞� transform 撟單�𤏸�罸辶�𤩎��蠘�訫凝皛臬�峕�� */
.logo-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(90px, 10vw, 130px);
  height: clamp(90px, 10vw, 130px);
  border-radius: 50%;
  background: var(--c-brand);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) translate(-50%, -50%) scale(0);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
  /* mix-blend-mode: multiply; */
  will-change: transform, opacity;
}

/* �脣�� logo ����憿舐內銝行𦆮憭改�屸𣪧��𧢲��䌊��訫�𧼮� scale(0) 銝行楚�枂 */
.logo-wall.is-hover .logo-cursor {
  opacity: 1;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) translate(-50%, -50%) scale(1);
}

/* �鱓��坿�𣇉�梹�𡁻黸��𤩺滯�枂嚗�椰�𢰧瘛∪枂�桃蔗霈㯄�羓楠��𨀣𦻖�凒�䌊�塚�𣜖-index 擃䀹䲰皜豢�躰�� logo ��见銁��齿䲮 */
.logo-marquee {
  overflow: hidden;
  position: relative;
  z-index: 2;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--c-bg-black) 6%, var(--c-bg-black) 94%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--c-bg-black) 6%, var(--c-bg-black) 94%, transparent);
}

/* 頝煾收����屸�橒�𡁜祝摨虫�嘥�批捆��鞾�页���閧𧞄雿滨宏 -50%嚗��拐遢�㮾����批捆嚗厰�娍�鞟�∠葦敺芰兛
   ��栞�脲㺿�鍂 .logo-item �� margin-right嚗��� flex gap嚗㚁��炏��� -50% ��憭𡁶�堒�𠰴�� gap �䭾�鞱歲��� */
.logo-track {
  display: flex;
  width: max-content;
  /* �鍂 longhand 銝衣策摰𡁻�鞱身 duration嚗屸�踹�� shorthand ��� animation-duration ��滩身�� 0s ���靝�譍�滚�� */
  animation-name: logo-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 55s;
  will-change: transform;
}

/* 銝𦠜�㘾�笔漲頛�敹� */
.logo-track--top {
  animation-duration: 45s;
}

/* 銝𧢲�㘾�笔漲頛��ｇ����𣶹撅斗活�� */
.logo-track--bottom {
  animation-name: logo-scroll2;
  animation-duration: 45s;
}

/* 皛煾�删宏�交��麱�頣�峕䲮靘蹂蝙�鍂����𧢲� logo */
.logo-marquee:hover .logo-track {
  animation-play-state: paused;
}

@keyframes logo-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* 銝𧢲�𡜐�𡁶眏撌西秐�𢰧����敺� -50% ��訫� 0嚗��拐遢�㮾����批捆嚗㚁��炏���椰�湔��蠧�枂蝛箇蒾 */
@keyframes logo-scroll2 {
  from {
    transform: translate3d(-50%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

/* �鱓銝� logo �㨃����𡁜𤐄摰𡁜祝摨佗�屸�踹�滚�閧𧞄�𡒊�贝歲��� */
.logo-item {
  flex: 0 0 auto;
  width: clamp(140px, 16vw, 200px);
  aspect-ratio: 16/7;
  margin-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color .3s, transform .3s;
}

.logo-item:hover {
  border-color: var(--c-brand);
  transform: scale(1.05);
}

.logo-item img {
  max-width: 80%;
  max-height: 70%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .65;
  transition: filter .3s, opacity .3s;
}

.logo-item:hover img {
  filter: none;
  opacity: 1;
}

/* 閮鳴�𡁜��𧋦�銁 prefers-reduced-motion: reduce ���𦦵鍂頝煾收�����
   雿���见�麄�峕�𥕦�穃�閙�卝�滨�蝟餌絞/�讛汗�膥��撠舘稲頛匧�交�摰��其�滚�𤏪��
   甇斤�箏���𣬚�鋆嗪ˇ�扯憚�偘嚗䔶�嗪�瘙��㺿�箔�敺𧢲偘�𦆮嚗峕�蝘駁膄�𦦵鍂閬誩���� */