/* ============================================================
   Rolling strip.

   One band, homepage only, at the seam between The Edit and Made
   to Measure — where ready-made ends and made-to-measure begins.

   DELIBERATE DEPARTURE FROM docs/spec/02-motion.md. That spec
   forbids marquees on the announcement bar (§G2), decorative
   infinite loops (§G8), and anything animating after first reveal
   (§G15). This band breaks all three. It is here because the
   owner asked for it after lai.africa, and it is recorded the way
   backdrop.css records its own Rule 1 departure rather than
   slipped in quietly. See the spec at
   docs/superpowers/specs/2026-08-06-hero-strip-print-checkout-email-design.md

   Modelled on LAI-GROUP-KE/src/components/ui/MarqueeStrip.tsx —
   the real component, read from source. Same structure (two
   identical groups, translateX 0 to -50%, 35s linear), same
   restraint (low-opacity serif, ◆ dividers, edge fades, no
   interactivity), translated into this brand's tokens.

   One thing is deliberately NOT copied: LAI ships no pause
   control. WCAG 2.2.2 requires a pause mechanism for motion that
   runs over five seconds, and this site has been careful about
   that before — the hero carousel grew a pause button for exactly
   this reason. Here the whole band pauses on hover and on
   keyboard focus, and prefers-reduced-motion stops it outright.

   The copy is the four approved promise headings from
   index.html:92-107 plus the standing M-PESA fact. No new claims,
   no testimonials — those are explicitly forbidden until the
   client verifies them.
   ============================================================ */

.strip{
  position:relative;
  overflow:hidden;
  background:var(--wine);
  padding:20px 0;
  /* Decorative text. Dragging a selection across a moving band is
     a frustration with no payoff, and LAI blocks it too. */
  -webkit-user-select:none;
  user-select:none;
}

/* Edge fades, so phrases dissolve at the boundaries instead of
   being guillotined by overflow:hidden. 96px matches LAI's w-24. */
.strip::before,
.strip::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:96px;
  z-index:2;
  pointer-events:none;
}
.strip::before{left:0;background:linear-gradient(to right,var(--wine),rgba(76,23,29,0))}
.strip::after{right:0;background:linear-gradient(to left,var(--wine),rgba(76,23,29,0))}

/* Two identical groups sit side by side, so shifting the track by
   exactly half its width lands group 2 precisely where group 1
   began — the loop has no seam. Any other distance would visibly
   jump. width:max-content stops flex from compressing them to fit. */
.strip-track{
  display:flex;
  width:max-content;
  animation:tk-strip 35s linear infinite;
  will-change:transform;
}
.strip-group{display:flex;flex:none;align-items:center}

/* 55% opacity is the whole trick. At full strength this is a
   headline competing with the product photography either side of
   it; at 55% it is texture drifting past, which is what makes it
   read as subtle rather than as a sales crawl. */
.strip-group span{
  font-family:'Playfair Display',serif;
  font-size:26px;
  font-weight:500;
  letter-spacing:.06em;
  white-space:nowrap;
  padding:0 24px;
  color:var(--gold-lt);
  opacity:.55;
}
.strip-group i{
  font-style:normal;
  font-size:15px;
  color:var(--gold);
  opacity:.5;
}

@keyframes tk-strip{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* WCAG 2.2.2. focus-within covers keyboard users, who cannot hover
   — the band contains no focusable elements itself, but a user
   tabbing through the page still passes it. */
.strip:hover .strip-track,
.strip:focus-within .strip-track{animation-play-state:paused}

@media (max-width:1000px){
  .strip{padding:15px 0}
  .strip::before,.strip::after{width:48px}
  .strip-group span{font-size:18px;padding:0 16px}
  .strip-group i{font-size:13px}
}

/* Static fallback. styles.css:657-659 already kills every
   animation globally under reduced motion, so the track simply
   stays at translateX(0) and the first group is what you see.

   The fades have to go with it, though: frozen, the left fade
   sits on top of the opening words and greys out the start of the
   first phrase. With the band static there is nothing to dissolve
   into, so both fades are removed and the line just reads. */
@media (prefers-reduced-motion:reduce){
  .strip::before,.strip::after{display:none}
}