/* Sh// Shibboleth: the beam
   Light through the seam of the gate. Use on Obsidian #08090a or Basalt #111316.
   https://shibbolethgate.com/brand/#beam */

/* Vertical beam with haze. The parent needs position:relative and overflow:hidden.
   Set --beam-x to move it across the parent. */
.sh-beam{position:relative;overflow:hidden;--beam-x:62%}
.sh-beam::before{content:"";position:absolute;left:var(--beam-x);top:-120px;width:900px;height:700px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(45,212,191,.10),rgba(45,212,191,.03) 55%,transparent);pointer-events:none}
.sh-beam::after{content:"";position:absolute;left:var(--beam-x);top:-40px;width:2px;height:380px;background:linear-gradient(180deg,transparent,rgba(220,255,250,.55) 35%,rgba(45,212,191,.35) 75%,transparent);box-shadow:0 0 24px 3px rgba(45,212,191,.18);pointer-events:none}

/* Optional slow brighten. Opacity only, so it stays on the compositor. */
.sh-beam.sh-beam--pulse::after{animation:sh-beam-pulse 12s ease-in-out infinite}
@keyframes sh-beam-pulse{0%,100%{opacity:.6}50%{opacity:1}}

/* Divider: a horizontal beam on the top edge of a section.
   Put <div class="sh-beam-rule" aria-hidden="true"></div> inside a section that has position:relative. */
.sh-beam-rule{position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none}
.sh-beam-rule::before{content:"";position:absolute;left:50%;top:-40px;width:min(900px,96%);height:80px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(45,212,191,.10),rgba(45,212,191,.03) 55%,transparent)}
.sh-beam-rule::after{content:"";position:absolute;left:50%;top:0;width:min(640px,72%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(45,212,191,.35) 25%,rgba(220,255,250,.55) 50%,rgba(45,212,191,.35) 75%,transparent);filter:drop-shadow(0 0 6px rgba(45,212,191,.45))}

@media (prefers-reduced-motion:reduce){.sh-beam.sh-beam--pulse::after{animation:none;opacity:.85}}