@use 'sass:list';

// Audio icon — equalizer bars for components/_audio-icon.html.twig.
// Bars sit still by default and only animate while the `--playing` modifier is
// set (AudioToggle.ts). Each bar gets its own duration / negative delay / floor
// so the group never pulses in sync.

.audio-icon {
    display: block;
    width: 100%;
    height: 100%;
}

.audio-icon__ring {
    transition: opacity 0.3s ease;
}

.audio-icon__bar {
    // `fill-box` makes scaleY pivot on the bar itself instead of the SVG origin.
    transform-box: fill-box;
    transform-origin: center;
}

.audio-icon--playing .audio-icon__bar {
    animation-name: audio-icon-bar;
    animation-duration: var(--audio-bar-duration);
    animation-delay: var(--audio-bar-delay);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes audio-icon-bar {
    from {
        transform: scaleY(var(--audio-bar-min));
    }

    to {
        transform: scaleY(1);
    }
}

// Per-bar rhythm. Values are deliberately non-harmonic (no shared divisor) so
// the pattern does not visibly loop.
$audio-bars: (
    1: (1.10s, -0.00s, 0.45),
    2: (0.80s, -0.30s, 0.30),
    3: (1.35s, -0.15s, 0.40),
    4: (0.95s, -0.45s, 0.22),
    5: (1.20s, -0.60s, 0.28),
    6: (0.75s, -0.20s, 0.50),
    7: (1.30s, -0.50s, 0.28),
    8: (0.90s, -0.35s, 0.22),
    9: (1.15s, -0.10s, 0.40),
    10: (0.85s, -0.55s, 0.30),
    11: (1.25s, -0.25s, 0.45)
);

@each $index, $config in $audio-bars {
    .audio-icon__bar:nth-of-type(#{$index}) {
        --audio-bar-duration: #{list.nth($config, 1)};
        --audio-bar-delay: #{list.nth($config, 2)};
        --audio-bar-min: #{list.nth($config, 3)};
    }
}

@media (prefers-reduced-motion: reduce) {
    .audio-icon--playing .audio-icon__bar {
        animation: none;
    }
}