/* BYTESLIP layered background: five parallel swooping stripes ("sound ribbon").
   Added to each page with ONE line in <head>:  <link rel="stylesheet" href="/css/bg.css">
   No markup or JS needed: body::before = stripes (SVG with a baked-in blurred glow copy),
   body::after = dark depth scrim. Stripe shapes are generated (bg-wide.svg / bg-tall.svg). */

:root {
    --bs-bg-wide: url("/css/bg-wide.svg");
    --bs-bg-tall: url("/css/bg-tall.svg");
    --bs-panel: rgba(10, 10, 10, 0.86);
}

/* Layer 1: the ribbon */
body::before {
    content: "";
    position: fixed;
    inset: -6%;
    z-index: -2;
    background: var(--bs-bg-wide) center / cover no-repeat;
    pointer-events: none;
    will-change: transform;
    animation: bs-drift 28s ease-in-out infinite alternate;
}
@media (max-aspect-ratio: 4/5) {
    body::before { background-image: var(--bs-bg-tall); }
}

/* Layer 2: depth scrim, darker at the top (title) and corners, open through the middle/lower band */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.15) 38%, rgba(10,10,10,0) 60%, rgba(10,10,10,0.35) 100%),
        radial-gradient(ellipse at 50% 55%, rgba(10,10,10,0) 45%, rgba(10,10,10,0.55) 100%);
}

/* Slow wave drift: transform only (compositor), no per-frame JS */
@keyframes bs-drift {
    0%   { transform: translate3d(-1.5%, 0.8%, 0) rotate(-0.6deg) scale(1.00); }
    50%  { transform: translate3d(0.5%, -0.6%, 0) rotate(0.3deg) scale(1.025); }
    100% { transform: translate3d(1.5%, 0.6%, 0) rotate(0.8deg) scale(1.01); }
}
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; transform: none; }
}

/* Readability: buttons that are transparent by default get a dark backing */
.nav-btn, .donate-btn, .download-btn, .donate-link, .tut-link, .cta-btn, .ef-btn-free {
    background-color: rgba(10, 10, 10, 0.82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.donate-btn { background-color: rgba(26, 6, 19, 0.86); }

/* Content pages: page header bar + main column sit on one dark panel.
   (Home uses .max-w-5xl and is intentionally left open.) */
body > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .header-bar, .main-container) {
    background: var(--bs-panel);   /* no backdrop blur: keeps the drifting layer cheap to composite */
}
/* the main column (not the header bar) closes the panel */
body > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .main-container):not(.border-b) {
    border-radius: 0 0 16px 16px;
    margin-bottom: 24px;
}
/* about/thanks: main column (2xl) is narrower than the header (3xl); widen only the panel,
   keeping the same text width (39rem) by growing the side padding */
body > .max-w-2xl {
    max-width: 48rem;
    padding-left: max(1.5rem, calc((min(100vw, 48rem) - 39rem) / 2));
    padding-right: max(1.5rem, calc((min(100vw, 48rem) - 39rem) / 2));
}
/* privacy policy: header bar is 780px, same as main; nothing extra needed */

/* Small text that sits directly on the background (home page labels, footers): small dark pills */
body > .flex-1.text-center .font-mono:not(.text-transparent),
footer > div {
    display: table;
    margin-left: auto;
    margin-right: auto;
    padding: 2px 10px;
    border-radius: 6px;
    background: rgba(10, 10, 10, 0.78);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}