/* Roadtrip Labs — V3b hybrid Berlin hero. Self-hosted fonts only. */
@font-face { font-family: 'Pixelify Sans'; src: url('/fonts/pixelify-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('/fonts/silkscreen-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'VT323'; src: url('/fonts/vt323-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter Tight'; src: url('/fonts/inter-tight-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

.bs-hero {
  position: relative;
  width: 100%;
  /* 21:9 of the width on desktop, capped at the viewport; a usable minimum on phones */
  height: clamp(460px, 42.42vw, 100vh);
  height: clamp(460px, 42.42vw, 100svh);
  overflow: hidden;
  isolation: isolate;
  background: #1b2236;
}
/* procedural sky: one canvas pixel per art pixel, scaled up crisp */
.v3-sky {
  position: absolute; z-index: 0; pointer-events: none;
  image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated;
}
.bs-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
.bs-layer { position: absolute; inset: 0; pointer-events: none; }
.bs-base { z-index: 1; }
.bs-occ { z-index: 4; }
.bs-layer img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; opacity: 0; user-select: none; -webkit-user-drag: none;
}
.v3-water { position: absolute; z-index: 2; pointer-events: none; }
.bs-train, .bs-fx {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated;
  pointer-events: none;
}
.bs-train { z-index: 3; }
.bs-fx { z-index: 5; }
.bs-debug { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
.bs-debug-panel {
  position: absolute; left: 8px; bottom: 8px; z-index: 30; margin: 0;
  padding: 6px 8px; background: rgba(0, 0, 0, 0.75); color: #9ff;
  font: 12px/1.35 ui-monospace, Menlo, monospace; white-space: pre; pointer-events: none;
}

/* Time scrubber: visible by default (hide with ?scrub=0), touch-friendly, pixel font */
.bs-scrub {
  position: absolute; right: 16px; bottom: 16px; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 12px;
  background: rgba(14, 16, 26, 0.72);
  color: #f6ecd6;
  font: 400 13px/1 'Silkscreen', monospace;
  letter-spacing: 0.04em;
  box-shadow: 0 0 0 2px rgba(246, 236, 214, 0.18), 4px 4px 0 rgba(0, 0, 0, 0.35);
}
.bs-scrub-time { min-width: 5ch; font-variant-numeric: tabular-nums; }
.bs-scrub-range {
  -webkit-appearance: none; appearance: none;
  width: 200px; height: 24px; margin: 0; background: transparent; cursor: pointer; touch-action: none;
}
.bs-scrub-range::-webkit-slider-runnable-track { height: 4px; background: rgba(246, 236, 214, 0.5); }
.bs-scrub-range::-moz-range-track { height: 4px; background: rgba(246, 236, 214, 0.5); }
.bs-scrub-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 20px; margin-top: -8px;
  background: #f3c10a; border: 0; border-radius: 0; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}
.bs-scrub-range::-moz-range-thumb { width: 12px; height: 20px; background: #f3c10a; border: 0; border-radius: 0; }
.bs-scrub-range:focus-visible { outline: 1px dashed #f6ecd6; outline-offset: 2px; }
.bs-scrub-live {
  font: inherit; color: #14161f; background: #f3c10a; border: 0; padding: 5px 7px; cursor: pointer;
  text-transform: uppercase;
}
.bs-scrub-live[hidden] { display: none; }

@media (max-width: 520px) {
  .bs-scrub { right: 10px; bottom: 10px; padding: 7px 9px; }
  .bs-scrub-range { width: 130px; }
}

/* birds crossing the Fernsehturm: above the base artwork, below the bridge-tower occluders */
.v3-birds {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
  image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated;
  pointer-events: none;
}