/* Yksi kenttä: sprite seinälle ja pölylle; oletustila on valaistu. */
[data-lamppu] {
  position: relative;
  --halli-rae-kuva: url("../../assets/img/rae-128.png");
}
main > section[data-lamppu] {
  container-type: inline-size;
  width: min(calc(100% - 2 * var(--reuna) + 2rem), calc(var(--maksimileveys) + 2rem));
  padding-inline: 1rem;
  --halli-sisareuna: 1rem;
  padding-top: clamp(5.5rem, 10vw, 9rem);
}
/* E3: 20px aukko - 16px puolikupu = 4px sisämarginaali.
   Otsikko 28px: aukko pysyy 8px otsikon vasemmalla puolella.
   Palveluryhmien E1-palsta ja sen calc säilyvät. */
@media (min-width: 641px) {
  main > section[data-lamppu]:not(.ryhma) { padding-inline: 1.75rem; --halli-sisareuna: 1.75rem; }
}
[data-lamppu] > :not(.lamppu) { position: relative; z-index: 2; }
.lamppu {
  position: absolute;
  left: calc(var(--lamppu-x) - var(--lamppu-koko) / 2);
  top: 0;
  width: var(--lamppu-koko);
  height: var(--lamppu-y);
  z-index: 2;
  pointer-events: none;
}
.lamppu svg { width: 100%; height: 100%; overflow: visible; }
.valaisin__kupu {
  transform: rotate(calc(var(--kartio-alku) + var(--kartio-avaus) / 2 - 180deg));
  transform-box: fill-box;
  transform-origin: 50% calc(100% - 4px);
}
.valaisin__aukko {
  fill: var(--valo);
  fill: color-mix(in srgb, var(--yomusta), var(--valo) calc(var(--halli-lahde, 1) * 100%));
  stroke: color-mix(in srgb, var(--valo) calc(var(--halli-lahde, 1) * 40%), transparent);
}
.valaisin__polttimo { opacity: var(--halli-lahde, 1); }
.lamppu::after {
  content: "";
  position: absolute;
  width: calc(var(--lamppu-koko) * 3);
  height: calc(var(--lamppu-koko) * 3);
  left: calc(var(--lamppu-koko) * -1);
  top: calc(var(--lamppu-y) - var(--lamppu-koko) * 1.5);
  z-index: -1;
  /* Pyöreä, reunaan nollautuva hohde; epäsymmetria tulee spritestä. */
  background: radial-gradient(circle closest-side, color-mix(in srgb, var(--valo) 22%, transparent), transparent 100%);
  opacity: calc(var(--halli-lahde, 1) * (0.94 + 0.06 * var(--halli-valo, 1)));
}
.lamppu__kartio::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: calc(-0.10 * var(--kartio-ulottuma));
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  bottom: calc(-0.10 * var(--kartio-ulottuma));
  background: var(--halli-rae-kuva) repeat 0 0 / 128px,
    url("../../assets/img/halli-seina-valo-512.webp") repeat 0 0 / 512px;
  background-blend-mode: soft-light, normal;
  -webkit-mask-image: url("../../assets/img/kartio-768.png"), linear-gradient(to bottom, #000 calc(100% - 0.20 * var(--kartio-ulottuma)), transparent 100%);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: var(--kartio-ulottuma), 100% 100%;
  /* cqw + sisäreunat = osion leveys. mask-positionin % viittaisi maskin vapaaseen tilaan.
     Ylälaajennus 0.10 R kumoaa spriten kärjen 0.10 R -siirron. */
  -webkit-mask-position: calc(var(--lamppu-x) + 50vw - 50cqw - var(--halli-sisareuna) - var(--kartio-ulottuma) * 0.25) var(--lamppu-y), 0 0;
  -webkit-mask-composite: source-in;
  mask-image: url("../../assets/img/kartio-768.png"), linear-gradient(to bottom, #000 calc(100% - 0.20 * var(--kartio-ulottuma)), transparent 100%);
  mask-repeat: no-repeat, no-repeat;
  mask-size: var(--kartio-ulottuma), 100% 100%;
  mask-position: calc(var(--lamppu-x) + 50vw - 50cqw - var(--halli-sisareuna) - var(--kartio-ulottuma) * 0.25) var(--lamppu-y), 0 0;
  mask-composite: intersect;
  opacity: calc(var(--halli-valo, 1) * var(--kartio-peitto));
}
/* §46.7 / K11: sama staattinen rae kuvassa myös no-JS- ja reduced-tilassa.
   Ei animaatiota eikä JS-riippuvuutta; kuvien istutus jatkuu ketjussa 4B. */
[data-lamppu] .pilari__kuva { position: relative; align-self: start; }
[data-lamppu] .pilari__kuva::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--halli-rae-kuva) repeat;
  background-size: 128px;
  opacity: var(--halli-rae-peitto);
}
[data-halli-poly] {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
@media (max-width: 640px) {
  main > section[data-lamppu] { padding-inline: 1.5rem; --halli-sisareuna: 1.5rem; }
  .tapa[data-lamppu] .tapa__kohdat,
  .tapa[data-lamppu] .tapa__kohdat li { padding-inline-start: 0; }
  .ryhma[data-lamppu] > h2 { grid-row: 1; }
  .ryhma[data-lamppu] > .pilari__kuva { grid-row: 2; }
}
.motion-off [data-lamppu] {
  --halli-valo: 1 !important;
  --halli-lahde: 1 !important;
  --halli-viiva: 1 !important;
}
.motion-off [data-halli-poly] { display: none; }
@media (prefers-reduced-motion: reduce) {
  [data-lamppu] {
    --halli-valo: 1 !important;
    --halli-lahde: 1 !important;
    --halli-viiva: 1 !important;
  }
  [data-lamppu] > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  [data-halli-poly] { display: none; }
}
@media (prefers-reduced-data: reduce) {
  [data-halli-poly] { display: none; }
}