/* Die Welt: Hintergrundbild, Licht, Leuchtreklame, Staub.
   .welt hat das Seitenverhaeltnis des Hintergrunds (2:1); js/szene.js
   setzt Groesse und Lage so, dass sie den Schirm fuellt, ohne das Geraet
   anzuschneiden. Alles darin ist in Prozent der Welt angelegt. */

@font-face { font-family: 'VT323'; src: url(../schrift/VT323-Regular.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Oswald'; src: url(../schrift/Oswald.woff2) format('woff2'); font-weight: 200 700; font-display: swap; }
@font-face { font-family: 'Special Elite'; src: url(../schrift/SpecialElite-Regular.woff2) format('woff2'); font-display: swap; }

:root {
  color-scheme: dark;
  /* Von js/szene.js gesetzt: wie hell die Reklame gerade brennt, 0..1. */
  --neon: 1;
  --pink: 255 54 170;
  --amber: 255 176 72;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: #0d0b08;
  color: #d9c9a3;
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid rgb(var(--amber)); outline-offset: 3px; }

.buehne { position: fixed; inset: 0; overflow: hidden; }
.welt {
  position: absolute;
  left: var(--welt-x, 0px); top: var(--welt-y, 0px);
  width: var(--welt-b, 100vw); aspect-ratio: 2 / 1;
}
.welt > * { position: absolute; }
.hintergrund { inset: 0; width: 100%; height: 100%; display: block; user-select: none; -webkit-user-drag: none; }
/* Vignette: die Raender versinken, das Geraet steht im Licht */
.welt::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(75% 85% at 52% 62%, transparent 55%, rgb(0 0 0 / .45) 85%, rgb(0 0 0 / .75));
}

/* ------------------------------------------------- Licht durchs Mauerloch */
/* Drei Lichtbahnen vom Loch links oben schraeg auf den Tisch. Sie atmen
   langsam, wie Licht durch ziehenden Staub. */
.sonnenlicht {
  left: 3%; top: 6%; width: 46%; height: 85%;
  pointer-events: none; mix-blend-mode: screen; filter: blur(10px);
  transform-origin: 0 0; transform: skewX(38deg);
}
.sonnenlicht i {
  position: absolute; top: 0; height: 100%;
  background: linear-gradient(180deg, rgb(255 214 150 / .16), rgb(255 200 130 / .07) 60%, transparent 92%);
  animation: atmen 13s ease-in-out infinite alternate;
}
.sonnenlicht i:nth-child(1) { left: 0; width: 14%; }
.sonnenlicht i:nth-child(2) { left: 19%; width: 6%; animation-delay: -5s; opacity: .7; }
.sonnenlicht i:nth-child(3) { left: 29%; width: 10%; animation-delay: -9s; opacity: .5; }
@keyframes atmen { from { opacity: .45; } to { opacity: 1; } }

/* Petroleumlampe hinten auf dem Schrank (im Bild bei 1125/282) */
.laterne {
  left: 61.2%; top: 26%; width: 7%; height: 14%;
  background: radial-gradient(closest-side, rgb(255 170 70 / .55), rgb(255 140 40 / .15) 55%, transparent);
  mix-blend-mode: screen; pointer-events: none;
  animation: flackern 3.2s steps(1) infinite;
}
@keyframes flackern {
  0% { opacity: .9; } 13% { opacity: .75; } 21% { opacity: 1; } 34% { opacity: .82; } 47% { opacity: .95; }
  58% { opacity: .7; } 66% { opacity: .92; } 79% { opacity: .85; } 88% { opacity: 1; }
}

/* ------------------------------------------------------- Leuchtreklame */
.reklame { inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.reklame use, .reklame path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Unbeleuchtetes Glas: auch wo eine Roehre aus ist, sieht man das Rohr */
.neon-glas { stroke: #5a3448; stroke-width: 4.6; opacity: .85; }
.neon-schatten { stroke: #000; stroke-width: 5; opacity: .55; }
/* Spruenge zwischen den Zuegen: schwarz ueberlackiertes Rohr */
.neon-bruecke { stroke: #0c0608; stroke-width: 4; opacity: .9; }
.neon-elektrode { fill: #1a1418; stroke: #3a3034; stroke-width: 1.2; }
.neon-halter { fill: #2a2622; }
.neon-halter .klammer { fill: #6a625a; }
/* Leuchtend: weiter Hof auf der Wand, Glut ums Rohr, das Rohr selbst
   in sattem Pink und darin der fast weisse, heisse Kern. */
.neon-hof { stroke: rgb(var(--pink)); stroke-width: 20; opacity: .55; }
.neon-glut { stroke: rgb(var(--pink)); stroke-width: 8; opacity: .9; }
.neon-rohr { stroke: rgb(255 60 175); stroke-width: 4.2; }
.neon-kern { stroke: #ffb8e2; stroke-width: 1.3; opacity: .9; }
/* Widerschein der Reklame auf dem nassen Boden rechts */
.neon-boden {
  left: 66%; top: 68%; width: 34%; height: 32%; pointer-events: none; mix-blend-mode: screen;
  /* closest-side: am Rand des Elements ist der Schein sicher bei null */
  background: radial-gradient(closest-side, rgb(var(--pink) / calc(.2 * var(--neon))), transparent);
}

.staub { inset: 0; width: 100%; height: 100%; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .sonnenlicht i, .laterne { animation: none; }
  .staub { display: none; }
}

/* ------------------------------------------------------------ Telefon */
/* Hochkant: die Welt als Bild oben, angeschnitten, darunter Zettel und
   Notbedienteil. Die Seite scrollt. */
body.hochkant { overflow-y: auto; }
body.hochkant .buehne { position: relative; height: auto; padding-top: var(--welt-h); }

.ohne-js { position: fixed; inset: auto 0 2rem; text-align: center; font: 1.4rem 'Special Elite', monospace; }