/*
 * Letterlijn 3D: de vooraf gerenderde beelden (tools/blender/ASSETS.md) en hun lagen.
 *
 * De afbeeldingen zelf noemt alleen styles/beeldbestanden.css (gegenereerd uit het manifest, via
 * url() in image-set(), zodat tests/test_publiek.py elk beeld controleert). Positie en maat zet
 * app/ui/beeld.js als variabelen (fracties van het canvas uit het manifest).
 */

/* Welke afbeelding: zie styles/beeldbestanden.css, gegenereerd uit het manifest. */

/* ------------------------------------------------------------------ lagen */

.filters {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

/* De trein heeft zijn maat (breedte en verhouding); het beeld vult hem. Alle lagen erin liggen
   absoluut, dus de houder moet zelf de volle maat krijgen. */
.trein > [data-beeld] {
  position: absolute;
  inset: 0;
}

/* Het bordje "Jij" op het cabinedak (styles/scene.css). Gemeten op de render loc-jij@2x: het dak
   loopt van x 40 tot 135 (van 420) met de bovenkant op y 21 (van 200). Het bordje staat midden op
   het dak en zakt er 6% van de lochoogte in, zodat het bijna niet boven de loc uitsteekt. */
.trein--jij {
  --dak-x: 0.21;
  --dak-y: 0.165;
}

.beeld {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
}

.beeld__lijf,
.beeld__laag {
  position: absolute;
  inset: 0;
}

.beeld__laag,
.wiel-draai,
.beeld__stang {
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Dagkleuring: één neutrale render, × tint × helderheid (app/ui/dag.js zet de matrix). Plus de
   donkere contour die de loc tegen de grond tilt (WCAG 1.4.11). */
.beeld__lijf {
  filter: url("#schemertint") drop-shadow(0 0 1.5px var(--kool));
}
.scene .beeld__lijf {
  filter: url("#dagtint") drop-shadow(0 0 1.5px var(--kool));
}

/* Lampen en ramen: gloed-alfa (ASSETS.md §3.5), komen op met het dagdeel. Geen dagkleuring. */
.beeld__gloed {
  mix-blend-mode: screen;
  opacity: var(--s-lamp, 1);
}

/* Een wiel: middelpunt en doorsnede als deel van de breedte van de loc. De hoogte als deel van
   de hoogte volgt uit de verhouding van de loc. */
.beeld__wiel {
  position: absolute;
  inline-size: calc(var(--d) * 100%);
  aspect-ratio: 1;
  inset-inline-start: calc(var(--x) * 100% - var(--d) * 50%);
  inset-block-start: calc(var(--y) * 100% - var(--d) * var(--verhouding) * 50%);
}
.beeld__wiel .wiel-draai {
  position: absolute;
  inset: 0;
}
/* Kleine wielen draaien sneller dan grote (hoeksnelheid ∝ 1/r). */
.rijdt .beeld__wiel .wiel-draai {
  animation-duration: calc(var(--wiel-duur, 1.2s) * var(--tempo, 1));
}

.beeld__stang {
  position: absolute;
  inset-inline-start: calc(var(--x) * 100%);
  inset-block-start: calc(var(--y) * 100%);
  inline-size: calc(var(--b) * 100%);
  block-size: calc(var(--h) * 100%);
}

/* De koppelstang draait mee op de krukpennen: een cirkel met de krukstraal, vanuit de rusthouding
   (krukpen boven), rechtsom, in de pas met de wielen. */
.rijdt .beeld__stang { animation: krukcirkel var(--wiel-duur, 1.2s) linear infinite; }
@keyframes krukcirkel {
  0% { transform: translate(0, 0); }
  12.5% { transform: translate(calc(var(--kx) * 0.7071), calc(var(--ky) * 0.2929)); }
  25% { transform: translate(var(--kx), var(--ky)); }
  37.5% { transform: translate(calc(var(--kx) * 0.7071), calc(var(--ky) * 1.7071)); }
  50% { transform: translate(0, calc(var(--ky) * 2)); }
  62.5% { transform: translate(calc(var(--kx) * -0.7071), calc(var(--ky) * 1.7071)); }
  75% { transform: translate(calc(var(--kx) * -1), var(--ky)); }
  87.5% { transform: translate(calc(var(--kx) * -0.7071), calc(var(--ky) * 0.2929)); }
  100% { transform: translate(0, 0); }
}

.beeld__bundel {
  position: absolute;
  inset-inline-start: calc(var(--x) * 100%);
  inset-block-start: calc(var(--y) * 100%);
  inline-size: 45%;
  block-size: calc(var(--hoogte) * 100% + 4%);
  overflow: visible;
  pointer-events: none;
}

.schoorsteen-mond {
  position: absolute;
  inset-inline-start: calc(var(--x) * 100%);
  inset-block-start: calc(var(--y) * 100%);
  inline-size: 1px;
  block-size: 1px;
}

/* Route A (ASSETS.md §10.1b): vaste bandranden achter de wielen, en een container die het wielvlak
   op 25° projecteert. Daarbinnen draaien de wielen en loopt de stang zoals in het zijaanzicht. */
.beeld__band {
  position: absolute;
  inset-inline-start: calc(var(--x) * 100%);
  inset-block-start: calc(var(--y) * 100%);
  inline-size: calc(var(--b) * 100%);
  block-size: calc(var(--h) * 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.beeld__loopwerk {
  position: absolute;
  inset: 0;
  transform: var(--matrix);
  transform-origin: calc(var(--ox) * 100%) calc(var(--oy) * 100%);
}

/* ------------------------------------------------------------------ ketel als render (§10.2) */

.vuurkist--render {
  aspect-ratio: var(--verhouding, 300 / 380);
}
.vuurkist--render .vuurkist__ketel {
  display: none; /* de SVG-ketel is de terugval zonder render */
}
.vuurkist--render .vuurkist__mond {
  inset-inline-start: calc(var(--mond-x) * 100%);
  inset-block-start: calc(var(--mond-y) * 100%);
  inline-size: calc(var(--mond-b) * 100%);
  block-size: calc(var(--mond-h) * 100%);
}
.vuurkist__binnen {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.vuurkist__voor {
  position: absolute;
  inset: 0;
  z-index: 3; /* boven het vuur; de "+N" (z-index 4) blijft erboven */
  pointer-events: none;
}
.vuurkist__voor .beeld__laag {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* Het vuur verlicht de ketel: gloed-alfa (§3.5), mee met de stoomdruk. */
.vuurkist__licht {
  mix-blend-mode: screen;
  opacity: var(--vuur, 0);
}
.vuurkist__meter {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

/* ------------------------------------------------------------------ rekwisieten (§10.3) */

/* Achter het achterste spoor en het station (geen z-index: onder de banen met z-index 1–3). */
.scene__rekwisieten {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rekwisiet {
  position: absolute;
  block-size: calc(var(--hoog) * 100cqb);
  aspect-ratio: var(--verhouding);
  /* Het anker `voet` (midden onderaan, waar het object de grond raakt) op de plek zelf. */
  translate: calc(var(--voet-x) * -100%) calc((1 - var(--voet-y)) * 100%);
}
.rekwisiet--horizon {
  inset-inline-start: calc(var(--x) * 100%);
  inset-block-end: 51%; /* net onder de horizon (de grond begint op 54%) */
}
.rekwisiet--sein {
  /* Net links van het station, achter het achterste spoor (§10.3, v2.1). */
  inset-inline-start: calc(99% - var(--station-breedte) - 2%);
  inset-block-end: 49%;
}
/* Eigen, donkerdere en mattere dagkleuring (#dagtint-achter, tokens --<fase>-achter-*), geen
   contour: ze horen bij de achtergrond en volgen grond en heuvels, niet de locs (Vera M1, ronde 2). */
.scene .rekwisiet .beeld__lijf {
  filter: url("#dagtint-achter");
}

/* ------------------------------------------------------------------ station */

.beeld--station {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  /* Zo breed als het vak toestaat, maar nooit hoger dan de scène toelaat. */
  inline-size: min(100%, 92cqb * var(--verhouding));
  block-size: auto;
  aspect-ratio: var(--verhouding);
  container-type: inline-size;
}

/* Het naambord: echte tekst op de lege plaat uit de render. Niet gekleurd door het dagdeel. */
.station__bord {
  position: absolute;
  inset-inline-start: calc(var(--x) * 100%);
  inset-block-start: calc(var(--y) * 100%);
  inline-size: calc(var(--b) * 100%);
  block-size: calc(var(--h) * 100%);
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: var(--font-spel);
  font-weight: 800;
  /* Nooit kleiner dan in het origineel (11 px op een station van 160 px breed, dus 6,875% van de
     breedte; Vera M3), en nooit onder 8 px. De e2e toetst dat "Station 12" dan nog op het bord past. */
  font-size: max(calc(var(--hb) * 100cqi * 0.58), 6.875cqi, 8px);
  line-height: 1;
  white-space: nowrap;
  color: var(--tegel-licht);
}

/* ------------------------------------------------------------------ minder beweging en pauze */

@media (prefers-reduced-motion: reduce) {
  .rijdt .beeld__wiel .wiel-draai,
  .rijdt .beeld__stang {
    animation: none;
  }
}

.gepauzeerd .beeld__stang {
  animation-play-state: paused;
}