/* Instant takeover: the first rendered frame equals the photo pixel-for-pixel,
   so the canvas replaces it with no crossfade — no static→animated transition. */
.living-scene{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:none;}
.living-on>.living-scene{display:block;}
.living-on>.bg{transform:none;transition:none;will-change:auto;}
/* Identical framing before and after the first rendered animation frame. */
#p4>.bg,#p5>.bg,#p4.in>.bg,#p5.in>.bg{transform:none;transition:none;will-change:auto;}
#p2>.bg,#p2.in>.bg{transform:none;transition:none;will-change:auto;}
#p3>.bg,#p3.in>.bg{transform:none;transition:none;will-change:auto;}
/* Keep moving foliage visible behind the text while retaining the dark theme. */
#p5>.scrim.left{background:linear-gradient(90deg,rgba(2,3,8,.64) 0%,rgba(2,3,8,.42) 42%,rgba(2,3,8,.10) 72%,rgba(2,3,8,.30) 100%),linear-gradient(180deg,rgba(2,3,8,.30),rgba(2,3,8,.10) 40%,rgba(2,3,8,.58));}
@media(prefers-reduced-motion:reduce){.living-on>.living-scene{display:none;}.living-on>.bg{visibility:visible;}}