/* ==========================================================================
   thelink.id - background effects (bubbles, starfield)
   ========================================================================== */

.fx {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.fx canvas { display: block; }

.fx__bubble {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--surface-edge);
    box-shadow: -4px -4px 10px var(--light), 4px 4px 15px var(--shade);
    cursor: pointer;
    pointer-events: auto;
    will-change: transform;
    transition: box-shadow var(--dur) var(--ease);
}

.fx__bubble:hover {
    box-shadow: -6px -6px 15px var(--light-strong), 6px 6px 20px var(--shade);
}

.fx__spark {
    pointer-events: none;
    box-shadow: -2px -2px 5px var(--light), 2px 2px 8px var(--shade);
}

/* Glass rather than matte: for the flight, where the bubbles should read as
   soap over the stars instead of solid discs. */
.fx--glass .fx__bubble {
    background: radial-gradient(circle at 32% 28%,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(255, 255, 255, 0.12) 38%,
        rgba(255, 255, 255, 0.04) 62%,
        rgba(180, 200, 255, 0.14) 100%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
        inset -6px -8px 18px rgba(255, 255, 255, 0.25),
        inset 6px 8px 22px rgba(140, 170, 255, 0.18),
        0 6px 20px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.fx--glass .fx__bubble:hover {
    box-shadow:
        inset -6px -8px 18px rgba(255, 255, 255, 0.35),
        inset 6px 8px 22px rgba(140, 170, 255, 0.25),
        0 8px 26px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    .fx { display: none; }
}