/* ============================================================
   PROOFWAVE  — double opposing-direction trust marquee + waves
   Namespaced .proofwave / .proofwave__* / .pw-* so nothing
   collides with the old .strip / .marq rules (removed).
============================================================ */

/* Section bg = a soft lilac -> cream vertical ramp, so the band reads
   as an intentional bridge between the lilac-soft section above and the
   cream section below (not a jarring third colour). */
.proofwave{
  position:relative;
  overflow:hidden;
  padding:54px 0 34px;
  background:var(--cream);
  isolation:isolate;
}

/* ---- Wave dividers: full-bleed, fluid via preserveAspectRatio="none" ---- */
.proofwave__wave{
  position:absolute;
  left:0; right:0;
  line-height:0;
  z-index:2;
  pointer-events:none;
}
.proofwave__wave svg{ display:block; width:100%; }

/* Top wave is filled the gradient's TOP colour so the lilac band above
   appears to curve down into this section. A thin lilac-soft cap behind
   it (::before) guarantees no hairline seam wherever the section starts. */
.proofwave::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:26px;
  background:var(--lilac-soft);
  z-index:1;
}
.proofwave__wave--top{ top:-1px; }
.proofwave__wave--top svg{ height:66px; }
.proofwave__wave--top svg path{ fill:var(--lilac-soft); }

/* Bottom wave: cream section dissolves into the cream band below (kept for the
   subtle edge; invisible cream-on-cream by design). */
.proofwave__wave--bottom{ bottom:-1px; }
.proofwave__wave--bottom svg{ height:44px; }
.proofwave__wave--bottom svg path{ fill:var(--cream); }

/* ---- Rows: each is a viewport-wide window that clips its track ---- */
.proofwave__row{
  position:relative;
  z-index:3;
  display:flex;
  width:100%;
  overflow:hidden;
  /* feather both edges so items melt in/out instead of hard-cutting */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.proofwave__row + .proofwave__row{ margin-top:14px; }

/* Track holds TWO identical copies side by side (= 200% of one copy).
   Translating by exactly -50% advances by one full copy => seamless. */
.proofwave__track{
  display:flex;
  flex-wrap:nowrap;
  width:max-content;
  will-change:transform;
}

/* Each copy is a flex list; the GAP both inside the copy and at the seam
   between the two copies is identical, so the wrap is perfectly even.
   padding:0 7px on each copy = half the 14px gap, so the A|B seam (7+7)
   equals the in-copy gap (14). */
.proofwave__copy{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:14px;
  margin:0;
  padding:0 7px;
  list-style:none;
}

/* Direction + duration. --pw-dur is set per row by JS; the fallback is
   tuned for a ~390px mobile viewport if JS never runs. */
.proofwave__track--ltr{ animation:pw-ltr var(--pw-dur,30s) linear infinite; }
.proofwave__track--rtl{ animation:pw-rtl var(--pw-dur,34s) linear infinite; }

/* TOP row visually travels LEFT -> RIGHT: start one copy left, end at 0. */
@keyframes pw-ltr{
  from{ transform:translateX(-50%); }
  to  { transform:translateX(0); }
}
/* BOTTOM row travels RIGHT -> LEFT: start at 0, end one copy left. */
@keyframes pw-rtl{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

/* Pause on hover so a visitor can actually read a callout. */
.proofwave__row:hover .proofwave__track{ animation-play-state:paused; }

/* ===========================================================
   TOP ROW — stat lockup pills (big serif number, caps label)
=========================================================== */
.pw-stat{
  flex:0 0 auto;
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  padding:9px 20px;
  background:#fff;
  border:1px solid rgba(128,28,75,.18);
  border-radius:999px;
  box-shadow:0 3px 12px rgba(128,28,75,.10);
  white-space:nowrap;
}
.pw-stat__num{
  font-family:'Instrument Serif', Georgia, serif;
  font-weight:400;
  font-size:27px;
  line-height:1;
  color:var(--burgundy);
  letter-spacing:.01em;
}
.pw-stat__num--word{ font-style:italic; font-size:23px; } /* "Events" reads nicer italic */
.pw-stat__label{
  font-family:'Karla', system-ui, sans-serif;
  font-weight:700;
  font-size:11px;
  line-height:1;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:.78;
}

/* ===========================================================
   BOTTOM ROW — brand logos, normalised to one optical height
=========================================================== */
.pw-logo{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:26px;
  padding:0 16px;          /* extra breathing room around the logos */
  white-space:nowrap;
}
.pw-logo img{
  display:block;
  height:26px;             /* uniform optical height (mobile) */
  width:auto;
  max-width:150px;         /* cap the very wide marks (Saks/Anthropologie) */
  object-fit:contain;
  /* force every (dark) logo to one uniform ink tone, slightly soft for class */
  filter:brightness(0) saturate(100%);
  opacity:.66;
}
/* Call Her Daddy has no SVG: serif wordmark matched to the logos' weight */
.pw-logo--word{
  font-family:'Instrument Serif', Georgia, serif;
  font-style:italic;
  font-size:24px;
  line-height:26px;
  color:var(--ink);
  opacity:.74;
  letter-spacing:.01em;
}

/* ===========================================================
   RESPONSIVE
=========================================================== */
/* Desktop / large: roomier spacing, larger type + taller waves */
@media (min-width:768px){
  .proofwave{ padding:58px 0 46px; }
  .proofwave__wave--top svg{ height:78px; }
  .proofwave__wave--bottom svg{ height:60px; }
  .proofwave__row + .proofwave__row{ margin-top:20px; }
  .proofwave__copy{ gap:22px; padding:0 11px; }
  .pw-stat{ padding:10px 25px; gap:9px; }
  .pw-stat__num{ font-size:31px; }
  .pw-stat__num--word{ font-size:26px; }
  .pw-stat__label{ font-size:12px; }
  .pw-logo{ height:30px; padding:0 24px; }
  .pw-logo img{ height:30px; max-width:200px; opacity:.6; }
  .pw-logo--word{ font-size:28px; line-height:30px; opacity:.68; }
}
@media (min-width:1280px){
  .proofwave__wave--top svg{ height:100px; }
  .proofwave__wave--bottom svg{ height:72px; }
  .pw-logo{ height:32px; }
  .pw-logo img{ height:32px; }
  .pw-logo--word{ font-size:30px; line-height:32px; }
}

/* Small mobile (<=390px): tighten so pills never crowd a 375px screen */
@media (max-width:390px){
  .proofwave__copy{ gap:10px; padding:0 5px; }
  .pw-stat{ padding:8px 15px; gap:6px; }
  .pw-stat__num{ font-size:23px; }
  .pw-stat__num--word{ font-size:20px; }
  .pw-stat__label{ font-size:10px; letter-spacing:.11em; }
  .pw-logo{ height:22px; padding:0 11px; }
  .pw-logo img{ height:22px; max-width:130px; }
  .pw-logo--word{ font-size:21px; line-height:22px; }
}

/* ===========================================================
   ACCESSIBILITY — visually-hidden canonical claims (read once)
=========================================================== */
.proofwave__sr{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ===========================================================
   REDUCED MOTION — stop all movement, keep content scannable.
   Hide the duplicate copy so nothing is shown twice; let the
   first copy wrap and centre as a static showcase.
=========================================================== */
@media (prefers-reduced-motion: reduce){
  .proofwave__track--ltr,
  .proofwave__track--rtl{
    animation:none;
    transform:none;
  }
  .proofwave__row{
    -webkit-mask-image:none;
            mask-image:none;
    overflow:visible;
    justify-content:center;
  }
  .proofwave__track{
    width:100%;
    justify-content:center;
  }
  .proofwave__copy[aria-hidden="true"]{ display:none; }
  .proofwave__copy{
    flex-wrap:wrap;
    justify-content:center;
    width:100%;
    row-gap:12px;
  }
}