/*
 * THE WAVES OF A SOUND (2026-09-30) - one piece for the app, the public web and the client webs.
 *
 * His words: "como thumbnail coloca solo ondas de sonido que ondean cuando se esta escuchando" - and then, "si tambien ondas dentro de la app".
 * A sound's picture is only waves: no icon, no text. On a card or in a list it is a still picture (view/custom/img/samplesfile/soundwaves.svg, drawn from the same
 * heights as the bars below). In the detail - the layer of the app, the public web's layer and modal, the client web's page - the bars are markup
 * (core/vk/visitor_media.php vk_waves_html) that view/js/vk_waves.js moves while the sound plays and lets go of on pause or at the end.
 *
 * The bars are <i> with two custom properties: --h, their height at rest (0-1), and --i, their place in the row (the css animation's delay). A page can colour them
 * with --vk-waves-color.
 */
.vkWaves{ box-sizing: border-box; width: min(100%, 560px); margin: 0 auto; text-align: center; }
.vkWaves-bars{ display: flex; align-items: center; justify-content: center; gap: 5px; height: clamp(90px, 22vw, 150px); padding: 0 6px; color: var(--vk-waves-color, var(--vk-soft-5b6472, #5b6472)); pointer-events: none; }
.vkWaves-bars i{ display: block; flex: 1 1 0; min-width: 3px; max-width: 14px; height: 100%; border-radius: 999px; background: currentColor; transform: scaleY(var(--h, .3)); transition: transform .18s ease-out; }
.vkWaves audio{ display: block; width: 100%; max-width: 100%; margin: 14px 0 0; }

/* moving from the real sound (Web Audio): the script sets each bar's transform frame by frame */
.vkWaves.is-live .vkWaves-bars i{ transition-duration: .07s; }

/* moving without it (a browser that cannot hand the sound over): a gentle wave tied to play and pause */
@keyframes vkWavesMove{
    0%, 100%{ transform: scaleY(calc(var(--h, .3) * .45 + .08)); }
    50%{ transform: scaleY(calc(var(--h, .3) * .5 + .5)); }
}
.vkWaves.is-playing.is-css .vkWaves-bars i{ animation: vkWavesMove 1.05s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.09s); transition: none; }
.vkWaves.is-playing.is-css .vkWaves-bars i:nth-child(3n){ animation-duration: .8s; }
.vkWaves.is-playing.is-css .vkWaves-bars i:nth-child(3n + 1){ animation-duration: 1.25s; }

@media (prefers-reduced-motion: reduce){
    .vkWaves.is-playing.is-css .vkWaves-bars i{ animation: none; }
    .vkWaves-bars i{ transition: none; }
}

/* the detail of the public web has a dark stage for videos; a sound sits on its own light one */
.vkVD-view .vkWaves{ width: min(100%, 520px); }
.watch_item_modal .vkWaves{ margin-top: 12vh; }

/* A SOUND PLAYED FROM ITS CARD (brief R, 2026-10-02): the detail's waves over the card's picture (the still picture keeps the box, unseen), a round play
   button in his colour at the bottom left, a thin bar beside it that advances with the song and takes a click to jump, the time once it has started.
   parts/category_items.php draws it; view/js/vk_waves.js runs it. */
.SeeDetail.vkHasSound{ position: relative; display: block; }
.SeeDetail.vkHasSound > img.imagesample{ visibility: hidden; }
.vkCardSound{ position: absolute; inset: 0; display: block; }     /* no z-index of its own: its controls must rise above the card's drag handle (style.css .refere.draggeritem, z-index 999, unseen until hover, in the middle of the card), its waves must not */
.vkCardSound .vkWaves-bars{ position: absolute; left: 11%; right: 11%; top: 44%; height: 32%; transform: translateY(-50%); gap: 2px; padding: 0; }
.vkCardSound .vkWaves-bars i{ min-width: 2px; max-width: 7px; }
/* THE CARD'S WAVES TAKE THE DETAIL'S COLOUR, in the light look too (brief AV, 2026-10-08; seen 2026-10-03). The bars are <i> inside the card's link, and style.css has
   `.capsaitem a i { color: #000 }` (and #888 on hover) for the icons of the old cards: they painted the bars black, and grey under the pointer, so --vk-waves-color never
   reached them. vk_dark.css already gave them the colour for the dark look; this is the same value as `.vkWaves-bars` above - the token is #5b6472 in light and the soft
   colour in dark - for both, and the same at rest and under the pointer. */
.capsaitem a .vkWaves-bars i, .capsaitem a:hover .vkWaves-bars i{ color: var(--vk-waves-color, var(--vk-soft-5b6472, #5b6472)); }
.vkCardSound-play{
    position: absolute; left: 10px; bottom: 10px; z-index: 1000;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--vk-main, #0f52ff); color: #ffffff; box-shadow: 0 3px 10px rgba(20, 20, 40, .18);
    cursor: pointer; transition: transform .12s ease;
}
.vkCardSound-play:hover{ transform: scale(1.06); }
.vkCardSound-play:focus-visible{ outline: 2px solid var(--vk-main, #0f52ff); outline-offset: 2px; }
.vkCardSound-i--pause, .vkCardSound.is-on .vkCardSound-i--play{ display: none; }
.vkCardSound.is-on .vkCardSound-i--pause{ display: block; }
.vkCardSound-i--play{ margin-left: 2px; }
.vkCardSound-bar{
    position: absolute; left: 54px; right: 14px; bottom: 25px; z-index: 1000;
    height: 4px; border-radius: 99px; background: rgba(var(--vk-ink-rgb, 22, 22, 26), .14); cursor: pointer;
}
.vkCardSound-bar::before{ content: ""; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; }      /* an easier thing to hit than 4 px */
.vkCardSound-bar:focus-visible{ outline: 2px solid var(--vk-main, #0f52ff); outline-offset: 4px; }
.vkCardSound-fill{ position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; background: var(--vk-main, #0f52ff); }
.vkCardSound-time{
    position: absolute; right: 14px; bottom: 33px; z-index: 1000;
    font-family: 'Montserrat', sans-serif; font-size: 10px; line-height: 1; color: var(--vk-soft, #5f5e6b); font-variant-numeric: tabular-nums;
    visibility: hidden;
}
.vkCardSound.is-started .vkCardSound-time{ visibility: visible; }
@media (prefers-reduced-motion: reduce){ .vkCardSound-play{ transition: none; } }