/* Currawong's sky: the layers' looks. With kit/sky.js (colours, in <head>)
   and kit/sky-scene.js (clouds, weather, trees). One copy for every Currawong
   site (2026-10-21).

   <cw-sky> is fixed behind the whole page. A page puts its own content above
   it (position: relative; z-index: 1 or more) and styles its words for
   html[data-sky="light"] and "dark". To show the sky only in a strip (ID's
   header bar), put <cw-sky> inside that strip and give the strip
   clip-path: inset(0): the sky stays fixed to the screen and the strip is a
   window onto it.

   Sizes a page may change: --cw-tree (the near trees' width) and
   --cw-tree-far. */
:root {
  --sky-top: #1b2431; --sky-mid: #131a23; --sky-low: #0c0e11;
  --sky-glow: #0c0e11; --sky-sun: #000000;
  --sky-near: #040506; --sky-far: #0f141b;
  --sky-cloud: #161c25; --sky-lit: #1f2733;
  --sun-o: 0; --glow-o: 0; --moon-o: 1;
  --sun-x: 50vw; --sun-y: 120vh;
  --cw-py: 0;
}
cw-sky {
  --cw-tree: min(60vw, 860px);
  --cw-tree-far: min(54vw, 760px);
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-low) 100%);
}
cw-sky[hidden] { display: none; }
cw-sky > * { position: absolute; }
cw-sky .cw-glow {
  left: calc(var(--sun-x) - 70vw); top: 40vh; width: 140vw; height: 110vh;
  background: radial-gradient(closest-side, var(--sky-glow), transparent);
  opacity: var(--glow-o);
}
cw-sky .cw-sun {
  left: var(--sun-x); top: var(--sun-y);
  width: clamp(54px, 7vw, 96px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sky-sun);
  box-shadow: 0 0 40px 14px color-mix(in srgb, var(--sky-sun) 55%, transparent), 0 0 160px 60px color-mix(in srgb, var(--sky-sun) 22%, transparent);
  opacity: var(--sun-o);
}
/* The clouds are drawn live by a WebGL shader on a small canvas that the
   browser scales up to the whole sky: they are soft, so a third of the
   pixels is plenty and an iPhone keeps up. Shown only when there is cloud. */
cw-sky .cw-clouds { inset: 0; width: 100%; height: 100%; display: none; }
cw-sky .cw-clouds.on { display: block; }
/* Overcast without WebGL: one grey sheet over the top of the sky. */
cw-sky .cw-overcast {
  inset: 0 0 35%;
  background: linear-gradient(180deg, var(--sky-cloud), transparent);
  opacity: 0;
}
/* The rainbow (sky.js sets --bow-o, -x and -y): a primary bow at 42 degrees,
   violet inside and red outside, the sky a touch brighter within it, and a
   faint secondary at 51 degrees with its colours the other way round, all at
   the sky's scale of 96vh per 34 degrees. Screened onto the sky, and fading
   out towards the ground. */
cw-sky .cw-bow {
  --r1: 118.6vh; --r2: 144vh;
  inset: 0;
  opacity: var(--bow-o, 0);
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at var(--bow-x, 50vw) var(--bow-y, 120vh),
      rgba(255, 255, 255, 0.07) calc(var(--r1) - 9vh), transparent calc(var(--r1) - 3.4vh),
      rgba(139, 92, 246, 0.5) calc(var(--r1) - 2.7vh), rgba(59, 130, 246, 0.55) calc(var(--r1) - 1.8vh),
      rgba(34, 197, 94, 0.55) calc(var(--r1) - 0.8vh), rgba(250, 204, 21, 0.6) var(--r1),
      rgba(251, 146, 60, 0.6) calc(var(--r1) + 0.9vh), rgba(239, 68, 68, 0.55) calc(var(--r1) + 1.8vh),
      transparent calc(var(--r1) + 2.7vh),
      transparent calc(var(--r2) - 3vh),
      rgba(239, 68, 68, 0.18) calc(var(--r2) - 2vh), rgba(250, 204, 21, 0.2) calc(var(--r2) - 0.5vh),
      rgba(34, 197, 94, 0.18) calc(var(--r2) + 0.8vh), rgba(139, 92, 246, 0.16) calc(var(--r2) + 2vh),
      transparent calc(var(--r2) + 3vh));
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 40%, transparent 92%);
  mask: linear-gradient(180deg, #000 0%, #000 40%, transparent 92%);
  transition: opacity 2s ease;
}
cw-sky .cw-mid { inset: 0; }
cw-sky .cw-rain { inset: 0; width: 100%; height: 100%; }
cw-sky .cw-fog {
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--sky-low) 70%, transparent) 55%, var(--sky-low) 100%);
  opacity: 0;
}
cw-sky .cw-flash { inset: 0; background: rgba(235, 240, 255, 0.22); opacity: 0; }

/* The gums: alpha masks (currawong-site/tools/make-gums.py) filled with the
   sky's tree colours, swaying a little from the corner they hang from, until
   sky-scene.js has the pieces and draws them leaf by leaf on the canvases,
   into the same boxes. */
cw-sky .cw-gum {
  top: -3%;
  width: var(--cw-tree);
  aspect-ratio: 1100 / 900;
  -webkit-mask: var(--m) 0 0 / 100% 100% no-repeat;
  mask: var(--m) 0 0 / 100% 100% no-repeat;
  animation: cw-sway 11s ease-in-out infinite alternate;
  will-change: rotate;
  transition: opacity 0.8s ease;
}
cw-sky .cw-gum-l { left: -3%; transform-origin: 0 0; }
cw-sky .cw-gum-r { right: -3%; transform-origin: 100% 0; animation-duration: 13s; animation-delay: -5s; }
cw-sky .cw-gum-near { background: var(--sky-near); }
cw-sky .cw-gum-far { background: var(--sky-far); width: var(--cw-tree-far); animation-duration: 16s; }
cw-sky .cw-gum-r.cw-gum-far { animation-duration: 19s; }
cw-sky .cw-gum-l.cw-gum-near { --m: var(--cw-gum-left-near, url(../brand/gum-left-near.webp)); }
cw-sky .cw-gum-r.cw-gum-near { --m: var(--cw-gum-right-near, url(../brand/gum-right-near.webp)); }
cw-sky .cw-gum-l.cw-gum-far { --m: var(--cw-gum-left-far, url(../brand/gum-left-far.webp)); }
cw-sky .cw-gum-r.cw-gum-far { --m: var(--cw-gum-right-far, url(../brand/gum-right-far.webp)); }
@keyframes cw-sway { from { rotate: -0.8deg; } to { rotate: 1.1deg; } }
cw-sky .cw-gums { inset: 0; width: 100%; height: 100%; display: none; }
.cw-gums-on cw-sky .cw-gums { display: block; }
.cw-gums-on cw-sky .cw-gum { visibility: hidden; animation: none; }
.trees-wait cw-sky .cw-gum { opacity: 0; }
cw-sky[notrees] .cw-gum, cw-sky[notrees] .cw-gums { display: none; }
@media (max-width: 760px) {
  /* bigger and partly off the edges, so the leaves are leaf-sized */
  cw-sky { --cw-tree: 118vw; --cw-tree-far: 104vw; }
  cw-sky .cw-gum { top: -1%; }
  cw-sky .cw-gum-l { left: -46vw; }
  cw-sky .cw-gum-r { right: -46vw; }
}

/* Parallax, scroll only (sky-scene.js sets --cw-py, how far the page has
   scrolled, on <cw-sky> and on any element of the page marked data-cw-py:
   a page that wants it outside the sky marks that element). The sun and its glow rise 1.5% of the scroll, the clouds 2.5%
   (capped so the cloud canvas, 6vh taller than the screen for this, never
   shows its bottom edge), the far trees 4%, the near ones 8%. */
cw-sky .cw-glow, cw-sky .cw-bow { translate: 0 calc(var(--cw-py) * -0.015px); }
cw-sky .cw-sun { translate: -50% calc(-50% + var(--cw-py) * -0.015px); }
cw-sky .cw-clouds { height: calc(100% + 6vh); translate: 0 max(-6vh, calc(var(--cw-py) * -0.025px)); }
cw-sky .cw-gum-far { translate: 0 calc(var(--cw-py) * -0.04px); }
cw-sky .cw-gum-near { translate: 0 calc(var(--cw-py) * -0.08px); }

@media (prefers-reduced-motion: reduce) {
  cw-sky .cw-gum { animation: none; }
}

/* The currawongs (a page's own <button class="cw-sound">): a pill top right
   that stays put while the page scrolls. Its words are the page's. */
.cw-sound {
  position: fixed; top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); z-index: 9;
  display: none; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid rgba(226, 178, 60, 0.45); border-radius: 999px;
  background: rgba(28, 32, 39, 0.7); color: #fff;
  font: 700 14px system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html[data-sky='light'] .cw-sound { background: rgba(255, 255, 255, 0.72); color: #0f141b; border-color: rgba(111, 74, 0, 0.45); }
.cw-sound.on-page { display: inline-flex; }
.cw-sound[aria-pressed="true"] span::after { content: ' on'; }
.cw-sound[aria-pressed="true"] { border-color: #e2b23c; }
.cw-sound:focus-visible { outline: 2px solid #e2b23c; outline-offset: 3px; }
.cw-sound svg { width: 18px; height: 18px; }

/* The test panel (?try): a clock and the weather to pick. */
.cw-skypanel {
  position: fixed; right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 2147483000;
  width: min(320px, calc(100vw - 24px)); padding: 12px 14px;
  border: 1px solid #2a313b; border-radius: 14px;
  background: #1c2027; color: #e3e6ea;
  font: 14px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; box-shadow: 0 12px 40px -16px rgba(0, 0, 0, 0.5);
}
.cw-skypanel label { display: grid; gap: 4px; font-weight: 700; }
.cw-skypanel output { font: 600 14px ui-monospace, 'SF Mono', Menlo, monospace; }
.cw-skypanel input { width: 100%; }
.cw-skypanel .row { display: flex; gap: 8px; margin-top: 8px; }
.cw-skypanel button, .cw-skypanel select { font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid #2a313b; background: #14171c; color: #fff; }
.cw-skypanel select { flex: 1; }
.cw-skypanel .facts { margin: 8px 0 0; color: #8e96a1; font-size: 12.5px; line-height: 1.45; }