/* Singerhaus Zugschalter: Kugelkette mit Messinggriff aus Fotos. Position setzt die Route. */

.cord {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
  z-index: 20;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.cord-chain {
  position: absolute;
  left: 0; top: 0;
  filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, .5));
  transition: filter .8s var(--ease, ease);
  /* Seitenübergänge (View Transitions) frieren die alte Ansicht als Standbild ein und
     blenden es aus. Bei der schwingenden Kette gäbe das ein Geisterbild, deshalb läuft
     sie als eigene Ebene ohne Standbild einfach weiter. Breite und Höhe setzt pullcord.js. */
  view-transition-name: cord;
}
::view-transition-old(cord) { display: none; }
::view-transition-new(cord) { animation: none; }
::view-transition-group(cord) { animation: none; }
.cord-bead, .cord-fin {
  position: absolute;
  left: 0; top: 0;
  display: block;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  will-change: transform;
}
.cord-fin { transform-origin: 50% 0; }
.cord-grip {
  position: absolute;
  left: 0; top: 0;
  width: 48px; height: 68px;
  border-radius: 24px;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  will-change: transform;
}
.cord.is-held .cord-grip { cursor: grabbing; }
.cord-grip:focus-visible { outline-offset: -4px; }