/* assets/css/components/accred-strip.css
 * @layer components — Accreditation marquee strip
 * ════════════════════════════════════════════════════════════════════
 *
 * CSS-only infinite horizontal scroll.
 * Content is duplicated in PHP for seamless looping.
 * Pauses on hover. Stops entirely for prefers-reduced-motion.
 *
 * Token sources: §1 palette, §2 semantics, §5 spacing, §13 radii
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ── Strip container ── */
  .accred-strip {
    background-color: var(--primary-ultra-dark, var(--surface-dark));
    border-block-start: 1px solid color-mix(in oklch, var(--white) 6%, transparent);
    padding-block: var(--space-m);
    padding-inline: var(--gutter);
    overflow: hidden;
  }

  .accred-strip__inner {
    display: flex;
    align-items: center;
    gap: var(--space-l);
  }

  /* ── "Accredited by" label ── */
  .accred-strip__label {
    font-size: var(--text-2xs);
    font-weight: var(--weight-medium);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--white) 25%, transparent);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ── Overflow mask — hides the seam ── */
  .accred-strip__overflow {
    flex: 1;
    overflow: hidden;
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 8%,
      black 92%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 8%,
      black 92%,
      transparent 100%
    );
  }

  /* ── Scrolling track ── */
  .accred-strip__track {
    display: flex;
    gap: var(--space-l);
    width: max-content;
    animation: accred-marquee 35s linear infinite;
  }

  /* Pause on hover — accessible and elegant */
  .accred-strip__track:hover {
    animation-play-state: paused;
  }

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

  /* ── Accessibility: stop animation for reduced motion ── */
  @media (prefers-reduced-motion: reduce) {
    .accred-strip__track {
      animation: none;
      flex-wrap: wrap;
      justify-content: center;
    }

    .accred-strip__overflow {
      mask-image: none;
      -webkit-mask-image: none;
      overflow: visible;
    }
  }

  /* ── Individual badge ── */
  .accred-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-3xs) var(--space-s);
    border-radius: var(--radius-xs);
    border: 1px solid color-mix(in oklch, var(--white) 8%, transparent);
    background: color-mix(in oklch, var(--white) 3%, transparent);
    white-space: nowrap;
    transition:
      background var(--duration-fast) var(--ease-default),
      border-color var(--duration-fast) var(--ease-default);
    flex-shrink: 0;
  }

  .accred-badge:hover {
    background: color-mix(in oklch, var(--white) 6%, transparent);
    border-color: color-mix(in oklch, var(--white) 14%, transparent);
  }

  /* Teal dot indicator */
  .accred-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background-color: var(--primary-semi-light, var(--primary));
    flex-shrink: 0;
  }

  /* Badge name text */
  .accred-badge__name {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: 0.06em;
    color: color-mix(in oklch, var(--white) 55%, transparent);
  }

  /* Optional logo image */
  .accred-badge__logo {
    height: 1rem;
    width: auto;
    object-fit: contain;
    opacity: 0.7;
    transition: opacity var(--duration-fast) var(--ease-default);
  }

  .accred-badge:hover .accred-badge__logo {
    opacity: 0.9;
  }

} /* end @layer components */