/* Three vertical beam lines fixed over the viewport. Each carries a
   teal pulse that travels top-to-bottom on a staggered timer, giving
   the page the feel of "orchestration in motion" without competing
   with content. Sits behind the sticky header so chrome covers them
   when scrolled. */

.site-beams {
  position: fixed;
  inset: 0;
  pointer-events: none;
  /* Sit behind every content layer. The beams show through the
     gutters and get softened by the frosted content strip as it
     passes in front of them. */
  z-index: -1;
}

.site-beams__line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  overflow: visible;
  background: color-mix(in oklch, var(--color-foreground) 5%, transparent);
}

/* Line positions: left/right align with the content-strip edges
   (the same var(--gutter) the rails use), plus a third down the
   center of the strip. */
.site-beams__line:nth-child(1) { left: var(--gutter); }
.site-beams__line:nth-child(2) { left: 50%; }
.site-beams__line:nth-child(3) { right: var(--gutter); }

/* The pulse that travels down each line. Bright + wide enough that
   after the frosted content strip blurs it, some teal glow still
   reads through as a soft traveling light. */
.site-beams__line::after {
  content: "";
  position: absolute;
  top: -28vh;
  left: -1px;
  width: 3px;
  height: 28vh;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in oklch, var(--brand-teal) 45%, transparent) 30%,
    var(--brand-teal) 50%,
    color-mix(in oklch, var(--brand-teal) 45%, transparent) 70%,
    transparent 100%
  );
  box-shadow: 0 0 8px 1px color-mix(in oklch, var(--brand-teal) 45%, transparent);
  animation: site-beams-fall 9s linear infinite;
}

.site-beams__line:nth-child(1)::after { animation-delay: 0s; }
.site-beams__line:nth-child(2)::after { animation-delay: 3s; }
.site-beams__line:nth-child(3)::after { animation-delay: 6s; }

@keyframes site-beams-fall {
  0%   { top: -32vh; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 132vh; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-beams__line::after {
    animation: none;
    top: 45vh;
    opacity: 0.6;
  }
}

/* Hide on narrow viewports where gutters collapse */
@media (max-width: 720px) {
  .site-beams { display: none; }
}