/* Karlex-hehku (lisäosa): koko sivun tausta hehkuu kuin elävä tuli 10 s ja
   asettuu sitten lepoon. Lähde: vedokset/5a-hehku/hehku.css (Athos 18.10.2026,
   Kallen pyyntö) sovitettuna Karlex Yö -teeman lohkoluokkiin (suunnitelma.md 8.4).
   hehku.js arpoo kuudelle hehkupilvelle uuden paikan, koon ja voimakkuuden;
   CSS liu'uttaa välit. prefers-reduced-motion → hehku paikallaan, ei kipinöitä.

   Kerrosjärjestys juurikontekstissa (alhaalta ylös):
     body-tausta → heron kuva (Cover img, z 0) → heron liukumat (Cover
     __background, z 1) → .fire (z 2) → kipinät .glow (z 2, myöhemmin DOMissa)
     → sisältö (z 3) → heron sisältö (z 4: otsake ja mobiilivalikon peittokuva
     pysyvät myöhemmin DOMissa tulevan sisällön päällä).
   Hero itse ei saa omaa pinoamiskontekstia (z-index auto, ei isolation),
   jotta sen kuva ja liukumat jäävät hehkun alle ja värjäytyvät kuten
   koevedoksessa; kortit ja tekstit ovat hehkun päällä eivätkä värjäydy.
   Numerot ovat yhden pykälän speksiä (fire 1 / sisältö 2) ylempänä, koska
   Coverin liukumakerros on ytimessä jo z 1. */

.karlex-hero { overflow-x: clip; z-index: auto; isolation: auto; }
.wp-site-blocks > :not(.karlex-hero) { position: relative; z-index: 3; }
.karlex-hero > .wp-block-cover__inner-container { position: relative; z-index: 4; }
.karlex-hero > .wp-block-cover__image-background { z-index: 0; }
.karlex-hero > .wp-block-cover__background { z-index: 1; }

.fire {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  mix-blend-mode: screen; overflow: hidden;
}
.fire b {
  position: absolute; display: block; border-radius: 50%;
  opacity: var(--o, .5);
  transform: translate(var(--x, 0), var(--y, 0)) scale(var(--s, 1));
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(.45, 0, .55, 1);
  transition-duration: var(--t, 3s);
  will-change: opacity, transform;
}
/* Pilvet ankkuroitu näkymän alareunaan ja sivuille — tuli on "alhaalla",
   kuten nuotion ääressä; yläosa jää yöksi, jotta valikko ja otsikot erottuvat */
.fire .f1 { left: 15%; bottom: -45vh; width: 75vw; height: 80vh;
  background: radial-gradient(closest-side, rgba(242, 140, 40, .42), rgba(226, 88, 28, .16) 55%, transparent); }
.fire .f2 { left: -20vw; bottom: -40vh; width: 60vw; height: 75vh;
  background: radial-gradient(closest-side, rgba(226, 88, 28, .40), rgba(226, 88, 28, .10) 60%, transparent); }
.fire .f3 { right: -20vw; bottom: -40vh; width: 60vw; height: 75vh;
  background: radial-gradient(closest-side, rgba(226, 88, 28, .40), rgba(226, 88, 28, .10) 60%, transparent); }
.fire .f4 { left: 35%; bottom: -22vh; width: 40vw; height: 42vh;
  background: radial-gradient(closest-side, rgba(246, 185, 59, .34), rgba(242, 140, 40, .10) 60%, transparent); }
.fire .f5 { left: -18vw; top: 30vh; width: 34vw; height: 70vh;
  background: radial-gradient(closest-side, rgba(226, 88, 28, .20), transparent); }
.fire .f6 { right: -18vw; top: 25vh; width: 34vw; height: 70vh;
  background: radial-gradient(closest-side, rgba(226, 88, 28, .20), transparent); }

/* Kipinät heron alaosassa */
.glow { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.glow i {
  position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: #FFD27A; box-shadow: 0 0 6px 2px rgba(242, 140, 40, .75);
  opacity: 0; animation: kipina 7s linear infinite;
}
.glow i:nth-child(1)  { left: 52%; animation-delay: 0s;   animation-duration: 6.5s; }
.glow i:nth-child(2)  { left: 58%; animation-delay: 1.2s; animation-duration: 8s; }
.glow i:nth-child(3)  { left: 63%; animation-delay: 2.7s; animation-duration: 7s; width: 2px; height: 2px; }
.glow i:nth-child(4)  { left: 67%; animation-delay: .6s;  animation-duration: 9s; }
.glow i:nth-child(5)  { left: 71%; animation-delay: 3.9s; animation-duration: 6s; width: 2px; height: 2px; }
.glow i:nth-child(6)  { left: 75%; animation-delay: 1.8s; animation-duration: 7.5s; }
.glow i:nth-child(7)  { left: 79%; animation-delay: 5.1s; animation-duration: 8.5s; }
.glow i:nth-child(8)  { left: 83%; animation-delay: 2.2s; animation-duration: 6.8s; width: 2px; height: 2px; }
.glow i:nth-child(9)  { left: 88%; animation-delay: 4.4s; animation-duration: 7.8s; }
.glow i:nth-child(10) { left: 92%; animation-delay: .3s;  animation-duration: 9.5s; width: 2px; height: 2px; }
.glow i:nth-child(11) { left: 46%; animation-delay: 6s;   animation-duration: 8.2s; width: 2px; height: 2px; }
.glow i:nth-child(12) { left: 30%; animation-delay: 3.3s; animation-duration: 10s;  width: 2px; height: 2px; }
.glow i:nth-child(13) { left: 18%; animation-delay: 7.2s; animation-duration: 11s;  width: 2px; height: 2px; }
.glow i:nth-child(14) { left: 96%; animation-delay: 5.6s; animation-duration: 7.2s; }
@keyframes kipina {
  0%   { opacity: 0;  transform: translate(0, 0); }
  10%  { opacity: 1; }
  50%  { transform: translate(-14px, -260px); }
  80%  { opacity: .6; }
  100% { opacity: 0;  transform: translate(10px, -520px); }
}

/* Levossa kipinät hiipuvat pois */
.glow { transition: opacity 3s ease; }
.tuli-levossa .glow { opacity: 0; }

@media (max-width: 1100px) {
  .fire .f1 { width: 120vw; left: -10vw; }
  .fire .f4 { width: 80vw; left: 10vw; }
  .glow i:nth-child(n+9) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fire b { transition: none; }
  .glow i { display: none; }
}