/* =============================================================================
   ŁĄKA — cała strona to jedna ilustracja (html.laka)
   Scena (js/laka.js) leży pod treścią przez całą wysokość strony; sekcje są przezroczyste.
   ============================================================================= */
html.laka { background: #a9cde6; color-scheme: light; }
html.laka body { background: #fff; }
html.laka.grain-on body { background: #a9cde6; }
.laka-scene {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.laka-scene canvas {   /* pixel art: skalowanie bez wygładzania — ostre, równe piksele */
  display: block;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
html.laka.grain-on .laka-scene { opacity: 1; }

/* Sekcje nad sceną, bez własnych teł */
html.laka main,
html.laka .hero,
html.laka .gallery,
html.laka .contact { position: relative; z-index: 1; }
html.laka.grain-on .hero { background: transparent !important; }
html.laka .hero { overflow: clip visible; }   /* cień terminala nie urywa się na dole hero (niebo idzie dalej) */
html.laka .gallery,
html.laka .contact { background: transparent !important; box-shadow: none !important; }
html.laka .gallery__wall,
html.laka:not(.scenes) .works,
html.laka.scenes .laka-easels,
html.laka .order::before { display: none !important; }
/* Telefon (tryb scen): galeria zostaje jak była — przesuwane sceny na własnych tłach */
html.laka.scenes .gallery { background: #0d0c0b !important; }

/* --- Galeria: sztalugi na łące --------------------------------------------------------- */
html.laka .gallery { min-height: 100vh; min-height: 100svh; }
@media (max-width: 767.98px) { html.laka:not(.scenes) .gallery { min-height: 190vh; min-height: 190svh; } }
.laka-easels { position: absolute; inset: 0; pointer-events: none; }
/* Sztaluga: nogi, maszt i głowica są w scenie; tu obraz (ostry screenshot + rama marki i zacisk w pixel arcie)
   i półka z pędzlami, która stoi przed dolną krawędzią ramy. Pozycje i rozmiary w siatce pikseli (JS). */
.easel { --px: 4px; position: absolute; }
.easel__art {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  transition: transform .18s steps(2, end);
  -webkit-tap-highlight-color: transparent;
}
.has-cursor .easel__art { cursor: none; }
.easel__win { position: absolute; overflow: hidden; background: #1a1714; }
.easel__shot {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 0;
}
.easel__frame,
.easel__tray {
  position: absolute;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
.easel__frame { inset: 0; width: 100%; height: 100%; }
.easel__tray { z-index: 1; pointer-events: none; }
.easel__art:hover,
.easel__art:focus-visible { transform: translateY(calc(var(--px) * -2)); }   /* obraz unosi się o dwa piksele sceny */
.easel__art:focus-visible { outline: calc(var(--px) * .5) solid #fff7e6; outline-offset: var(--px); }
@media (prefers-reduced-motion: reduce) { .easel__art { transition: none; } }

/* --- Kontakt: list i dane leżą na lnianym kocu ---------------------------------------- */
html.laka .contact { color: #231c14; }
html.laka .contact__title { color: #1d1712 !important; }
html.laka .contact__lede,
html.laka .contact__availability { color: #4a3e31 !important; }
html.laka .channels__label { color: #8a5a1c !important; }
html.laka .copy,
html.laka .copy__value,
html.laka .channels__link { color: #231c14 !important; }
html.laka .copy__badge { color: #8a5a1c !important; }
html.laka .channels__item { border-color: rgba(35, 28, 20, .16) !important; }
html.laka .order__card { box-shadow: 0 2px 3px rgba(60, 40, 10, .25), 0 30px 50px -20px rgba(60, 40, 10, .45) !important; }

/* --- Style sceny (?styl=): kolory tekstu hero pod ciemniejsze niebo + przełącznik wersji ------------ */
html.styl-morze .hero__title,
html.styl-klify .hero__title,
html.styl-sakura .hero__title { color: #fff4e2 !important; text-shadow: 0 2px 0 rgba(30, 20, 40, .28); }
html.styl-morze .hero__title em { color: #ffb27a !important; }
html.styl-klify .hero__title em { color: #ffcf7e !important; }
html.styl-sakura .hero__title em { color: #ffd2dc !important; }
html.styl-morze .lede,
html.styl-klify .lede,
html.styl-sakura .lede,
html.styl-morze .hero__contact,
html.styl-klify .hero__contact,
html.styl-sakura .hero__contact { color: #fbe9d6 !important; }
html.styl-las .hero__title em { color: #b8243a !important; }
html.styl-jezioro .hero__title em { color: #c8321e !important; }

.styl-switch {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 4px;
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  background: rgba(24, 18, 16, .82);
  border: 2px solid #fff4e2;
  box-shadow: 0 0 0 2px rgba(24, 18, 16, .82), 0 10px 24px rgba(0, 0, 0, .3);
  font: 600 .75rem/1 var(--f-mono, monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.styl-switch a { padding: .6em .9em; color: #fff4e2; text-decoration: none; white-space: nowrap; }
.styl-switch a:hover { background: rgba(255, 244, 226, .14); }
.styl-switch a[aria-current] { background: #fff4e2; color: #181210; }