/* ============================================================
   comp-marquee.css (Lego Block)
   Infinite Logo Marquee (Social Proof / Partner Banner)
   ============================================================ */

.logo-marquee-section {
  padding: 160px 0 0 0; /* 메인 텍스트와 제휴사 라인 사이의 여백을 1.5배 이상 확보하여 Make.com 수준의 공간감 형성 */
  background-color: transparent;
  position: relative;
  z-index: 10; /* 3D 캔버스 위로 올림 */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Edge Fade-out Masking */
.logo-marquee-wrapper {
  display: flex;
  width: 100%;
  max-width: 1200px; /* Limit max width for ultra-wide screens */
  overflow: hidden;
  /* Fades out the left and right edges with a wider gradient for a smoother transition */
  -webkit-mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent);
  mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent);
}

.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 120px; /* 로고 사이 간격을 확 넓혀서 여백의 미 극대화 */
  padding-right: 120px; /* Match gap so the loop is seamless */
  animation: scrollMarquee 45s linear infinite; /* 간격이 넓어졌으므로 속도도 조금 더 여유롭게 */
  white-space: nowrap;
}

/* Pause animation on hover */
.logo-marquee-wrapper:hover .logo-marquee-track {
  animation-play-state: paused;
}

/* Placeholder Logos Styling */
.marquee-logo {
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 700;
  font-size: 22px; /* 사이즈를 줄여서 훨씬 더 정돈되고 고급스러운 여백 확보 */
  color: #ffffff; /* 완전한 흰색 기반에 */
  opacity: 0.35; /* 투명도를 대폭 낮춰 배경에 은은하게 스며들게 함 (Make 스타일) */
  letter-spacing: -0.02em;
  transition: opacity 0.4s ease, color 0.4s ease, transform 0.4s ease;
  user-select: none;
  mix-blend-mode: plus-lighter; /* 배경색상과 고급스럽게 섞이도록 처리 */
}

.marquee-logo:hover {
  opacity: 0.9;
  transform: scale(1.02); /* 마우스 오버시 미세하게 커지는 고급스러운 인터랙션 */
  color: var(--text-primary);
}

/* OMNIARK Universe Brands */
.marquee-logo.brand-omniark { font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; }
.marquee-logo.brand-kbeauty { font-weight: 300; letter-spacing: 0.02em; font-style: italic; }
.marquee-logo.brand-klang { font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; }
.marquee-logo.brand-klofi { font-family: var(--serif, 'Noto Serif KR', serif); font-weight: 900; font-style: italic; }
.marquee-logo.brand-hwisung { 
  font-family: 'Cinzel', 'Noto Serif KR', serif; 
  font-weight: 400; 
  letter-spacing: 0.25em; 
  text-transform: uppercase; 
  transition: all 0.4s ease;
}
.marquee-logo.brand-hwisung:hover { 
  color: #ffffff; 
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8); 
}

/* Connect AI Image Logo Styling (Forced Silhouette) */
.marquee-logo.brand-connect img {
  height: 24px;
  width: auto;
  filter: brightness(0) invert(1) contrast(200%);
  opacity: 0.9;
  transition: all 0.4s ease;
}

/* AI City Builders Image Logo Styling (Forced Silhouette) */
.marquee-logo.brand-aicity img {
  height: 24px;
  width: auto;
  border-radius: 4px;
  filter: grayscale(100%) contrast(200%) brightness(150%) invert(1) sepia(1) hue-rotate(180deg) saturate(0%) brightness(500%);
  mix-blend-mode: screen;
  transition: all 0.4s ease;
}

/* AGENT UNIVERSITY Logo */
.marquee-logo.brand-agentuni {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 900;
  letter-spacing: 0.02em;
}
.marquee-logo.brand-agentuni svg {
  color: var(--text-muted);
  transition: color 0.3s ease;
}
.marquee-logo.brand-agentuni .text-wrap {
  display: flex;
  gap: 8px; /* AGENT와 UNIVERSITY 사이 띄어쓰기 추가 */
}
.marquee-logo.brand-agentuni .agent {
  color: var(--text-muted);
  transition: color 0.3s ease;
}
.marquee-logo.brand-agentuni .uni {
  color: var(--text-muted);
  transition: color 0.3s ease;
}
.marquee-logo.brand-agentuni:hover svg {
  color: #00ff00;
}
.marquee-logo.brand-agentuni:hover .agent {
  color: #ffffff;
}
.marquee-logo.brand-agentuni:hover .uni {
  color: #00ff00;
}

/* EZER AI Logo */
.marquee-logo.brand-ezer {
  font-family: var(--sans, 'Outfit', sans-serif);
  font-weight: 800;
  letter-spacing: 0.1em;
}
.marquee-logo.brand-ezer .ezer {
  font-weight: 800;
}
.marquee-logo.brand-ezer .ai {
  font-weight: 300;
  margin-left: 2px;
}

@keyframes scrollMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media (max-width: 768px) {
  .logo-marquee-section { padding: 40px 0; }
  .logo-marquee-track { gap: 40px; padding-right: 40px; }
  .logo-marquee-wrapper {
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  }
}

klang-marquee { display: block; width: 100%; }