/* MLINO — the animated weather sky (see melino-sky.js). Decorative only: no pointer events, hidden from assistive technology. The centre of the
   page (the robot, its line and the input) is kept quiet by a soft mask; nothing here is a full-screen filter. */
.msky { position: absolute; inset: 0; overflow: hidden; pointer-events: none; contain: layout paint; }
.msky-scene, .msky-field, .msky-top { position: absolute; inset: 0; }
.msky-scene { animation: msky-in .9s ease both; }
.msky-out { animation: msky-out .9s ease both; }
.msky-field { -webkit-mask-image: radial-gradient(ellipse 26% 42% at 50% 46%, rgba(0, 0, 0, .12) 20%, #000 100%); mask-image: radial-gradient(ellipse 26% 42% at 50% 46%, rgba(0, 0, 0, .12) 20%, #000 100%); }
.msky-p { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: auto; user-select: none; will-change: transform; animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: var(--delay); animation-duration: var(--d); }

/* sun and moon: very slow; the sun breathes its light, the moon's glow comes and goes */
.msky-sun, .msky-moon { left: auto; inset-inline-start: 7%; top: 5%; animation: msky-float var(--d) ease-in-out infinite; }
.msky-sun { filter: drop-shadow(0 0 28px rgba(255, 196, 80, .55)); }
.msky-moon { filter: drop-shadow(0 0 22px rgba(220, 230, 255, .45)); animation-name: msky-moon; }
@media (max-width: 640px) { .msky-sun, .msky-moon { width: calc(var(--s) * .62); top: 8%; inset-inline-start: 4%; } }

/* clouds cross the top and the edges at different sizes and speeds; darker by night and in the rain */
.msky-cloud, .msky-stormCloud { left: 0; opacity: .95; animation-name: msky-cloud; filter: drop-shadow(0 10px 18px rgba(40, 60, 80, .12)); }
.msky-cloud.far, .msky-stormCloud.far { opacity: .6; filter: blur(1.2px); z-index: -1; }
.msky[data-day="false"] .msky-cloud { filter: brightness(.7) saturate(.7); opacity: .85; }
.msky[data-state="rain"] .msky-cloud, .msky[data-state="drizzle"] .msky-cloud { filter: brightness(.82) saturate(.85); }
.msky[data-state="rain"][data-day="false"] .msky-cloud, .msky[data-state="drizzle"][data-day="false"] .msky-cloud { filter: brightness(.5) saturate(.6); }
.msky[data-day="false"] .msky-stormCloud { opacity: .85; }

/* rain: slanted streaks in two depths and a few near drops */
.msky-streak { top: -40px; opacity: .62; animation-name: msky-fall; filter: brightness(1.55) saturate(.55); }
.msky-streak.far { opacity: .38; width: calc(var(--s) * .7); }
.msky[data-day="false"] .msky-streak { filter: brightness(1.3) saturate(.7); }
.msky-drop { top: -30px; opacity: var(--o); animation-name: msky-fall; }
.msky-hail { top: -30px; opacity: .9; animation-name: msky-hail; }

/* snow, leaves */
.msky-snowflake { top: -60px; opacity: .92; animation-name: msky-tumble; filter: drop-shadow(0 0 3px rgba(205, 244, 255, .3)); }
.msky-snowDot { top: -20px; opacity: var(--o); animation-name: msky-snow; }
.msky-leaf, .msky-greenLeaf { top: -60px; opacity: .95; animation-name: msky-leaf; }

/* night sky, dust, wind */
.msky-star { opacity: var(--o); animation-name: msky-twinkle; animation-timing-function: ease-in-out; top: calc(var(--y) * .55); }
.msky-dust { opacity: var(--o); animation-name: msky-drift; animation-timing-function: ease-in-out; }
.msky-wind { opacity: 0; left: 0; animation-name: msky-gust; animation-timing-function: ease-in-out; top: calc(var(--y) * .6); }

/* fog and heat: soft gradients that move, opacity bounded so the page never turns white */
.msky-mist { left: -10%; width: var(--s); height: 200px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(245, 249, 255, .55), rgba(245, 249, 255, 0) 70%); animation-name: msky-mist; animation-timing-function: ease-in-out; animation-direction: alternate; }
.msky[data-state="dust"] .msky-mist { background: radial-gradient(ellipse at center, rgba(209, 181, 141, .45), rgba(209, 181, 141, 0) 70%); }
.msky[data-state="cold"] .msky-mist { background: radial-gradient(ellipse at center, rgba(220, 238, 255, .4), rgba(220, 238, 255, 0) 70%); }
.msky[data-day="false"] .msky-mist { background: radial-gradient(ellipse at center, rgba(170, 190, 215, .28), rgba(170, 190, 215, 0) 70%); }
.msky-heat { left: -10%; width: var(--s); height: 260px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 209, 135, .3), rgba(255, 209, 135, 0) 70%); animation-name: msky-mist; animation-timing-function: ease-in-out; animation-direction: alternate; }

/* lightning: one small bolt that shows softly now and then — never a flash of the whole page */
.msky-bolt { top: 9%; opacity: 0; animation-name: msky-bolt; animation-timing-function: ease-in-out; filter: drop-shadow(0 0 10px rgba(255, 220, 140, .5)); }
.msky-rainbow { inset-inline-end: 4%; left: auto; top: 3%; opacity: .32; animation: msky-in 2.4s ease both; }

/* the scene rests: hidden tab, after a while without a touch, while typing (html.calm), or when the visitor turned motion off (html.still) */
.msky-paused *, html.calm .msky *, html.page-hidden .msky * { animation-play-state: paused !important; }
html.still .msky .msky-p { animation: none !important; }
html.still .msky .msky-streak, html.still .msky .msky-drop, html.still .msky .msky-hail, html.still .msky .msky-snowDot, html.still .msky .msky-snowflake,
html.still .msky .msky-leaf, html.still .msky .msky-greenLeaf { top: var(--y); }
html.still .msky .msky-bolt, html.still .msky .msky-wind { display: none; }
html.still .msky .msky-p:nth-child(n + 7) { display: none; }

@keyframes msky-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes msky-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes msky-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(4deg); } }
@keyframes msky-moon { 0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 14px rgba(220, 230, 255, .3)); } 50% { transform: translateY(-6px); filter: drop-shadow(0 0 30px rgba(220, 230, 255, .6)); } }
@keyframes msky-cloud { from { transform: translateX(calc(-1 * var(--s) - 5vw)) scaleX(var(--flip, 1)); } to { transform: translateX(calc(var(--msky-w) + 5vw)) scaleX(var(--flip, 1)); } }
@keyframes msky-fall { from { transform: translate(0, 0); } to { transform: translate(-90px, calc(var(--msky-h) + 80px)); } }
@keyframes msky-hail { from { transform: translate(0, 0) rotate(0); } to { transform: translate(-50px, calc(var(--msky-h) + 80px)) rotate(110deg); } }
@keyframes msky-tumble { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(30px, calc(var(--msky-h) * .5)) rotate(calc(var(--turn) * .5)); } 100% { transform: translate(var(--drift), calc(var(--msky-h) + 80px)) rotate(var(--turn)); } }
@keyframes msky-snow { 0% { transform: translate(0, 0); } 50% { transform: translate(18px, calc(var(--msky-h) * .5)); } 100% { transform: translate(-10px, calc(var(--msky-h) + 40px)); } }
@keyframes msky-leaf { 0% { transform: translate(0, 0) rotate(-20deg); } 25% { transform: translate(60px, calc(var(--msky-h) * .25)) rotate(60deg); } 50% { transform: translate(-20px, calc(var(--msky-h) * .5)) rotate(140deg); } 75% { transform: translate(70px, calc(var(--msky-h) * .75)) rotate(230deg); } 100% { transform: translate(var(--drift), calc(var(--msky-h) + 80px)) rotate(var(--turn)); } }
@keyframes msky-twinkle { 0%, 100% { opacity: var(--o); transform: scale(1); } 50% { opacity: .12; transform: scale(.7); } }
@keyframes msky-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40px, -20px); } }
@keyframes msky-gust { 0% { transform: translateX(-30vw); opacity: 0; } 30% { opacity: .35; } 85% { opacity: .2; } 100% { transform: translateX(calc(var(--msky-w) + 10vw)); opacity: 0; } }
@keyframes msky-mist { from { transform: translateX(-8vw); } to { transform: translateX(14vw); } }
@keyframes msky-bolt { 0%, 86%, 100% { opacity: 0; } 89% { opacity: .55; } 91% { opacity: .2; } 93% { opacity: .5; } 96% { opacity: 0; } }