/* Модуль «Мріданга в підвалі»: барабан угорі підвалу, з нього спливають ноти й слова мантри. */
/* Ноти біля країв екрана не розсувають сторінку вбік; вгору вони й далі спливають вільно */
.footer:has(> .kirtan) { padding-top: 12px; overflow-x: clip; }

.kirtan { position: relative; height: clamp(128px, 15vw, 176px); margin-bottom: clamp(16px, 3vw, 40px); color: var(--accent); }
.kirtan__air { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

.kirtan__drum {
  position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  width: clamp(176px, 20vw, 236px); padding: 0; border: 0; background: none; color: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.kirtan__drum:focus-visible { outline-offset: 8px; border-radius: 16px; }
.kirtan__drum svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 65%; }

.kirtan__body { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: currentColor; stroke-width: 2; }
.kirtan__lace { fill: none; stroke: currentColor; stroke-width: 1.1; opacity: .5; }
.kirtan__ring { fill: none; stroke: currentColor; stroke-width: 2.6; }
.kirtan__strap { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 6; opacity: .55; }
.kirtan__head { fill: color-mix(in srgb, var(--fg) 12%, var(--bg)); stroke: currentColor; stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.kirtan__spot { fill: currentColor; opacity: .45; }
.kirtan__spot--dark { opacity: .9; }
.kirtan__ripple { fill: none; stroke: currentColor; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; pointer-events: none; }

.kirtan__p {
  position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; pointer-events: none;
  font: italic 500 17px/1 var(--font-serif); color: var(--accent); will-change: transform, opacity;
}
.kirtan__p--note { width: 18px; height: 18px; color: var(--fg); }
.kirtan__p--note svg { display: block; width: 100%; height: 100%; }
.kirtan__p--ambient { font-size: 14px; color: var(--fg); }
.kirtan__p--ambient.kirtan__p--note { width: 14px; height: 14px; }

@media (min-width: 900px) {
  .kirtan__p { font-size: 19px; }
}