/* ============================================================
   MOTIFS — Michael Style
   Brand-signature visual devices: the barber-pole stripe, the
   diagonal grayscale "work" texture, the rolling marquee.
   Class-based so any surface can opt in.
   ============================================================ */

/* —— Barber-pole stripe — the signature divider —— */
.ms-pole {
  height: 10px;
  background: repeating-linear-gradient(115deg,
      var(--accent) 0 14px,
      #0A0A0B 14px 28px,
      var(--bone) 28px 42px,
      #0A0A0B 42px 56px);
  background-size: 200% 100%;
  animation: ms-pole-slide 6s linear infinite;
}
@keyframes ms-pole-slide { to { background-position: 200% 0; } }

/* —— Grayscale "work" texture — stands in for portrait photography —— */
.ms-work-texture {
  background:
    repeating-linear-gradient(135deg, #212126 0 2px, #161619 2px 5px),
    radial-gradient(120% 120% at 30% 25%, #2b2b31, #101013);
  filter: grayscale(1);
}
.ms-work-texture--light {
  background:
    repeating-linear-gradient(135deg, #e7e7e3 0 2px, #dededa 2px 5px),
    radial-gradient(120% 120% at 40% 30%, #eee, #cfcfca);
  filter: none;
}

/* —— Rolling marquee track —— */
.ms-marquee { overflow: hidden; }
.ms-marquee__track {
  display: flex;
  gap: 38px;
  width: max-content;
  white-space: nowrap;
  animation: ms-marquee-roll 24s linear infinite;
}
@keyframes ms-marquee-roll { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .ms-pole, .ms-marquee__track { animation: none; }
}