/* estilo-sky — Calma's ambient nebula (sky.go). Quiet by default:
   --estilo-sky-strength is one number for the whole effect.

   Placement is the host's: [estilo-sky-host] is a positioned, clipped box,
   and a stacking context of its own, so the sky (z-index -1) paints above
   the host's background and beneath everything else in it, without
   touching how the host's other children are positioned — a sticky bar
   stays sticky. Move the sky with --estilo-sky-top and
   --estilo-sky-height, and set --estilo-sky-strength (0.5, Quiet) on the
   host or anywhere above it. */
[estilo-sky-host] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

[estilo-sky] {
  position: absolute;
  inset-inline: 0;
  top: var(--estilo-sky-top, -6%);
  height: var(--estilo-sky-height, 80%);
  pointer-events: none;
  z-index: -1;
}

/* Each layer overhangs the box so a drift never shows an edge, and fades
   in and out vertically so the sky has no top or bottom. */
[estilo-sky] img {
  position: absolute;
  left: -8%;
  top: -12%;
  width: 116%;
  height: 124%;
  max-width: none;
  opacity: calc(var(--estilo-sky-strength, 0.5) * var(--estilo-sky-gain, 1) * var(--estilo-sky-k, 1));
  -webkit-mask-image: linear-gradient(#0000, #000 22%, #000 58%, #0000 92%);
  mask-image: linear-gradient(#0000, #000 22%, #000 58%, #0000 92%);
  user-select: none;
}
/* The sky's colour is the placeholder: the haze and clouds computed into a
   few pixels and inlined, so it is there in the first frame (placeholder.go
   has the measurements against the full SVG drawing: 3/255 light, 8/255
   dark). Stretched to cover as an SVG's xMidYMid slice would, and softened
   so no pixel grid shows. The haze and clouds SVGs it replaced were
   drawing almost nothing on top of it, so they are no longer linked
   (impeccable's detector, 2026-09-29). Over it, two SVG layers carry what
   a few pixels cannot: the clouds' grain — faint light and dark specks that
   average to nothing — and the filaments. No script. */
[estilo-sky] img { object-fit: cover; }
[estilo-sky-layer="placeholder"] { filter: blur(24px); }
[estilo-sky-layer="grain"] { --estilo-sky-k: 1; }
/* The weights haze and clouds had when they were linked, kept for a page
   cached from then that still names them. */
[estilo-sky-layer="haze"] { --estilo-sky-k: 0.175; }
[estilo-sky-layer="clouds"] { --estilo-sky-k: 0.25; }
[estilo-sky-layer="filaments"] { --estilo-sky-k: 1.3; }

/* One placeholder per scheme; show the one that matches. An explicit
   Appearance choice ([data-theme]) beats the OS, as it does for estilo's
   theme. Both are inline, so neither costs a request. */
[estilo-sky-tone="dark"] { display: none; --estilo-sky-gain: 1.55; }
:root[data-theme="dark"] [estilo-sky-tone="light"] { display: none; }
:root[data-theme="dark"] [estilo-sky-tone="dark"] { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [estilo-sky-tone="light"] { display: none; }
  :root:not([data-theme="light"]) [estilo-sky-tone="dark"] { display: block; }
}

/* Drifting: the sky breathes, the grain with it, and the filaments
   slide. Slow enough to notice only if you look. */
@media (prefers-reduced-motion: no-preference) {
  [estilo-sky-layer="placeholder"], [estilo-sky-layer="grain"] { animation: estilo-sky-breathe-near 64s ease-in-out infinite alternate; }
  [estilo-sky-layer="filaments"] { animation: estilo-sky-drift 80s ease-in-out infinite alternate; }
}
@keyframes estilo-sky-breathe-near { to { transform: translate(-3%, 1.5%) scale(1.06); } }
@keyframes estilo-sky-drift { to { transform: translate(-4%, 1%); } }