/* =============================================================
   BRANDS — Infinite marquee / client logo ticker (Option 2: Luxury Monochrome Gold)
   ============================================================= */

.brands {
  padding: 90px 0 95px;
  background: var(--bg3);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}

.marquee {
  margin-top: 42px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee + .marquee { margin-top: 22px; }

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 30px;
  padding: 12px 0;
  animation: marqueeLeft 56s linear infinite;
  will-change: transform;
}
.marquee-track.reverse {
  animation-name: marqueeRight;
  animation-duration: 62s;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Option 2: Luxury Circular Emblem Card */
.brand-logo-card {
  width: 86px;
  height: 86px;
  flex: 0 0 86px;
  border-radius: 50%;
  overflow: hidden;
  background: #0f100e;
  border: 1.5px solid rgba(213, 170, 75, 0.28);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.75), inset 0 0 14px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform .38s cubic-bezier(.2, .8, .2, 1),
              border-color .35s ease,
              box-shadow .38s ease,
              background-color .35s ease;
  user-select: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Subtle gold coin rim highlight */
.brand-logo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 0 10px rgba(213, 170, 75, 0.15);
  transition: opacity .35s ease;
}

/* Monochrome + Warm Gold metallic default filter */
.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  pointer-events: none;
  filter: grayscale(100%) brightness(0.68) contrast(1.18) sepia(18%);
  opacity: 0.72;
  transition: filter .38s cubic-bezier(.2, .8, .2, 1),
              opacity .35s ease,
              transform .38s cubic-bezier(.2, .8, .2, 1);
}

/* Pause marquee when a logo is tapped / active */
.marquee.is-paused .marquee-track,
.marquee:has(.brand-logo-card.is-active) .marquee-track {
  animation-play-state: paused !important;
}

/* Hover / Active / Tap: Prominently Pops Up (Ubharto) + Vivid Color + Gold Halo */
.brand-logo-card:hover,
.brand-logo-card.is-active {
  background: #161713;
  transform: scale(1.24) translateY(-6px);
  border-color: var(--gold2);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.96),
              0 0 36px rgba(213, 170, 75, 0.6),
              0 0 65px rgba(213, 170, 75, 0.3);
  z-index: 25;
}

.brand-logo-card:hover .brand-logo-img,
.brand-logo-card.is-active .brand-logo-img {
  filter: grayscale(0%) brightness(1.08) contrast(1.06) sepia(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Radar pulse ring when tapped / elevated (ubharlyavar) */
.brand-logo-card.is-active::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.8px solid rgba(240, 207, 123, 0.85);
  box-shadow: 0 0 16px rgba(213, 170, 75, 0.6);
  animation: logoPulseRing 1.5s ease-out infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes logoPulseRing {
  0% { transform: scale(0.95); opacity: 0.9; }
  100% { transform: scale(1.26); opacity: 0; }
}

@keyframes marqueeLeft  { to   { transform: translateX(-50%); } }
@keyframes marqueeRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }