/* Time-of-day palettes for the postcard and garden backdrops (public/scenery.mjs). */
[data-time]{
 --sky:#cfe8f3;--sky-low:#eef6ea;--sun:#fff0a6;--sun-shade:#f2c95c;--sun-glow:#fff8d000;
 --hill-back:#9fc882;--hill-back-shade:#80ad67;--hill-front:#bcd98d;--hill-front-shade:#9dc071;--hill-light:#dcefb6;
 --fence:#fff6dd;--fence-shade:#dcc9a3;--ground-top:#d9e8bf;--ground:#c7dca5;--ground-low:#b4cf91;--path:#f1e3be;--path-edge:#d2bd8f;
 --scene-filter:none;--stars:0;--moon:0;--sun-on:1;--night-lights:0;
}
[data-time=dawn]{
 --sky:#f7c6c8;--sky-low:#ffe2c0;--sun:#ffe7a0;--sun-shade:#f5b77a;--sun-glow:#fff1c255;
 --hill-back:#a9bf98;--hill-back-shade:#8ea784;--hill-front:#c6d3a2;--hill-front-shade:#a9ba88;--hill-light:#e7ecc4;
 --fence:#fff1dc;--fence-shade:#e0c3a8;--ground-top:#e3e4c6;--ground:#d0dab0;--ground-low:#bccb9c;--path:#f5e2c6;
 --scene-filter:saturate(.95);
}
[data-time=dusk]{
 --sky:#f2a488;--sky-low:#ffd49a;--sun:#ffb65e;--sun-shade:#e27d45;--sun-glow:#ffcf8a66;
 --hill-back:#8f9d73;--hill-back-shade:#737f5d;--hill-front:#abb27c;--hill-front-shade:#8e9464;--hill-light:#cfcd97;
 --fence:#f6dcc0;--fence-shade:#c99e7c;--ground-top:#d6cfa2;--ground:#bdbf8a;--ground-low:#a6a877;--path:#eed2a8;--path-edge:#c19b6c;
 --scene-filter:sepia(.18) saturate(1.05);
}
[data-time=night]{
 --sky:#2c3566;--sky-low:#454b82;--sun:#f4f0d2;--sun-shade:#cfc9a4;--sun-glow:#f4f0d222;
 --hill-back:#46605a;--hill-back-shade:#37504b;--hill-front:#5a7560;--hill-front-shade:#48614f;--hill-light:#72907a;
 --fence:#b9bccf;--fence-shade:#8589a6;--ground-top:#5f7a6a;--ground:#526d5d;--ground-low:#465f51;--path:#8e8f9c;--path-edge:#6d6e7e;
 --scene-filter:brightness(.78) saturate(.8) hue-rotate(-8deg);--stars:1;--moon:1;--sun-on:0;--night-lights:1;
}
.postcard-backdrop,.garden-sky,.garden-fence{display:block}
:is(.postcard-backdrop,.garden-sky,.garden-fence) .ink,.fence-post,.fence-rail,.hill-back,.hill-front{stroke:#1d1a1f}
.sky{fill:var(--sky)}.sky-low{fill:var(--sky-low)}
.sun{fill:var(--sun)}.sun-shade{fill:var(--sun-shade)}.sun-light{fill:#fffdf0;opacity:.9}.sun-glow{fill:var(--sun-glow)}
.sky-sun{opacity:var(--sun-on)}.sky-moon{opacity:var(--moon)}
.moon{fill:var(--sun)}.moon-shade{fill:var(--sun-shade)}.moon-crater{fill:var(--sun-shade)}
.stars{opacity:var(--stars)}.sky-star{fill:#fff6c9;stroke:#1d1a1f;stroke-width:.5}.garden-sky .sky-star{stroke-width:.35}
.hill-back{fill:var(--hill-back)}.hill-back-shade{fill:var(--hill-back-shade)}
.hill-front{fill:var(--hill-front)}.hill-front-shade{fill:var(--hill-front-shade)}.hill-front-light{fill:var(--hill-light)}
path.hill-front[fill=none]{fill:none}
.fence-post,.fence-rail{fill:var(--fence)}.fence-shade{fill:var(--fence-shade)}
[data-time] :is(.sky,.sky-low,.sun,.moon,.hill-back,.hill-front,.fence-post,.fence-rail,.stars,.sky-sun,.sky-moon){transition:fill 1.2s,opacity 1.2s}

/* Postcard */
.postcard-scene[data-time]{background:var(--sky)}
.postcard-backdrop{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.postcard-scene[data-time] .postcard-decorations,.postcard-scene[data-time]>.postcard-monster{filter:var(--scene-filter)}

/* Garden */
.garden-stage[data-time]{background:linear-gradient(var(--ground-top) 0%,var(--ground) 55%,var(--ground-low) 100%);border-color:#1d1a1f;border-width:1px}
.garden-sky{position:absolute;left:0;top:0;width:100%;height:52px;z-index:0}
.garden-stage>.garden-fence{position:absolute;left:-2%;width:104%;top:34px;height:34px;transform:rotate(-2deg)}
.garden-stage[data-time] .garden-path{background:var(--path);border:1.25px solid #1d1a1f;opacity:1;top:26%}
.garden-stage[data-time] .garden-path:after{border-color:var(--path-edge);opacity:.8}
.garden-stage[data-time] .garden-mailbox:after{background:#b48b62;border:1px solid #1d1a1f;left:16px}
.garden-stage[data-time] .garden-mailbox-box{background:#fbefe2;border:1.25px solid #1d1a1f;box-shadow:inset -4px -3px 0 #e3cdb8}
/* Filter each monster, not the residents layer: a filter there would become the monsters' positioning box. */
.garden-stage[data-time] :is(.garden-decorations,.garden-monster){filter:var(--scene-filter)}

/* Night: fairy lights along the fence and fireflies drifting over the scene. */
.fairy-lights,.fireflies{opacity:var(--night-lights);transition:opacity 1.2s}
.bulb-glow{opacity:.45;animation:fairy-twinkle 2.8s ease-in-out infinite;animation-delay:calc(var(--i) * -.37s)}
.fireflies{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.fireflies span{position:absolute;width:30px;height:30px;margin:-15px;border-radius:50%;background:radial-gradient(closest-side,#fff6a8 22%,#ffe56acc 36%,#ffe56a44 62%,#ffe56a00);
 animation:firefly-drift 9s ease-in-out infinite alternate,firefly-blink 3.1s ease-in-out infinite;animation-delay:calc(var(--i) * -1.3s),calc(var(--i) * -.7s)}
.fireflies span:nth-child(3n){width:20px;height:20px;margin:-10px}
.garden-stage .fireflies span{width:25px;height:25px;margin:-12.5px}
[data-time]:not([data-time=night]) .fireflies span,[data-time]:not([data-time=night]) .bulb-glow{animation-play-state:paused}
@keyframes fairy-twinkle{0%,100%{opacity:.55}50%{opacity:.15}}
@keyframes firefly-drift{0%{transform:translate(0,0)}33%{transform:translate(14px,-10px)}66%{transform:translate(-8px,-22px)}100%{transform:translate(10px,-6px)}}
@keyframes firefly-blink{0%,100%{opacity:.25}45%,60%{opacity:1}}
@media(prefers-reduced-motion:reduce){[data-time] *{transition:none!important}.bulb-glow,.fireflies span{animation:none!important}.fireflies span{opacity:.85}}
:root[data-message-effects=off] :is(.bulb-glow,.fireflies span){animation:none!important}