/* /assets/css/zc-meter.css */

:root{
    /* speed + spacing */
    --zc-bars: 64;
    --zc-beat: 0.56s;
    --zc-gap: 2px;
    --zc-pad-x: 12px;

    --zc-bar-radius: 2px;

    /* LED segmentation (desktop-ish default) */
    --zc-led-on: 16px;
    --zc-led-off: 4px;

    /* colors */
    --zc-bar-color: rgba(255,255,255,0.3);
    --zc-bg: transparent;
}

/* bounce */
@keyframes zc-audio-bounce-vertical {
    0%, 100% { transform: scaleY(0.2); opacity: 0.45; }
    15%      { transform: scaleY(1);   opacity: 1; }
    45%      { transform: scaleY(0.5); opacity: 0.75; }
    75%      { transform: scaleY(0.75);opacity: 0.9; }
}

.zc-meter{
    width: 100%;
    height: 260px;
    display: flex;
    align-items: flex-end;
    gap: var(--zc-gap);
    padding: 0 var(--zc-pad-x);
    background: var(--zc-bg);
    pointer-events: none;
    user-select: none;
    overflow: hidden;

    /* helps mobile Safari paint masks/animations more consistently */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.zc-meter__barwrap{
    flex: 1 1 0;
    position: relative;
    height: var(--h, 30%);
    min-width: 0; /* IMPORTANT on mobile so bars can actually shrink */
}

.zc-meter__bar{
    position: absolute;
    inset: 0;
    background: var(--zc-bar-color);
    border-radius: var(--zc-bar-radius) var(--zc-bar-radius) 0 0;
    transform-origin: bottom;
    animation: zc-audio-bounce-vertical var(--dur, var(--zc-beat)) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    overflow: hidden;

    /* LED mask (gaps show page background) */
    --zc-led-row: calc(var(--zc-led-on) + var(--zc-led-off));

    -webkit-mask-image: repeating-linear-gradient(
            to bottom,
            #000 0,
            #000 var(--zc-led-on),
            transparent var(--zc-led-on),
            transparent var(--zc-led-row)
    );
    mask-image: repeating-linear-gradient(
            to bottom,
            #000 0,
            #000 var(--zc-led-on),
            transparent var(--zc-led-on),
            transparent var(--zc-led-row)
    );
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-size: 100% var(--zc-led-row);
    mask-size: 100% var(--zc-led-row);

    /* keeps thin bars from looking “fat” on some mobile GPUs */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Fallback if mask is unsupported */
@supports not ((mask-image: linear-gradient(#000,#000)) or (-webkit-mask-image: linear-gradient(#000,#000))){
    .zc-meter__bar{
        -webkit-mask-image: none;
        mask-image: none;
    }
    .zc-meter__bar::after{
        content:"";
        position:absolute;
        inset:0;
        --zc-led-row: calc(var(--zc-led-on) + var(--zc-led-off));
        background-image: linear-gradient(
                to bottom,
                rgba(0,0,0,0) 0,
                rgba(0,0,0,0) var(--zc-led-on),
                rgba(0,0,0,1) var(--zc-led-on),
                rgba(0,0,0,1) var(--zc-led-row)
        );
        background-size: 100% var(--zc-led-row);
        background-repeat: repeat;
        pointer-events:none;
    }
}

/* =========================
   MOBILE FIX (match desktop look)
   - shorter meter so it doesn’t crawl into logo/text
   - smaller LED blocks so you get more “rows” like desktop
   - tighter padding so bars span the full width
   ========================= */
@media (max-width: 640px){
    .zc-meter{
        height: 150px;
        padding: 0 8px;
        gap: 2px;
    }
    :root{
        --zc-led-on: 10px;
        --zc-led-off: 3px;
        --zc-bar-radius: 2px;
    }
}

/* even tighter phones */
@media (max-width: 420px){
    .zc-meter{
        height: 135px;
        padding: 0 6px;
        gap: 2px;
    }
    :root{
        --zc-led-on: 9px;
        --zc-led-off: 3px;
    }
}

/* =========================
   DESKTOP WIDE
   ========================= */
@media (min-width: 1100px){
    .zc-meter{ height: 220px; }
    :root{
        --zc-gap: 3px;
        --zc-led-on: 18px;
        --zc-led-off: 5px;
    }
}

/* MOBILE WIDTH FIX (paste at bottom of zc-meter.css so it wins) */

/* =========================
   MOBILE – wider bars, same count
   ========================= */
@media (max-width: 640px){

    .zc-meter{
        height: 150px;
        gap: 3px;              /* slightly more breathing room */
        padding: 0 10px;
    }

    /* allow bars to grow evenly and fill width */
    .zc-meter__barwrap{
        flex: 1 1 0;           /* equal distribution */
        min-width: 20px;        /* prevents ultra-thin bars */
    }

    :root{
        --zc-led-on: 10px;
        --zc-led-off: 3px;
    }
}