/* One laser background. The original violet/blue base stays static. */
.club-background { overflow: hidden; contain: paint; }
.club-background::after { display: none; }
.club-bg-mask { position: absolute; inset: 0; visibility: hidden; -webkit-mask-image: var(--laser-reading-mask); mask-image: var(--laser-reading-mask); -webkit-mask-size: var(--laser-mask-size, 100% 100%); mask-size: var(--laser-mask-size, 100% 100%); -webkit-mask-position: var(--laser-mask-position, 0px 0px); mask-position: var(--laser-mask-position, 0px 0px); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.club-bg-mask[data-ready="true"] { visibility: visible; }
/* The mask is ready first. Then the five beams fade in once, on a short randomized timeline. */
.club-bg-mask[data-ready="true"][data-laser-intro="pending"] .club-bg-lasers span { opacity: 0; }
.club-bg-mask[data-laser-intro="running"] .club-bg-lasers span { opacity: 0; transition: opacity .2s ease-out var(--laser-intro-delay, 0ms); }
.club-bg-mask[data-laser-intro="running"] .club-bg-lasers span.is-visible { opacity: 1; }
.club-bg-plane { --bg-x: 0; --bg-y: 0; position: absolute; inset: -38px; transform: translate3d(calc(var(--bg-x) * 12px), calc(var(--bg-y) * 9px), 0); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.club-bg-lasers { position: absolute; inset: -12%; }

.club-bg-lasers span { position: absolute; width: 150%; left: -25%; top: 29%; height: 1px; background: linear-gradient(90deg, transparent, rgba(164,124,255,.42) 48%, transparent); box-shadow: 0 0 14px 2px rgba(164,124,255,.07); transform: translate3d(0,-32px,0) rotate(-19deg); animation: club-laser-a 29s ease-in-out infinite alternate; }
.club-bg-lasers span:nth-child(2) { top: 64%; background: linear-gradient(90deg, transparent, rgba(240,154,208,.32), transparent); box-shadow: 0 0 14px 2px rgba(240,154,208,.05); transform: translate3d(0,30px,0) rotate(16deg); animation: club-laser-b 37s ease-in-out infinite alternate; }
.club-bg-lasers span:nth-child(3) { top: 80%; background: linear-gradient(90deg, transparent, rgba(102,183,255,.26), transparent); animation-duration: 43s; animation-direction: alternate-reverse; }
@keyframes club-laser-a { from { transform: translate3d(0,-32px,0) rotate(-19deg); } to { transform: translate3d(0,54px,0) rotate(-13deg); } }
@keyframes club-laser-b { from { transform: translate3d(0,30px,0) rotate(16deg); } to { transform: translate3d(0,-44px,0) rotate(21deg); } }

/* Two additional, gently drifting beams, randomized once per page load. */
.club-bg-lasers .club-bg-random-laser {
    top: var(--laser-top);
    background: linear-gradient(90deg, transparent, rgba(var(--laser-color), .32), transparent);
    box-shadow: 0 0 14px 2px rgba(var(--laser-color), .05);
    transform: translate3d(0, var(--laser-y-from), 0) rotate(var(--laser-angle-from));
    animation: club-laser-random var(--laser-duration) ease-in-out var(--laser-delay) infinite alternate;
}
@keyframes club-laser-random {
    from { transform: translate3d(0, var(--laser-y-from), 0) rotate(var(--laser-angle-from)); }
    to { transform: translate3d(0, var(--laser-y-to), 0) rotate(var(--laser-angle-to)); }
}

/* No live backdrop blur. Only the beam layer is masked beneath reading areas. */
.site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(90deg, #080711, #0a0814); }
.page-home .club-photo figcaption { -webkit-backdrop-filter: none; backdrop-filter: none; }
.page-hero::after { display: none; }
.club-background[data-motion="paused"] .club-bg-plane *, .club-background[data-suspended="true"] .club-bg-plane * { animation-play-state: paused; }
.club-background[data-motion="paused"] .club-bg-plane { transition: none; }
.background-preferences { display: flex; align-items: center; margin: 1.35rem 0 .6rem; font-size: .78rem; }
.background-preferences button { padding: .5rem 0; border: 0; background: transparent; color: #c9bfd9; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .3rem; }
.background-preferences button:hover { color: var(--ink); }
.background-preferences button:disabled { cursor: default; color: var(--muted); text-decoration: none; }
.background-preferences [hidden] { display: none; }
@media (hover: none), (pointer: coarse) {
    .club-bg-plane { transform: none; transition: none; }
    .background-preferences button { min-height: 44px; display: inline-flex; align-items: center; }
    .background-preferences [hidden] { display: none; }
}
@media (max-width: 760px) { .club-bg-lasers { opacity: .7; } }
@media (prefers-reduced-motion: reduce) {
    .club-background * { animation: none !important; transition: none !important; }
    .club-bg-plane { transform: none !important; }
}