frontend/src/lib/components/MacBackdrop.svelte

<script>
  const words = [
    ['MAC', 8, 9, -8, 24], ['MBM', 80, 12, 6, 13], ['AI', 42, 6, -12, 16],
    ['MAC', 90, 34, 3, 20], ['MBM', 15, 45, -6, 12], ['AI', 66, 23, 10, 24],
    ['MAC', 55, 72, -3, 13], ['MBM', 28, 78, 7, 16], ['AI', 78, 55, -14, 12],
    ['MAC', 5, 66, 4, 20], ['MBM', 60, 88, -9, 24], ['AI', 88, 78, 6, 13],
  ];
</script>

<div class="mac-backdrop" aria-hidden="true">
  <div class="scanlines"></div>
  {#each words as [text, x, y, rot, size], i}
    <span
      class="word"
      style="left:{x}%; top:{y}%; transform:rotate({rot}deg); font-size:{size}px; animation-delay:{i * -0.7}s;"
    >
      {text}
    </span>
  {/each}
</div>

<style>
  .mac-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.72;
  }

  .word {
    position: absolute;
    color: var(--accent);
    opacity: 0.045;
    font-weight: 800;
    letter-spacing: 0.12em;
    font-family: Inter, system-ui, sans-serif;
    animation: drift 10s ease-in-out infinite alternate;
  }

  .scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 5px,
      rgba(217, 116, 73, 0.025) 6px
    );
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 80%, transparent);
  }

  @keyframes drift {
    from { translate: 0 0; }
    to { translate: 10px -8px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .word { animation: none; }
  }
</style>