/* Calcebra scenery: the owner's paintings in the app's margins - a wide
   rail on the left and a slim band on top. Decorative (aria-hidden), never
   takes pointer events. appPages.js clips the layer to the frame. */

#scenery {
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
    background: #d9d3c4;
    clip-path: polygon(
        0 0,
        100% 0,
        100% var(--scene-top, 38px),
        var(--scene-left, 186px) var(--scene-top, 38px),
        var(--scene-left, 186px) 100%,
        0 100%
    );
}

#scenery .sc-probe {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--scene-left, 186px);
    height: var(--scene-top, 38px);
    visibility: hidden;
}

#scenery .sc-frame {
    position: absolute;
    inset: 0;
    opacity: 1;
    transition: opacity 2.4s ease;
}

#scenery .sc-frame.sc-entering { opacity: 0; }

#scenery .scp-rail,
#scenery .scp-band {
    position: absolute;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-size: cover;
}

#scenery .scp-rail { bottom: 0; }
#scenery .scp-band { right: 0; }

/* The storybook landscape, rasterised once per look by sceneryPainted.js
   (the background under it is a plain wash for the first moment). */
#scenery .scp-rail,
#scenery .scp-band { overflow: hidden; }
#scenery .scp-art { position: absolute; display: block; }
/* Near trees: behind the fox (z 1) or in front of him (z 3, set by
   foxScene.js from where he stands). */
#scenery .scp-depth { z-index: 1; }
#scenery .scp-depth.scp-front { z-index: 3; }

/* The fox, small, like a hiker in a landscape painting. */
#scenery .scp-fox {
    position: absolute;
    bottom: 9%;
    height: clamp(34px, 6vh, 52px);
    width: auto;
    transform: translateX(-50%);
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
}

#scenery .scp-fox-camp {
    left: 50%;
    bottom: 14%;
    height: clamp(40px, 7vh, 58px);
    border-radius: 50%;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}

#scenery .scp-moon-wrap {
    position: absolute;
    right: 22%;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
}

#scenery .scp-moon { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 4px rgba(243, 239, 224, 0.45)); }

/* Slow, small motion only. */
#scenery .scp-walk { animation: scp-walk 4.8s ease-in-out infinite; }
#scenery .scp-breathe { animation: scp-breathe 7s ease-in-out infinite; }

@keyframes scp-walk {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-1.5px); }
}

@keyframes scp-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.88; }
}

#scenery.sc-still .sc-frame { transition: none; }
#scenery.sc-still *,
#scenery.sc-fox-still .scp-fox { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
    #scenery .sc-frame { transition: none; }
    #scenery * { animation: none !important; }
}