/* The rift backdrop. Pairs with rift.js and templates/partials/rift.html.
   Fixed to the viewport and behind everything: pages that scroll keep it still. */

#canvas-container {
    position: fixed;
    inset: 0;
    z-index: -2;
    will-change: transform;
}

#canvas-container canvas {
    width: 100%;
    height: 100%;
    display: block;
    /* Apply the distortion filter */
    filter: url(#gravitational-distortion);
    /* Add the slow breathing animation */
    animation: breathe 14s ease-in-out infinite alternate;
    transform-origin: center;
}

/* Keyframes for the slow CSS breathing effect */
@keyframes breathe {
    0% {
        transform: scale(1) rotate(-0.4deg);
        filter: url(#gravitational-distortion) blur(0px);
    }
    100% {
        transform: scale(1.06) rotate(0.8deg);
        filter: url(#gravitational-distortion) blur(1.2px);
    }
}

/* rift.js already skips the wave loop here; this stops the CSS half too, so the
   fractal is drawn and then completely still. */
@media (prefers-reduced-motion: reduce) {
    #canvas-container canvas {
        animation: none;
    }
}