/* 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;
    }
}