/* eaf-art.css: pixel-art bands and the pixel cat for the Evil ASF redesign (Lilac & Co., 2026-10-23).
   A band is any element with data-scene="ID"; eaf-art.js puts a canvas in it. Without JavaScript the band shows a gradient.
   Children of a band (a title plate, the hero text) sit above the art. See ART-API.md. */

.art-band { position: relative; overflow: hidden; isolation: isolate; display: block;
  /* no-JS / loading fallback: the lamp-lit vault in its own colours (the canvas covers it once drawn) */
  background: radial-gradient(ellipse 60% 70% at 50% 18%, #4A3420 0%, #2A1F16 38%, #15100C 70%, #0E0C0A 100%); }
.art-band > .eaf-canvas { position: absolute; left: 0; top: 0; z-index: 0; display: block; pointer-events: none;
  image-rendering: crisp-edges; image-rendering: pixelated; }
.art-band > :not(.eaf-canvas) { position: relative; z-index: 1; }

/* day shift fallback: sun through the high window, warm paper tones */
html[data-theme="day"] .art-band, html[data-theme="light"] .art-band {
  background: radial-gradient(ellipse 60% 70% at 62% 12%, #FFF3D2 0%, #E6D3AE 34%, #C9B38E 66%, #A68E69 100%); }
@media (prefers-color-scheme: light) {
  html:not([data-theme]) .art-band { background: radial-gradient(ellipse 60% 70% at 62% 12%, #FFF3D2 0%, #E6D3AE 34%, #C9B38E 66%, #A68E69 100%); }
}
html[data-shift="night"] .art-band, html.eaf-night-shift .art-band {
  background: radial-gradient(ellipse 60% 70% at 50% 18%, #3A5656 0%, #13232A 45%, #05080A 100%); }

/* default band sizes (a page may set its own height) */
.art-band--hero { height: 62vh; min-height: 360px; max-height: 760px; }
.art-band--head { height: clamp(190px, 30vh, 320px); }
.art-band--app { height: clamp(150px, 22vh, 240px); }
@media (max-width: 699px) {
  .art-band--hero { height: 56vh; min-height: 320px; }
  .art-band--head { height: 190px; }
}

/* the /lights egg: lamps go out in the scenes (helpers draw them off) and every art canvas dims on the compositor */
html.eaf-lights-off .eaf-canvas { filter: brightness(0.62) saturate(0.85); }

/* ---------- the pixel cat widget (EAF_CAT.mount) ---------- */
.eaf-cat { position: relative; display: inline-block; line-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.eaf-cat > .eaf-canvas { display: block; image-rendering: crisp-edges; image-rendering: pixelated; margin: 0 auto; pointer-events: none; }
.eaf-cat:focus-visible { outline: 2px solid #F0A62C; outline-offset: 2px; }
.eaf-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }