/* Life, part 2 (js/scenes/life2.js): layers that make the quiet rooms move. */
.l2 { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; }
.l2-slice, .l2-rider, .l2-reel, .l2-pool, .l2-eyes, .l2-pass, .l2-film { right: auto; bottom: auto; }
.l2-slice { background-repeat: no-repeat; will-change: transform; }
.l2-rider { overflow: visible; will-change: transform; }
.l2-reel { will-change: transform; }
/* light that glows through the room's darkness */
.l2-pool { border-radius: 50%; mix-blend-mode: screen; will-change: transform, opacity; }
.l2-flash { background: radial-gradient(ellipse at 50% 30%, rgba(210,225,255,.9), rgba(170,190,240,.5) 60%, rgba(140,160,220,.25)); mix-blend-mode: screen; opacity: 0; }
.l2-dim { opacity: 0; }
/* the theatre's film: video plus grain, warped onto the painted screen */
.l2-film { overflow: hidden; opacity: 0; backface-visibility: hidden; }
.l2-film video, .l2-film canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.l2-film video { object-fit: cover; filter: sepia(.35) contrast(1.15) brightness(1.05) saturate(.8); }
/* flame licks retired in favour of bigger, better-placed ones */
.plick.l2-off { opacity: 0 !important; visibility: hidden; }
/* eyes in the pantry mouse hole */
.l2-eyes { display: flex; gap: 12px; justify-content: center; align-items: center; transform-origin: 50% 50%; }
/* small, slanted, soft-edged pinpricks of reflected light rather than flat yellow pills; they fade rather than pop */
.l2-eyes { mix-blend-mode: screen; transition: opacity .35s ease; }
.l2-eyes i { width: 8px; height: 4px; border-radius: 60% 40% 60% 40% / 70% 70% 30% 30%; background: radial-gradient(ellipse at 50% 55%, rgba(255,236,170,.95) 0, rgba(240,150,30,.75) 45%, rgba(200,80,0,0) 100%); box-shadow: 0 0 6px 1px rgba(230,120,20,.45); filter: blur(.4px); }
.l2-eyes i:first-child { transform: rotate(12deg); } .l2-eyes i:last-child { transform: rotate(-12deg); }
/* something passing the mausoleum doorway */
.l2-pass i { position: absolute; left: 0; top: 40px; width: 150px; height: 640px; border-radius: 45% 45% 10% 10%; background: radial-gradient(ellipse 50% 50% at 50% 45%, rgba(8,10,18,.95), rgba(8,10,18,.6) 55%, rgba(8,10,18,0) 100%); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .l2-flash, .l2-pass i { display: none; }
}