/* ============================================
   HARA — As Seen In Marquee
   Slow, smooth horizontal loop of press logos,
   portrait reels, and landscape YouTube features.
   ============================================ */

.marquee-asi {
  padding: var(--space-3xl) 0;
  background: var(--bg-primary);
  overflow: hidden;
}

.marquee-asi__label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-secondary);
  margin-bottom: var(--space-2xl);
  text-align: center;
}

.marquee-asi__viewport {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.marquee-asi__track {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  width: max-content;
  animation: marquee-asi-scroll 90s linear infinite;
  will-change: transform;
}

.marquee-asi__copy {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-left: var(--space-lg); /* preserve gap between last original and first duplicate */
}

.marquee-asi__track:hover {
  animation-play-state: paused;
}

@keyframes marquee-asi-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ----- Cards ----- */
.marquee-asi__item {
  flex: 0 0 auto;
  height: clamp(160px, 18vw, 240px);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 24px var(--glass-shadow);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Logo — editorial floating, no card, brand-aware mono color */
.marquee-asi__item--logo {
  aspect-ratio: auto;
  padding: 0 var(--space-2xl);
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.marquee-asi__item--logo img {
  height: clamp(36px, 4.5vw, 60px);
  width: auto;
  max-width: clamp(140px, 16vw, 220px);
  object-fit: contain;
  transition: filter var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
}

/* Default (landing): neutral grayscale */
.marquee-asi__item--logo img {
  filter: grayscale(1);
  opacity: 0.65;
}

/* Clinic (dark bg): flatten to ivory-ish so logos pop against forest green */
[data-brand="clinic"] .marquee-asi__item--logo img {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

/* Wellness (ivory bg): flatten to dark so logos pop against warm ivory */
[data-brand="wellness"] .marquee-asi__item--logo img {
  filter: brightness(0);
  opacity: 0.75;
}

/* Hover reveals original brand colors */
.marquee-asi__item--logo:hover img {
  filter: none;
  opacity: 1;
}

/* Portrait reel — 9:16 */
.marquee-asi__item--reel {
  aspect-ratio: 9 / 16;
  padding: 0;
  background: var(--dark);
}

.marquee-asi__item--reel video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Landscape YouTube — 16:9 */
.marquee-asi__item--yt {
  aspect-ratio: 16 / 9;
  padding: 0;
  background: var(--dark);
}

.marquee-asi__item--yt iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  .marquee-asi__viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .marquee-asi__track {
    animation: none;
    width: max-content;
  }
  .marquee-asi__copy {
    display: none;
  }
}

/* ----- Mobile tuning ----- */
@media (max-width: 640px) {
  .marquee-asi {
    padding: var(--space-2xl) 0;
  }
  .marquee-asi__item {
    height: clamp(140px, 32vw, 180px);
  }
  .marquee-asi__track {
    gap: var(--space-md);
    animation-duration: 70s;
  }
  .marquee-asi__copy {
    gap: var(--space-md);
    margin-left: var(--space-md);
  }
}