/* components/backdrop.css Faint, slowly-panning map watermark behind all content. Flat 2D — the depth illusion comes from a top-lit gradient fill + a gentle drift/scale pan, not from shadows. */ /* Page colour lives on so the fixed backdrop (a body child) shows through the transparent body in the gaps between content. */ html { background-color: var(--bg-page); } body, .admin-body, .auth-body { background-color: transparent; } /* Real content sits above the watermark. */ body > *:not(.backdrop) { position: relative; z-index: 1; } .backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .backdrop__svg { position: absolute; top: 50%; left: 50%; width: 94vmax; height: 94vmax; opacity: 0.55; transform: translate(-50%, -50%); animation: backdrop-drift 52s ease-in-out infinite alternate; will-change: transform; } .backdrop__shape { stroke: var(--color-gray-900); stroke-opacity: 0.14; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; } @keyframes backdrop-drift { from { transform: translate(-53%, -49%) scale(1); } to { transform: translate(-47%, -53%) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .backdrop__svg { animation: none; } }