/* postfx.css: what the artist added to a scene in Blender (sky/postfx.js): light, mist, glow and bokeh over the scene */
.postfx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.postfx-hidden { visibility: hidden !important; }

/* the layer the light goes in: over the scene, under the buttons; in a room it slides with it */
.postfx-layer {
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    overflow: hidden;
    transition: opacity .6s;
}
.postfx-layer.on-page { position: fixed; }
.postfx-layer.away { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }

/* light and mist, drawn for a 1920 x 1080 screen: spread over this one */
.postfx-over {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.postfx-over.blend-screen { mix-blend-mode: screen; }
.postfx-over.blend-add { mix-blend-mode: plus-lighter; }

/* bokeh: a soft disc of light, brighter at dusk (--dusk, sky.js), breathing and wandering a little */
.postfx-bokeh {
    position: absolute;
    left: var(--bk-x);
    top: var(--bk-y);
    width: var(--bk-size);
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(var(--bk-c), .85) 0, rgba(var(--bk-c), .55) 42%, rgba(var(--bk-c), .18) 62%, rgba(var(--bk-c), 0) 72%);
    mix-blend-mode: screen;
    --bk-o: calc(var(--bk-s) * (var(--bk-day) + (1 - var(--bk-day)) * var(--dusk, 0)));
    opacity: var(--bk-o);
    will-change: transform, opacity;
}
.postfx-bokeh.behind { z-index: -1; }
.postfx-bokeh.breathes { animation: postfx-breathe var(--bk-pulse) ease-in-out var(--bk-delay) infinite alternate; }
/* (only scale, transform and opacity move: the graphics card does those, nothing is drawn again) */
@keyframes postfx-breathe {
    0% { scale: .92; transform: translate(0, 0); opacity: calc(var(--bk-o) * .85); }
    50% { transform: translate(var(--bk-drift), calc(var(--bk-drift) * -.6)); }
    100% { scale: 1.06; transform: translate(calc(var(--bk-drift) * -.5), calc(var(--bk-drift) * .4)); opacity: var(--bk-o); }
}
@media (prefers-reduced-motion: reduce) {
    .postfx-bokeh.breathes { animation: none; }
}

/* the toy camera's lens (sky/postfx.js "the toy camera"): over the scene, under the buttons. The settings come from Blender
   (tools/blender/toycam.py): --tc-vignette, --tc-warmth, --tc-punch, --tc-grain, 0 to 1 */
.toycam {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.toycam > i { position: absolute; inset: 0; }
/* a little more colour and contrast, like a photo of a model (the browser filters what's behind it: the dearest part) */
.toycam.punch {
    -webkit-backdrop-filter: saturate(calc(1 + var(--tc-punch) * .6)) contrast(calc(1 + var(--tc-punch) * .2));
    backdrop-filter: saturate(calc(1 + var(--tc-punch) * .6)) contrast(calc(1 + var(--tc-punch) * .2));
}
/* warmth: a warm (or cool) light laid softly over everything */
.toycam .tc-grade {
    background: radial-gradient(ellipse at 50% 40%, rgb(255, 196, 120), rgb(255, 150, 80));
    mix-blend-mode: soft-light;
    opacity: calc(var(--tc-warmth) * .55);
}
.toycam.cool .tc-grade { background: radial-gradient(ellipse at 50% 40%, rgb(150, 190, 255), rgb(90, 130, 230)); }
/* the corners: the lens lets less light in towards its edges */
.toycam .tc-vignette {
    background: radial-gradient(ellipse 72% 78% at 50% 48%, rgba(30, 18, 8, 0) 55%, rgba(30, 18, 8, .38) 78%, rgba(12, 7, 3, .82) 100%),
                radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .35) 100%);
    opacity: var(--tc-vignette);
}
/* film grain: one tile of specks (drawn once by postfx.js), hopping about ten times a second (only translate moves) */
.toycam .tc-grain {
    inset: -128px;
    background: var(--tc-tile) 0 0 / 128px repeat;
    mix-blend-mode: overlay;
    opacity: calc(var(--tc-grain) * .28);              /* (1 Nov: half what it was, everywhere: it was a bit much) */
    animation: toycam-grain .8s steps(1) infinite;
    will-change: transform;
}
@keyframes toycam-grain {
    0% { transform: translate(0, 0); }
    12.5% { transform: translate(-37px, 21px); }
    25% { transform: translate(52px, -44px); }
    37.5% { transform: translate(-71px, -13px); }
    50% { transform: translate(18px, 63px); }
    62.5% { transform: translate(84px, 29px); }
    75% { transform: translate(-25px, -78px); }
    87.5% { transform: translate(61px, -59px); }
}
@media (prefers-reduced-motion: reduce) {
    .toycam .tc-grain { animation: none; }
}
/* (31 Oct) the sea's lens over every scene (sky/postfx.js pageLens): its grain, darker corners and warmth, over the whole
   screen, taking no clicks. Layer 4, last on the page: over the rooms (3) and the garden (4), under every button (5 and up).
   Hidden while a scene's own toy camera shows its lens (the sea's), so it's never doubled */
.page-lens {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}
html:has(.postfx-layer:not(.away) .toycam) .page-lens { display: none; }
/* (31 Oct) from reset 5 on (the veil coming off), no lens at all: no grain, corners or warmth, here or on the sea (the sea's
   focus stays: that's not the lens) */
html:is([data-reset="5"], [data-reset="6"], [data-reset="7"], [data-reset="8"]) :is(.page-lens, .toycam) { display: none; }

/* (for a moment, while the toy camera asks what's painted under the pointer: everything can be found there) */
html.toycam-picking * { pointer-events: auto !important; }