/* The Living Sky (spec docs/superpowers/specs/2026-09-30-living-sky-design.md §4.3, §5, §8.3). The stage is
   decorative (aria-hidden) and never takes pointer input. sky.js adds html.sky-live once it draws, or
   html.sky-still when motion is reduced, WebGL2 is missing or the engine fails; the still is then the image. */
body.observatory .obs-sky { pointer-events: none; view-transition-name: obs-sky; }
body.observatory .obs-sky > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
html:not(.sky-live) body.observatory .obs-sky > canvas { visibility: hidden; }

/* Home: between the art (z -2) and the scrim, so the scrim keeps the headline readable. */
body.observatory .hero > .obs-sky { position: absolute; inset: 0; z-index: -1; }
/* Articles: behind the forest hero's text; the cover below stays a separate figure. */
body.observatory .article-hero { position: relative; isolation: isolate; }
body.observatory .article-hero > .obs-sky { position: absolute; inset: 0; z-index: -1; }
/* The plate (parchment pages): the page photo dimmed under the sky, inside four copper registration corners. */
body.observatory .obs-plate { position: relative; }
body.observatory .obs-plate::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--obs-forest) 55%, transparent); pointer-events: none; }
body.observatory .obs-plate > .obs-sky { position: absolute; inset: 0; z-index: 2; }
body.observatory .obs-plate::after {
  content: ""; position: absolute; inset: -11px; z-index: 3; pointer-events: none;
  --c: linear-gradient(var(--verify), var(--verify));
  background: var(--c) 0 0 / 22px 1px, var(--c) 0 0 / 1px 22px, var(--c) 100% 0 / 22px 1px, var(--c) 100% 0 / 1px 22px,
    var(--c) 0 100% / 22px 1px, var(--c) 0 100% / 1px 22px, var(--c) 100% 100% / 22px 1px, var(--c) 100% 100% / 1px 22px;
  background-repeat: no-repeat;
}

/* Page to page (§5.2): the stage reshapes on the cover's curve; the old sky holds, then hands over to the live one. */
::view-transition-group(obs-sky) { animation-duration: var(--t-page); animation-timing-function: var(--ease-cine); }
::view-transition-old(obs-sky) { animation: sky-hold var(--t-page) linear both; }
::view-transition-new(obs-sky) { animation: sky-arrive var(--t-page) linear both; }
::view-transition-old(obs-sky), ::view-transition-new(obs-sky) { height: 100%; object-fit: cover; }
@keyframes sky-hold { 0%, 40% { opacity: 1; } to { opacity: 0; } }
@keyframes sky-arrive { 0%, 40% { opacity: 0; } to { opacity: 1; } }

/* The still (§5.7, G9): the page's shape as an image, fetched only when it is needed. */
html.sky-still body.observatory .obs-sky { background: 50% 50% / cover no-repeat; }
html.sky-still body.observatory .obs-sky[data-sky-form="home"] { background-image: url(/assets/images/sky/still-home-v1.webp); }
html.sky-still body.observatory .obs-sky[data-sky-form="library"] { background-image: url(/assets/images/sky/still-library-v1.webp); }
html.sky-still body.observatory .obs-sky[data-sky-form="article"] { background-image: url(/assets/images/sky/still-article-v1.webp); }

@media print {
  body.observatory .obs-sky, body.observatory .obs-plate::before, body.observatory .obs-plate::after { display: none; }
}