/* Animated ambient background — Amsterdam canal house facades pinned to the viewport bottom, slowly panning (like cruising the canal). Warm lit windows on indigo silhouettes. Kept OUT of the Tailwind build so we can iterate live in the pod (pod-sync + collectstatic, no image build). */ /* position:sticky (NOT fixed) on a real element at the end of : fixed bottom layers blank out on Firefox Android when the bottom navbar collapses. Sticky is scroll-linked, so the browser pins it to the visual viewport bottom correctly through toolbar changes. */ #canal-bg { position: sticky; bottom: 0; height: 26vh; z-index: -1; pointer-events: none; /* Washed-out look: soft blur + low opacity so the houses stay background texture rather than competing with content. */ filter: blur(3px); background-image: url('../img/canal-houses.svg'); background-size: auto 26vh; background-repeat: repeat-x; background-position: bottom center; /* Fade the gable tops into the page background */ -webkit-mask-image: linear-gradient(to top, #000 75%, transparent 100%); mask-image: linear-gradient(to top, #000 75%, transparent 100%); animation: canal-pan 140s linear infinite, canal-breathe 7s ease-in-out infinite alternate; } /* One tile = 1224/320 * 26vh = 99.45vh wide — pan by exactly one tile so the loop is seamless. */ @keyframes canal-pan { from { background-position-x: 0; } to { background-position-x: -99.45vh; } } @keyframes canal-breathe { from { opacity: 0.22; } to { opacity: 0.35; } } /* Empty fixed element that makes Firefox Android keep bottom-pinned sticky elements in sync when the mobile navbar collapses (see base.html #bg-sticky-fix). */ #bg-sticky-fix { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; z-index: -2; }