.spots {
    position: fixed; inset: 0; z-index: 50;
    pointer-events: none;
    mix-blend-mode: multiply;
    --len: 110vh;   /* beam length, relative to screen height */
    --cone: .28;    /* beam width as a ratio of its length (constant cone angle) */
    --fx: 1;        /* head scale */
  }

  .spot {
    position: absolute; bottom: 0; left: var(--x);
    width: 0; height: 0;
    --a: .25;
  }
  .spot:nth-child(1) { --x: 10%; --from: -15deg; --to:  35deg; --dur: 7s;   --delay:  0s; }
  .spot:nth-child(2) { --x: 30%; --from: -40deg; --to:  20deg; --dur: 6s;   --delay: -2s; }
  .spot:nth-child(3) { --x: 50%; --from: -30deg; --to:  30deg; --dur: 9s;   --delay: -4s; }
  .spot:nth-child(4) { --x: 70%; --from: -20deg; --to:  40deg; --dur: 8s;   --delay: -1s; }
  .spot:nth-child(5) { --x: 90%; --from: -35deg; --to:  15deg; --dur: 6.5s; --delay: -5s; }

  .beam {
    --w: calc(var(--len) * var(--cone));
    position: absolute; bottom: 0; left: calc(var(--w) / -2);
    width: var(--w); height: var(--len);
    transform-origin: 50% 100%;
    clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0);
    background: linear-gradient(to top,
      rgba(0,0,0, var(--a)) 0%,
      rgba(0,0,0, calc(var(--a) * .4)) 45%,
      rgba(0,0,0, 0) 100%);
    filter: blur(5px);
    animation: spot-sweep var(--dur) ease-in-out var(--delay) infinite alternate;
  }

  @keyframes spot-sweep {
    from { transform: rotate(var(--from)); }
    to   { transform: rotate(var(--to)); }
  }

  .head {
    position: absolute; bottom: 0; left: -22px;
    width: 44px; height: 18px;
    border-radius: 22px 22px 0 0;
    background: #111;
    transform: scale(var(--fx));
    transform-origin: 50% 100%;
  }
  .head::after {
    content: ""; position: absolute; left: 50%; top: 3px;
    width: 14px; height: 6px; margin-left: -7px; border-radius: 50%;
    background: #ddd;
  }

  /* tablet: 3 spots (1, 3, 5) */
  @media (max-width: 1024px) {
    .spots { --fx: .85; }
    .spot:nth-child(2), .spot:nth-child(4) { display: none; }
  }

  /* mobile: 2 spots (2, 4) */
  @media (max-width: 600px) {
    .spots { --fx: .7; }
    .spot:nth-child(1), .spot:nth-child(3), .spot:nth-child(5) { display: none; }
    .spot:nth-child(2), .spot:nth-child(4) { display: block; }
    .spot:nth-child(2) { --x: 25%; }
    .spot:nth-child(4) { --x: 75%; }
  }

  @media (prefers-reduced-motion: reduce) { .beam { animation: none; } }