/* ==========================================================================
   WV Buzzword Bar — reusable full-bleed scrolling trust band
   --------------------------------------------------------------------------
   CSS-only marquee: two identical copies of the content animate as a single
   track translated from 0 to -50%. Because both copies are identical, the
   loop moment is invisible — scroll feels continuous.
   Paused on hover + on prefers-reduced-motion.
   ========================================================================== */

.wv-buzzword-bar {
  /* Component-local timing token — not promoted to wv-tokens.css because
     it's unlikely to be reused. Tune here, not there. */
  --wv-buzzword-bar-duration: 50s;

  /* Full-bleed breakout — escapes any centered container (e.g. the PDP
     max-width 1440px wrapper) so the bar hits the actual viewport edges. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  /* Designer-approved (2026-04-23): 100px, locked to the Buy Bar
     which is also 100px. Any change here must be mirrored there. */
  height: 100px;
  /* Accent-driven: --wv-pdp-accent custom property is set on .wv-pdp
     by the dispatcher partial (switches to omega/probiotic/etc. color
     when the product's pdp_accent_color is set). Falls back to the
     global --wv-color-accent (olive) on non-PDP surfaces (homepage,
     future site-wide placements) and on PDPs whose accent is unset. */
  background: var(--wv-pdp-accent, var(--wv-color-accent));
  /* z-index: 1 puts this section's stacking context above Meet Dr.
     Neal's z-index: 0, whose upward-bleeding image at z-index: -1
     inside MDN's context would otherwise paint over the buzzword
     bar's accent fill (2026-06-02 — surfaced after Signs You Need
     was removed from generic PDPs, shortening the buffer between
     Buzzword and MDN). Comp Table's z-index: 2 still wins, preserving
     the intended bleed-through there. */
  z-index: 1;
  overflow: hidden;
}

.wv-buzzword-bar__track {
  display: flex;
  height: 100%;
  width: max-content;
  animation: wv-buzzword-scroll var(--wv-buzzword-bar-duration) linear infinite;
}

/* Pause when user hovers the bar. */
.wv-buzzword-bar:hover .wv-buzzword-bar__track {
  animation-play-state: paused;
}

.wv-buzzword-bar__group {
  display: flex;
  align-items: center;
  /* Even spacing between every element (logo, text, logo, text…) so the
     logo sits exactly midway between its neighboring words. */
  gap: 40px;
  /* Trailing gap so the rhythm continues across the group boundary. */
  padding-right: 40px;
  flex-shrink: 0;
  margin: 0;
}

.wv-buzzword-bar__logo {
  /* Force both dimensions explicitly — height-only + width:auto was
     letting the browser keep rendering at the intrinsic 96×95. Logo
     source is ~square so width==height is correct. Sized to match
     the text cap-height for visual parity. */
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.wv-buzzword-bar__text {
  color: var(--wv-color-text-inverse);
  /* text-transform is not one of the typography properties CLAUDE.md #3
     forbids redeclaring, so adding it here is compliant. wv-body-bold
     covers size/weight/family/line-height. */
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

@keyframes wv-buzzword-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Motion sensitivity — stop the animation entirely, first copy stays
   visible at its starting position. */
@media (prefers-reduced-motion: reduce) {
  .wv-buzzword-bar__track {
    animation: none;
  }
}

/* ==========================================================================
   RESPONSIVE — Mobile-first base + tablet+ restoration
   --------------------------------------------------------------------------
   Per MOBILE-LAYOUT-DISCIPLINE.md archetype #8 (Full-bleed bar): mobile
   reduces height. Height mirrored on .wv-buy-bar — the two bars are
   designed to read as kin when placed on the same page.

   Marquee speed (--wv-buzzword-bar-duration: 50s) intentionally
   unchanged at mobile. Archetype #8 calls for legibility check; smaller
   viewport reads the same content faster relative to eye-track, but
   tuning the duration risks the marquee feeling sluggish at desktop.
   Flag for visual review on staging — adjust the duration token here
   if a per-breakpoint speed is needed.
   ========================================================================== */

.wv-buzzword-bar { height: 56px; }

/* Variant: 1px dark hairline above and below the bar. Opt-in per
   placement via the `lined` variant (parts/buzzword-bar.php). Other
   instances (PDP, etc.) are unaffected. */
.wv-buzzword-bar--lined {
  border-top: 1px solid var(--wv-color-text-primary);
  border-bottom: 1px solid var(--wv-color-text-primary);
}

@media (min-width: 768px) {
  .wv-buzzword-bar { height: 100px; }
}