/* AI power: the loading bubble in one element, with real text for screen
   readers. The stripes slide, and a shine sweeps across them. */

.ai-loader {
  --blue: oklch(0.55 0.17 258);
  position: relative;
  inline-size: 340px;
  block-size: 190px;
  margin: 18px 30px;
  box-sizing: border-box;
  padding-block-start: 122px;
  border-radius: 32px;
  font: 600 15px/1 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: oklch(0.95 0.03 250);
  background: linear-gradient(160deg, oklch(0.66 0.17 250), var(--blue) 60%, oklch(0.48 0.16 265));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.35);
  filter: drop-shadow(0 12px 18px oklch(0.3 0.1 260 / 0.35));

  /* The bar: a shine and stripes on a dark track. */
  &::before {
    content: "";
    position: absolute;
    inset: 68px 70px auto;
    block-size: 30px;
    border-radius: 15px;
    background:
      linear-gradient(100deg, transparent 30%, oklch(1 0 0 / 0.5) 50%, transparent 70%) -200px 0 / 200px 100% no-repeat,
      repeating-linear-gradient(-45deg, oklch(0.85 0.12 235) 0 10px, oklch(0.72 0.15 245) 10px 20px) 0 0 / 28.28px 100%,
      oklch(0.4 0.12 262);
    box-shadow: inset 0 2px 4px oklch(0 0 0 / 0.3), 0 1px 0 oklch(1 0 0 / 0.25);
    animation: ai-slide 1.8s linear infinite;
  }

  /* The tail, in the bubble's colour at its corner. */
  &::after {
    content: "";
    position: absolute;
    inset: calc(100% - 1px) auto auto 44px;
    inline-size: 40px;
    block-size: 30px;
    background: oklch(0.52 0.17 259);
    clip-path: polygon(0 0, 100% 0, 15% 100%);
  }

  @media (prefers-reduced-motion: reduce) {
    &::before { animation: none; }
  }
}

/* One loop: the shine crosses once while the stripes move three tiles. */
@keyframes ai-slide { to { background-position: 400px 0, 84.84px 0; } }