/* This layer affects the homepage only. Original galleries keep their CSS. */
body[data-drum] { overflow-x: clip; }
body[data-drum-ready] .floating-work img { transform: none; }
.drum-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 3; pointer-events: none; opacity: 0;
}
.drum-active .drum-canvas, .scanner-visible .drum-canvas { opacity: 1; }
.drum-active .floating-work.drum-rendered picture { opacity: 0; }
.drum-active .floating-work .floating-label { opacity: 0; }
.drum-controls {
  position: fixed; right: var(--identity-side, 3vw);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 16; display: flex; align-items: center; gap: 14px;
  font-size: 9px; letter-spacing: .04em;
}
.drum-hint { pointer-events: none; }
.drum-controls button {
  display: none; border: 0; padding: 10px 0 10px 10px;
  min-height: 44px; font-size: inherit; letter-spacing: inherit;
  background: none; color: inherit;
}
.drum-controls button.is-ready { display: block; }
.drum-controls button::before { content: '●'; margin-right: 6px; font-size: 6px; vertical-align: 1px; }
.drum-controls button[aria-pressed="false"]::before { content: '○'; }
.drum-controls button:hover { text-decoration: underline; text-underline-offset: 4px; }
.drum-controls button:focus-visible { outline: 2px solid; outline-offset: 3px; }
@media (max-width: 1050px) {
  .drum-hint { display: none; }
  .drum-controls { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .drum-canvas { display: none!important; }
  .drum-active .floating-work.drum-rendered picture { opacity: 1; }
  .drum-active .floating-work .floating-label { opacity: 1; }
  .drum-controls { display: none; }
}

body[data-drum]:not([data-drum-ready]) .drum-controls { display: none; }