/* ==========================================================
           ANIMATED SCENE: living-room lighting over the still image
           Every layer shares viewBox 0 0 2400 1348 + xMidYMid slice,
           which matches object-fit:cover on .base-layer, so overlays
           stay pinned to the artwork at any viewport size.
           ========================================================== */

        .parallax-inner {
            position: absolute;
            inset: 0;
            z-index: 1;
            transform: scale(1.045) translate3d(var(--px, 0px), var(--py, 0px), 0);
            transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: transform;
        }

        .ambient-layer,
        .clock-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        /* additive light: at opacity 0 the artwork is untouched */
        .ambient-layer {
            z-index: 2;
            mix-blend-mode: screen;
        }

        .clock-layer { z-index: 3; }

        .ambient-layer ellipse,
        .ambient-layer circle,
        .ambient-layer rect,
        .ambient-layer path {
            transform-box: fill-box;
        }

        /* ---- screen surface: mostly steady, occasional content flicker ---- */
        @keyframes screenFlicker {
            0%, 44%, 100% { opacity: 0.13; }
            46%           { opacity: 0.30; }
            47%           { opacity: 0.08; }
            49%           { opacity: 0.26; }
            50%, 82%      { opacity: 0.15; }
            84%           { opacity: 0.25; }
            85%           { opacity: 0.10; }
        }
        .scr-main   { opacity: 0.13; animation: screenFlicker 9s steps(1, end) infinite; }

        /* ---- PC tower fans: staggered pink pulse ---- */
        @keyframes fanPulse {
            0%   { opacity: 0.32; }
            100% { opacity: 1;    }
        }
        .fan    { opacity: 0.6; animation: fanPulse 2.6s ease-in-out infinite alternate; }
        .fan.f2 { animation-delay: -1.05s; }
        .fan.f3 { animation-delay: -2.1s; }

        /* ---- lava lamp: glow plus blobs drifting up and down ---- */
        @keyframes lavaGlow {
            0%   { opacity: 0.42; }
            100% { opacity: 0.72; }
        }
        .lava-glow { opacity: 0.5; animation: lavaGlow 6s ease-in-out infinite alternate; }

        @keyframes blobDrift {
            0%   { transform: translateY(34px)  scale(1);    }
            50%  { transform: translateY(-46px) scale(0.82); }
            100% { transform: translateY(34px)  scale(1);    }
        }
        .blob    { opacity: 0.55; animation: blobDrift 15s ease-in-out infinite; }
        .blob.b2 { opacity: 0.45; animation-duration: 19s; animation-delay: -7s; }
        .blob.b3 { opacity: 0.38; animation-duration: 11.5s; animation-delay: -3.5s; }

        /* ---- alarm clock glow ---- */
        @keyframes clockGlow {
            0%   { opacity: 0.34; }
            100% { opacity: 0.52; }
        }
        .clock-glow { opacity: 0.4; animation: clockGlow 4.2s ease-in-out infinite alternate; }

        /* ---- city windows: additive twinkle on real lit pixels ---- */
        @keyframes cityTwinkle {
            0%, 100% { opacity: 0;    }
            40%      { opacity: 0.55; }
            60%      { opacity: 0.42; }
        }
        /* One animation per group instead of one per light: 84 composited
           animations collapse to 6, with the rects themselves static. */
        .citygrp {
            opacity: 0;
            animation: cityTwinkle 7s ease-in-out infinite;
            will-change: opacity;
        }

        .citygrp.g2 { animation-duration: 9.5s;  animation-delay: -1.8s; }
        .citygrp.g3 { animation-duration: 6.2s;  animation-delay: -3.4s; }
        .citygrp.g4 { animation-duration: 11s;   animation-delay: -5.1s; }
        .citygrp.g5 { animation-duration: 8.1s;  animation-delay: -6.7s; }
        .citygrp.g6 { animation-duration: 12.4s; animation-delay: -2.5s; }

        /* ---- streetlight: failing sodium lamp ---- */
        @keyframes streetFlicker {
            0%, 100% { opacity: 0.34; }
            3%       { opacity: 0.07; }
            5%       { opacity: 0.44; }
            6%       { opacity: 0.12; }
            8%       { opacity: 0.38; }
            30%      { opacity: 0.36; }
            31%      { opacity: 0.13; }
            32%      { opacity: 0.42; }
            55%      { opacity: 0.34; }
            56%      { opacity: 0.06; }
            58%      { opacity: 0.40; }
            59%      { opacity: 0.16; }
            61%      { opacity: 0.35; }
            85%      { opacity: 0.34; }
            86%      { opacity: 0.09; }
            88%      { opacity: 0.41; }
        }
        .streetlight { animation: streetFlicker 6.5s steps(1, end) infinite; }
        .sl-cone  { opacity: 0.55; }
        .sl-head  { opacity: 0.85; }
        .sl-bloom { opacity: 0.50; }

        /* ---- coffee steam ---- */
        @keyframes steamRise {
            0%   { opacity: 0;    transform: translateY(6px)   scaleX(1);   }
            22%  { opacity: 0.26; }
            65%  { opacity: 0.14; }
            100% { opacity: 0;    transform: translateY(-52px) scaleX(1.35); }
        }
        .steam path {
            opacity: 0;
            transform-origin: 50% 100%;
            animation: steamRise 7s ease-out infinite;
        }
        .steam .s2 { animation-duration: 8.5s;  animation-delay: -3s;   }
        .steam .s3 { animation-duration: 6.2s;  animation-delay: -5.2s; }

        /* ---- room-wide finish: vignette + film grain ---- */
        .scene-vignette,
        .scene-grain {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .scene-vignette {
            z-index: 2;
            background: radial-gradient(ellipse at 50% 48%,
                        rgba(0,0,0,0) 42%,
                        rgba(0,0,0,0.22) 78%,
                        rgba(0,0,0,0.42) 100%);
        }

        .scene-grain {
            z-index: 3;
            opacity: 0.045;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
        }

        /* ---- respect the OS motion preference ---- */
        @media (prefers-reduced-motion: reduce) {
            .parallax-inner { transform: scale(1.045); transition: none; }
            .scr-main,
            .fan, .lava-glow, .blob, .clock-glow, .citygrp,
            .steam path, .scene-grain, .streetlight, .hitbox.pulsed {
                animation: none !important;
            }
            .citygrp { opacity: 0.3; }
            .steam path { opacity: 0.12; }
            .hitbox.pulsed { opacity: 0.72; }
            /* same specificity as the screen rule in scene.css, and later in the
               cascade, so the pulse does not freeze dim */
            .hitbox.pulsed.is-screen:not(:hover) { opacity: 0.72; animation: none !important; }
        }