/* components/backdrop.css ───────────────────────────────────────────────────────────────────────────── The map watermark, viewed obliquely. The plane is tilted away from the camera and turned so the south-east corner is nearest, which is what makes the drift read as flight rather than as a picture sliding around. The route itself is driven by backdrop_controller.js — seeded per viewer, so it is the same every visit for that person and different between people. ───────────────────────────────────────────────────────────────────────────── */ /* 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; /* Dissolve the far edge into the page — a tilted plane that simply stops reads as a sheet of paper, not a horizon. */ mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.50) 4%, #000 14%, #000 80%, transparent 100%); } .backdrop__stage { position: absolute; inset: 0; /* Weak perspective, close to axonometric. A short focal length crushes the far half of the plane into a flat wash where no county border is resolvable — the map is still there, but it stops reading as a map. */ perspective: 3600px; /* High vanishing point: the ground has to reach up behind the hero, or the headline sits in empty sky and the watermark only starts below the fold. */ perspective-origin: 50% 6%; } /* Static camera angle: looking down at 52° from the south-east. The Z turn is what puts the south-east corner nearest the viewer — without it the tilt just reads as a map lying flat. */ .backdrop__tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(52deg) rotateZ(-45deg); } /* The only thing the controller touches — one transform write per frame. */ .backdrop__plane { position: absolute; left: 50%; /* Sized so the country reads as terrain filling the frame rather than as an object floating in it: a handful of counties in view at any moment, and enough map beyond the edges that the flight never runs out of ground. */ top: 50%; width: 120vmax; height: 120vmax; margin-top: -60vmax; margin-left: -60vmax; will-change: transform; } .backdrop__svg { width: 100%; height: 100%; } .backdrop__county { stroke: var(--color-gray-300); stroke-opacity: 0.42; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linejoin: round; } /* The signed-in aspirant's own county, when the backdrop is circling it. */ .backdrop__county.is-home { stroke: var(--color-blue-300); stroke-opacity: 0.55; stroke-width: 1.4; } /* Gradient stops for the county fill. Kept here rather than in the SVG so the theme owns them — top-lit blue fading into the page. */ .backdrop__grad-top { stop-color: var(--color-blue-500); stop-opacity: 0.26; } .backdrop__grad-bottom { stop-color: var(--color-gray-300); stop-opacity: 0.09; } /* Motion is the whole point, so when it is unwelcome the composition still has to stand on its own: the controller parks the plane mid-route and stops. */ @media (prefers-reduced-motion: reduce) { .backdrop__plane { will-change: auto; } }