/* Cylinder carousel. The camera sits inside the cylinder: keep --cyl-perspective smaller than --cyl-radius.
   --cyl-scale scales the whole picture (radius, panels and perspective together), so it looks the same, only smaller.
   The side panels project far wider than the box: put it in a section with overflow: clip. */
.cyl {
  --cyl-radius: 570px;      /* axis to panel centre (their arms: 1400px wide, 260px panels at each end) */
  --cyl-w: 260px;
  --cyl-h: 370px;
  --cyl-perspective: 500px;
  --cyl-corner: 20px;
  --cyl-scale: 1;
  --cyl-r: calc(var(--cyl-radius) * var(--cyl-scale));
  --cyl-p: calc(var(--cyl-perspective) * var(--cyl-scale));
  position: relative;
}
.cyl__rotor {
  position: relative; height: calc(var(--cyl-h) * var(--cyl-scale)); transform-style: preserve-3d;
  cursor: grab; user-select: none; -webkit-user-select: none;
  touch-action: pan-y;      /* sideways drags turn it, vertical swipes still scroll the page (tilt is locked by default) */
}
.cyl.is-dragging .cyl__rotor { cursor: grabbing; }
.cyl__panel {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--cyl-w) * var(--cyl-scale)); height: calc(var(--cyl-h) * var(--cyl-scale));
  margin: calc(var(--cyl-h) * var(--cyl-scale) / -2) 0 0 calc(var(--cyl-w) * var(--cyl-scale) / -2);
  border-radius: calc(var(--cyl-corner) * var(--cyl-scale)); overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  will-change: transform;
}
.cyl__panel img, .cyl__panel video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }