/* ---- bg.css ---- */
/* 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);
}

/* ---- hex-panel.css ---- */
/* BYTESLIP hex panel glow — site stylesheet.
   Faint octagon+square (4.8.8) tessellation INSIDE content panels + a controlled surging glow
   that lights only the hex edges (mask), leaving dark voids between them.
   Add with: <link rel="stylesheet" href="/css/hex-panel.css">
   Requires /css/bg.css panels. Respects prefers-reduced-motion. */

:root {
    --hex-tile: url("/css/oct-grid.svg?v=2");
    --hex-size: 44px 44px;  /* oct+square 4.8.8, 3px gap, stroke 0.65 */
    --hex-base-opacity: 0.10;        /* faint resting grid */
    --hex-surge-opacity: 0.75;
    --hex-period: 14s;               /* one full sweep loop */
}

/* Panels that bg.css already paints dark (apps/about/privacy/terms/tutorials/viewanalysis/thanks).
   isolation keeps blend modes inside the panel; overflow clips the surge. */
body > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .header-bar, .main-container, main.max-w-3xl) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Layer 1 — faint resting hex grid (fixed so header+main share one continuous lattice) */
body > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .header-bar, .main-container, main.max-w-3xl)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--hex-tile) 0 0 / var(--hex-size);
    opacity: var(--hex-base-opacity);
}

/* Layer 2 — surging glow, masked to the SAME hex grid so only edges light up */
body > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .header-bar, .main-container, main.max-w-3xl)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--hex-surge-opacity);
    mix-blend-mode: screen;
    background:
        linear-gradient(
            118deg,
            transparent 0%,
            transparent 36%,
            rgba(0, 249, 255, 0.55) 45%,
            rgba(255, 46, 154, 0.42) 50%,
            rgba(139, 92, 246, 0.48) 55%,
            transparent 64%,
            transparent 100%
        ),
        radial-gradient(
            ellipse 55% 40% at 20% 80%,
            rgba(0, 249, 255, 0.22),
            transparent 70%
        );
    background-size: 240% 240%, 120% 120%;
    background-position: 0% 45%, 30% 70%;
    -webkit-mask-image: var(--hex-tile);
    mask-image: var(--hex-tile);
    -webkit-mask-size: var(--hex-size);
    mask-size: var(--hex-size);
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    animation: hex-surge var(--hex-period) ease-in-out infinite;
}

@keyframes hex-surge {
    0%   { background-position: 0% 40%, 10% 80%; }
    50%  { background-position: 100% 55%, 70% 30%; }
    100% { background-position: 0% 40%, 10% 80%; }
}

/* Keep real content above the hex layers */
body > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .header-bar, .main-container, main.max-w-3xl) > * {
    position: relative;
    z-index: 1;
}

/* Home (optional): no big panel — apply a soft plate behind nav+donate only, not the title */
.hex-home-plate {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0 auto;
    max-width: 42rem;
    padding: 1.25rem 1rem 1.5rem;
    border-radius: 14px;
    background: rgba(10, 10, 10, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.hex-home-plate::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--hex-tile) 0 0 / var(--hex-size);
    opacity: 0.11;
    border-radius: inherit;
}
.hex-home-plate::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.75;
    mix-blend-mode: screen;
    border-radius: inherit;
    background: linear-gradient(
        118deg,
        transparent 0%,
        transparent 36%,
        rgba(0, 249, 255, 0.45) 46%,
        rgba(255, 46, 154, 0.35) 51%,
        rgba(139, 92, 246, 0.4) 56%,
        transparent 66%,
        transparent 100%
    );
    background-size: 240% 240%;
    background-position: 0% 50%;
    -webkit-mask-image: var(--hex-tile);
    mask-image: var(--hex-tile);
    -webkit-mask-size: var(--hex-size);
    mask-size: var(--hex-size);
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    animation: hex-surge var(--hex-period) ease-in-out infinite;
}
.hex-home-plate > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    body > :is(.max-w-2xl, .max-w-3xl, .max-w-4xl, .header-bar, .main-container, main.max-w-3xl)::after,
    .hex-home-plate::after {
        animation: none;
        opacity: 0;            /* static faint hex only (::before) */
        background: none;
    }
}

/* ---- live-a.css ---- */
/* Liveliness A — micro-interactions (buttons, focus, Support pulse, visit tick) */
:root {
    --live-cyan: #00f9ff;
    --live-mag: #ff00aa;
}

/* Nav / donate / download-style buttons: deeper glow + press */
.nav-btn, .donate-btn {
    transition:
        transform 0.18s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.22s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        background-color 0.18s ease;
}
.nav-btn:hover {
    border-color: var(--live-cyan);
    color: var(--live-cyan);
    box-shadow:
        0 0 22px rgba(0, 249, 255, 0.35),
        0 0 48px rgba(0, 249, 255, 0.12),
        inset 0 0 18px rgba(0, 249, 255, 0.06);
    transform: translateY(-2px);
}
.nav-btn:active, .donate-btn:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 0 10px rgba(0, 249, 255, 0.2);
}
.donate-btn:hover {
    border-color: var(--live-mag);
    color: #ffffff;
    box-shadow:
        0 0 24px rgba(255, 0, 170, 0.4),
        0 0 52px rgba(255, 0, 170, 0.15),
        inset 0 0 20px rgba(255, 0, 170, 0.08);
    transform: translateY(-2px);
}

/* Keyboard focus rings (cyan for nav, magenta for donate) */
.nav-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px #0a0a0a,
        0 0 0 4px var(--live-cyan),
        0 0 22px rgba(0, 249, 255, 0.35);
}
.donate-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px #0a0a0a,
        0 0 0 4px var(--live-mag),
        0 0 24px rgba(255, 0, 170, 0.4);
}
a:focus-visible {
    outline: 2px solid var(--live-cyan);
    outline-offset: 3px;
}

/* Soft pulse on Support */
.donate-btn {
    animation: live-a-pulse 3.6s ease-in-out infinite;
}
@keyframes live-a-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 170, 0); }
    50% {
        box-shadow:
            0 0 18px rgba(255, 0, 170, 0.28),
            0 0 36px rgba(255, 0, 170, 0.1);
    }
}
.donate-btn:hover { animation: none; }

/* Visit count: subtle tick when the number changes */
.glitch-number.live-tick {
    animation: live-a-tick 0.55s ease-out;
}
@keyframes live-a-tick {
    0%   { transform: translateY(-3px) scale(1.08); text-shadow: 0 0 10px var(--live-cyan); }
    60%  { transform: translateY(1px) scale(0.98); }
    100% { transform: translateY(0) scale(1); text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-btn, .donate-btn { transition: border-color 0.15s ease, color 0.15s ease; }
    .nav-btn:hover, .donate-btn:hover, .nav-btn:active, .donate-btn:active { transform: none; }
    .donate-btn { animation: none; }
    .glitch-number.live-tick { animation: none; }
}

/* ---- live-b.css ---- */
/* Liveliness B — ambient motion (secondary stripe drift, sparkles, scanline breathe, title stutter) */

/* Secondary, slower stripe drift on top of bg.css's bs-drift */
body::before {
    animation:
        bs-drift 28s ease-in-out infinite alternate,
        live-b-drift 48s ease-in-out infinite alternate;
}
@keyframes live-b-drift {
    0%   { filter: hue-rotate(0deg) brightness(1); }
    50%  { filter: hue-rotate(4deg) brightness(1.04); }
    100% { filter: hue-rotate(-2deg) brightness(1.02); }
}

/* Soft floating sparkles (pure CSS, two radial dots) */
body > .live-sparkles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
body > .live-sparkles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #00f9ff;
    box-shadow: 0 0 6px #00f9ff, 0 0 12px rgba(0, 249, 255, 0.35);
    opacity: 0;
    animation: live-b-spark 9s ease-in-out infinite;
}
body > .live-sparkles span:nth-child(2) {
    background: #ff6fcf;
    box-shadow: 0 0 6px #ff6fcf, 0 0 12px rgba(255, 0, 170, 0.3);
    animation-duration: 11s;
    animation-delay: -3s;
}
body > .live-sparkles span:nth-child(3) {
    background: #b8ff3c;
    box-shadow: 0 0 8px #b8ff3c;
    animation-duration: 10s;
    animation-delay: -6s;
}
body > .live-sparkles span:nth-child(4) {
    background: #8b5cf6;
    box-shadow: 0 0 8px #8b5cf6;
    animation-duration: 12s;
    animation-delay: -1.5s;
}
body > .live-sparkles span:nth-child(5) {
    background: #ffb020;
    box-shadow: 0 0 8px #ffb020;
    animation-duration: 8.5s;
    animation-delay: -4.5s;
}
body > .live-sparkles span:nth-child(1) { left: 12%; top: 22%; }
body > .live-sparkles span:nth-child(2) { left: 78%; top: 18%; }
body > .live-sparkles span:nth-child(3) { left: 55%; top: 42%; }
body > .live-sparkles span:nth-child(4) { left: 28%; top: 68%; }
body > .live-sparkles span:nth-child(5) { left: 86%; top: 72%; }

@keyframes live-b-spark {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0.6); }
    20%      { opacity: 0.55; transform: translateY(-14px) scale(1); }
    55%      { opacity: 0.4; transform: translateY(-28px) scale(0.9); }
    80%      { opacity: 0; transform: translateY(-40px) scale(0.5); }
}

/* Scanline opacity breathe */
.scanlines {
    animation: live-b-scan 6s ease-in-out infinite;
}
@keyframes live-b-scan {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* Title: occasional micro-stutter on top of existing glitch */
.glitch {
    animation: live-b-stutter 7s steps(1, end) infinite;
}
@keyframes live-b-stutter {
    0%, 88%, 92%, 96%, 100% { transform: translate(0, 0); }
    89% { transform: translate(-2px, 1px); }
    90% { transform: translate(2px, -1px); }
    91% { transform: translate(-1px, 0); }
    93% { transform: translate(1px, 1px); }
    94% { transform: translate(0, -1px); }
    95% { transform: translate(-2px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none !important; filter: none !important; transform: none !important; }
    body > .live-sparkles, .scanlines, .glitch { animation: none !important; }
    body > .live-sparkles { display: none; }
}

/* ---- live-c.css ---- */
/* Liveliness C — content life (staggered fade-in, card lift, shimmer border).
   Home: fade-in blocks. Also styles .app-card / .tut-card for when this sheet
   is applied site-wide on apps / tutorials pages. */

/* Staggered entrance */
body.live-ready .live-in {
    opacity: 0;
    transform: translateY(14px);
    animation: live-c-in 0.7s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
body.live-ready .live-in:nth-child(1) { animation-delay: 0.05s; }
body.live-ready .live-in:nth-child(2) { animation-delay: 0.18s; }
body.live-ready .live-in:nth-child(3) { animation-delay: 0.32s; }
body.live-ready footer.live-in { animation-delay: 0.48s; }

@keyframes live-c-in {
    to { opacity: 1; transform: translateY(0); }
}

/* App / tutorial cards: lift + stronger glow on hover */
.app-card, .tut-card {
    transition:
        transform 0.25s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}
.app-card:hover, .tut-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 249, 255, 0.45);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(0, 249, 255, 0.18);
}

/* Shimmer border (animated gradient stroke) */
.live-shimmer {
    position: relative;
}
.live-shimmer::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        120deg,
        transparent 20%,
        rgba(0, 249, 255, 0.7) 40%,
        rgba(255, 0, 170, 0.7) 50%,
        rgba(184, 255, 60, 0.55) 60%,
        transparent 80%
    );
    background-size: 220% 220%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.55;
    animation: live-c-shimmer 4.5s linear infinite;
}
@keyframes live-c-shimmer {
    0%   { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}
.live-shimmer:hover::before { opacity: 1; }

/* Demo card on the home preview so shimmer is visible without opening /apps */
.live-demo-card {
    margin: 2.5rem auto 0;
    max-width: 28rem;
    background: rgba(17, 17, 17, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.live-demo-card .k {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.35);
    font-family: ui-monospace, monospace;
    text-transform: uppercase;
}
.live-demo-card h3 {
    font-family: 'Space Grotesk', Inter, sans-serif;
    font-size: 1.15rem;
    color: #fff;
    margin: 0.35rem 0 0.4rem;
}
.live-demo-card p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
    body.live-ready .live-in {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .app-card, .tut-card { transition: border-color 0.15s ease; }
    .app-card:hover, .tut-card:hover { transform: none; }
    .live-shimmer::before { animation: none; opacity: 0.7; }
}