/* One shared Midnight canvas. Content and light FAVE surfaces stay above it. */
body.midnight-scene{background:#101319;isolation:isolate}
.midnight-backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#101319}
.midnight-backdrop::before{content:"";position:absolute;inset:-12%;background:radial-gradient(ellipse at 16% 24%,#ff641a16,transparent 46%),radial-gradient(ellipse at 88% 64%,#b8f34b12,transparent 43%),radial-gradient(ellipse at 55% 8%,#52677d12,transparent 45%);animation:midnight-drift 28s ease-in-out infinite alternate;will-change:transform}
.midnight-backdrop::after{content:"";position:absolute;inset:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-repeat:repeat}
.midnight-pointer{position:absolute;inset:0;background:radial-gradient(ellipse 460px 360px at var(--ambient-x,65%) var(--ambient-y,25%),#ff641a0b,transparent 75%);opacity:0;transition:opacity .8s}
.midnight-scene.ambient-pointer .midnight-pointer{opacity:1}
.midnight-scene main>section:not(#fave):not(.fave){background-color:transparent}
.midnight-scene .brand-hero,.midnight-scene .home-pixelguide,.midnight-scene .projects,.midnight-scene .pricing,.midnight-scene .engagement{background:transparent}
/* The horizontal gallery is opaque while sticky: previous content cannot show through. */
.midnight-scene .project-rail-stage{background:radial-gradient(ellipse at 12% 20%,#ff641a0c,transparent 55%),radial-gradient(ellipse at 90% 80%,#b8f34b09,transparent 50%),#101319}
.midnight-scene .rail-pinned .project-rail-stage{background:radial-gradient(ellipse at 12% 20%,#ff641a0c,transparent 55%),radial-gradient(ellipse at 90% 80%,#b8f34b09,transparent 50%),#101319}
.midnight-scene .brand-hero::before,.midnight-scene .brand-hero::after{display:none}
.midnight-scene .footer{background:transparent}
/* Only the PixelGuide handover inside FAVE receives the dark color treatment. */
.fave-page .fave-connection{background:radial-gradient(ellipse at 15% 30%,#ff641a10,transparent 60%),radial-gradient(ellipse at 90% 70%,#b8f34b09,transparent 55%),#101319}
.ambient-paused .midnight-backdrop::before{animation-play-state:paused}
@keyframes midnight-drift{from{transform:translate3d(-1%,-1%,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.06)}}
@media(max-width:700px),(hover:none),(pointer:coarse){.midnight-backdrop::before{animation:none;will-change:auto}.midnight-pointer{display:none}}
@media(prefers-reduced-motion:reduce){.midnight-backdrop::before{animation:none;will-change:auto}.midnight-pointer{display:none}}
@media print{.midnight-backdrop{display:none}}