/* =====================================================================
   tod.css — SCHEITERN (A.1.67.0, tod.js)
   Das Endbild liegt über ALLEM (Ebene 300, über Erfolgen und Blättern) und
   fängt jeden Zeiger — nach dem Tod tut die Hand nichts mehr, und in gut
   drei Sekunden lädt die Seite neu.
   ===================================================================== */
.tod {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 4, 3, 0);
  transition: background 900ms ease-in 250ms;
  cursor: default;
}
.tod.an { background: rgba(6, 4, 3, 0.94); }
.tod-blitz {
  position: absolute;
  inset: 0;
  background: var(--tod-farbe);
  opacity: 0;
  pointer-events: none;
}
.tod.an .tod-blitz { animation: tod-blitz 700ms ease-out both; }
@keyframes tod-blitz { 0% { opacity: 0; } 8% { opacity: .85; } 100% { opacity: 0; } }
.tod-satz {
  text-align: center;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #efe6d4;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease 700ms, transform 800ms cubic-bezier(.16, .8, .3, 1) 700ms;
  padding: 0 16px;
}
.tod.an .tod-satz { opacity: 1; transform: none; }
.tod-satz b {
  display: block;
  font: 900 clamp(2rem, 6vw, 4.6rem)/1.05 "Arial Black", "Segoe UI Black", Impact, sans-serif;
  letter-spacing: .02em;
  color: var(--tod-farbe);
  text-shadow: 0 4px 30px rgba(0, 0, 0, .9);
}
.tod-satz span { display: block; margin-top: .8em; font-size: clamp(1rem, 2vw, 1.4rem); color: rgba(239, 230, 212, .85); }
.tod-satz em {
  display: block;
  margin-top: 2.2em;
  font-style: normal;
  font-size: .8rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: rgba(216, 163, 60, .8);
}
:root.ist-tot * { cursor: default !important; }
:root.ist-tot .fadenkreuz, :root.ist-tot .gegenstand.in-der-hand { visibility: hidden; }

/* ---- der Schwarm (Kapitel 3) ---- */
.wespe {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 290;
  width: 7px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #f4c430 0 45%, #1a1408 46% 60%, #f4c430 61%);
  pointer-events: none;
  animation: wespe-kommt 1.2s cubic-bezier(.5, 0, .9, .6) both;
}
@keyframes wespe-kommt {
  0% { translate: var(--von-x) var(--von-y); scale: .4; opacity: 0; }
  12% { opacity: 1; }
  100% { translate: var(--nach-x) var(--nach-y); scale: var(--gross); opacity: 1; }
}

/* ---- Kapitel 2: der Kessel ächzt, bevor er platzt ---- */
.m-kessel { transform-box: fill-box; transform-origin: 50% 50%; }
.m-kessel.aechzt { animation: kessel-aechzt 180ms steps(2) infinite; }
.m-kessel.gleich { animation: kessel-aechzt 90ms steps(2) infinite; filter: drop-shadow(0 0 10px rgba(255, 90, 40, .75)); }
@keyframes kessel-aechzt { 0% { translate: -1.5px 0; } 50% { translate: 1.5px .5px; } 100% { translate: -1px -.5px; } }
@media (prefers-reduced-motion: reduce) {
  .m-kessel.aechzt, .m-kessel.gleich { animation: none; }
  .tod.an .tod-blitz { animation: none; }
}

/* ---- das Wespennest auf der Wiese: drei Wespen kreisen (natur-wesen.js) ----
   ⚠️ nur `translate` in den Marken — ein `rotate` um einen Drehpunkt liefe
   hier gegen die viewBox (die Falle der fuenf Ebenen, wiese.css) */
.n-nest .n-wespe { animation: wespe-kreist 2.4s linear infinite; }
@keyframes wespe-kreist {
  0% { translate: -24px 22px; } 25% { translate: -2px 58px; } 50% { translate: 26px 26px; }
  75% { translate: 4px -6px; } 100% { translate: -24px 22px; }
}
.n-nest.getroffen .n-wespe { display: none; }
@media (prefers-reduced-motion: reduce) { .n-nest .n-wespe { animation: none; } }