/*
 * Modelo 04: o cinza da versao antiga, com a mesma ordem de sempre (botao,
 * volume, equalizador e a faixa escura com a musica). O equalizador que era
 * um gif animado agora e feito de gradiente e mascara: mesmas cores, sem
 * imagem para baixar.
 */

:root {
    --pl-bg: #d9d9d9;
    --pl-fg: #1f2329;
    --pl-muted: #6d737b;
    --pl-accent: #757a81;
    --pl-accent-fg: #ffffff;
    --pl-line: #c4c7cb;
    --pl-cover-radius: 4px;
    --pl-gap: 10px;
}

.pl--04 { border-bottom: 1px solid #c9cbce; }

.pl--04 .pl__cover { order: 1; background: #cbcdd1; }
.pl--04 .pl__play { order: 2; }
.pl--04 .pl__eq { order: 4; }
.pl--04 .pl__meta { order: 5; }

/* o grupo do volume se desfaz para o botao de TV ir sozinho para o fim */
.pl--04 .pl__vol { display: contents; }
.pl--04 .pl__mute { order: 3; }
.pl--04 .pl__range { order: 3; margin-left: -4px; }
.pl--04 .pl__cast { order: 6; }

.pl--04 .pl__play { width: 36px; height: 36px; }
.pl--04 .pl__play svg { width: 15px; height: 15px; }

/* barra de volume mais encorpada */
.pl--04 .pl__range { height: 18px; }
.pl--04 .pl__range::-webkit-slider-runnable-track { height: 7px; background: linear-gradient(to right, var(--pl-accent) var(--vol), #cfd2d6 var(--vol)); }
.pl--04 .pl__range::-moz-range-track { height: 7px; background: #cfd2d6; }
.pl--04 .pl__range::-moz-range-progress { height: 7px; }
.pl--04 .pl__range::-webkit-slider-thumb { width: 15px; height: 15px; margin-top: -4px; }
.pl--04 .pl__range::-moz-range-thumb { width: 15px; height: 15px; }

/* a musica fica na faixa escura, centralizada, como no modelo antigo */
.pl--04 .pl__meta {
    padding: 7px 16px;
    color: #ffffff;
    border-radius: 4px;
    background: var(--pl-accent);
    text-align: center;
}

.pl--04 .pl__label { display: none; }

/* ---------- equalizador ---------- */

.pl--04 .pl__eq {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 26px;
}

/*
 * Cada coluna e a escala de cor inteira, cortada em blocos pela mascara. O que
 * sobe e desce e a tampa: assim a cor de cada altura fica sempre no mesmo
 * lugar, como num vu-meter de verdade.
 */
.pl--04 .pl__eq i {
    position: relative;
    width: 4px;
    height: 100%;
    background-image: linear-gradient(to top, #16a34a 0%, #65c11a 28%, #d8d215 52%, #f59e0b 74%, #e11d1d 100%);
    -webkit-mask-image: repeating-linear-gradient(to top, #000 0 3px, transparent 3px 5px);
    mask-image: repeating-linear-gradient(to top, #000 0 3px, transparent 3px 5px);
}

.pl--04 .pl__eq i::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 72%;
    background: var(--pl-bg);
}

.pl--04.is-playing .pl__eq i::after {
    animation: pl-eq var(--d, .8s) ease-in-out infinite alternate;
    animation-delay: var(--t, 0s);
}

@keyframes pl-eq {
    from { height: 80%; }
    to { height: 6%; }
}

/* sem espaco, o equalizador e a primeira coisa que sai */
@media (max-width: 620px) {
    .pl--04 .pl__eq { display: none; }
}

/*
 * O cartao usa a tag marquee: ela entra e sai na hora certa, coisa que a
 * animacao feita a mao nao acertava. O css cuida so do esmaecido das pontas,
 * para o texto nao surgir e sumir de supetao na borda.
 */
.pl--04 .pl__mq {
    width: 100%;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.3;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}

/* sem espaco, o equalizador e a primeira coisa que sai */
@media (max-width: 620px) {
    .pl--04 .pl__eq { display: none; }
}

/*
 * O cartao roda o marquee do modelo antigo: o titulo entra pela direita e
 * atravessa uma vez. As pontas esmaecem para o texto nao aparecer e sumir
 * de supetao na borda do cartao.
 */
.pl--04 .pl__track {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}

.pl--04 .pl__run,
.pl--04 .pl__run.is-running {
    animation: pl-loop var(--loop-time, 14s) linear infinite;
}

@keyframes pl-loop {
    from { transform: translateX(var(--loop-from, 100%)); }
    to { transform: translateX(-100%); }
}