/* ==================================================================
   Use cases — kwizzbit/use-cases (full-bleed ticker belt)
   Faithful slice of /HTML/use-cases.html. Hardcoded hex kept (matches theme.json
   blood-orange/ink/white). Reset/body/font-face dropped (global). overflow clip per §11.
   ================================================================== */

  .use-cases {
    background: #E03B2B;
    overflow: clip;
    padding-block: clamp(2.8rem, 4.9vw, 4.2rem);
  }
  @media (min-width: 1024px) {
    /* Sits directly under mantra — reduce top padding so the two
       blood-orange sections read as one connected zone. */
    .kwb-segment--mantra + .kwb-segment--use-cases .use-cases {
      padding-top: 1rem;
    }
  }

  .use-cases__rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Dim the whole animated ticker ~20% overall — uniformly softens every
       belt, word and dot while preserving the muted/bright hierarchy. */
    opacity: 0.8;
  }

  .use-cases__row {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .use-cases__belt {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: baseline;
    animation: ticker-left 120s linear infinite;
    will-change: transform;
  }

  .use-cases__row--reverse .use-cases__belt {
    animation: ticker-right 140s linear infinite;
  }

  .use-cases__row--slowest .use-cases__belt {
    animation-duration: 160s;
  }

  .use-cases__row--slow .use-cases__belt {
    animation-duration: 150s;
  }

  .use-cases__item {
    display: inline-flex;
    align-items: baseline;
    padding-inline-end: 0.3em;
  }

  .use-cases__item__text {
    font-family: 'Roobert Semimono', ui-monospace, monospace;
    font-weight: 400;
    font-style: normal;
    font-synthesis: none;
    text-rendering: geometricPrecision;
    font-size: 45px;
    line-height: 1;
    letter-spacing: -0.12em;
    color: #FFFFFF;
    opacity: 1;
  }

  .use-cases__item--muted .use-cases__item__text {
    opacity: 0.8;
  }

  /* Dot — always 100% white, outside opacity inheritance */
  .use-cases__item__dot {
    font-family: 'Roobert Semimono', ui-monospace, monospace;
    font-weight: 400;
    font-style: normal;
    font-synthesis: none;
    text-rendering: geometricPrecision;
    font-size: 45px;
    line-height: 1;
    letter-spacing: 0;
    color: #FFFFFF;
    opacity: 1;
  }

  /* ── Per-word float animations ── 
     5 unique keyframe paths so no two words ever sync.
     Y travel: 5px max — subtle, never fights the horizontal scroll.
     All durations 4s–8s, staggered delays set per word in HTML.
     translateZ(0) isolates each word's compositing layer.
  */
  @keyframes word-float-a {
    0%   { transform: translateY(0px) translateZ(0); }
    30%  { transform: translateY(-1px) translateZ(0); }
    60%  { transform: translateY(1px) translateZ(0); }
    100% { transform: translateY(0px) translateZ(0); }
  }
  @keyframes word-float-b {
    0%   { transform: translateY(0px) translateZ(0); }
    25%  { transform: translateY(1.5px) translateZ(0); }
    65%  { transform: translateY(-2.5px) translateZ(0); }
    100% { transform: translateY(0px) translateZ(0); }
  }
  @keyframes word-float-c {
    0%   { transform: translateY(0px) translateZ(0); }
    40%  { transform: translateY(-1.5px) translateZ(0); }
    70%  { transform: translateY(2px) translateZ(0); }
    100% { transform: translateY(0px) translateZ(0); }
  }
  @keyframes word-float-d {
    0%   { transform: translateY(0px) translateZ(0); }
    20%  { transform: translateY(2.5px) translateZ(0); }
    55%  { transform: translateY(-1px) translateZ(0); }
    100% { transform: translateY(0px) translateZ(0); }
  }
  @keyframes word-float-e {
    0%   { transform: translateY(0px) translateZ(0); }
    45%  { transform: translateY(-2.5px) translateZ(0); }
    75%  { transform: translateY(1.5px) translateZ(0); }
    100% { transform: translateY(0px) translateZ(0); }
  }

  /* Float utility classes — applied per word in HTML */
  .wf-a { animation: word-float-a 5s ease-in-out infinite; will-change: transform; }
  .wf-b { animation: word-float-b 6.5s ease-in-out infinite; will-change: transform; }
  .wf-c { animation: word-float-c 4.5s ease-in-out infinite; will-change: transform; }
  .wf-d { animation: word-float-d 7s ease-in-out infinite; will-change: transform; }
  .wf-e { animation: word-float-e 8s ease-in-out infinite; will-change: transform; }

  @media (prefers-reduced-motion: reduce) {
    .wf-a, .wf-b, .wf-c, .wf-d, .wf-e { animation: none; }
  }

  @keyframes ticker-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @keyframes ticker-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .use-cases__belt { animation: none; }
    .use-cases__row { flex-wrap: wrap; white-space: normal; padding-inline: clamp(1rem, 4vw, 3rem); row-gap: 0.2em; }
  }

  @media (max-width: 640px) {
    .use-cases__rows { gap: 4px; }
    .use-cases { padding-block: 2.1rem; }
    .use-cases__item__text, .use-cases__item__dot { font-size: clamp(1.5rem, 7.2vw, 1.9rem); letter-spacing: -0.09em; }
    .use-cases__belt { /* duration set per-row in JS (width-proportional, slow) */ }
  }

  @media (min-width: 641px) and (max-width: 1023px) {
    .use-cases__rows { gap: 6px; }
    .use-cases__item__text, .use-cases__item__dot { font-size: clamp(1.75rem, 3.5vw, 45px); letter-spacing: -0.1em; }
  }