/*
 * Pop-up 01: o verde de sempre, com o disco de vinil no lugar da imagem que
 * ele carregava. O disco e feito de gradientes e gira junto com o audio; a
 * capa da musica entra no meio, como o selo de um compacto.
 *
 * Medida do catalogo: 600x230.
 */

:root {
    --pp-bg: #178d72;
    --pp-fg: #ffffff;
    --pp-muted: rgba(255, 255, 255, .72);
    --pp-accent: #ffffff;
    --pp-accent-fg: #0f6d58;
    --pp-line: rgba(255, 255, 255, .3);
}

.pp--p01 { gap: 24px; padding: 24px; }

/*
 * O vinil: sulcos finos e de pouco contraste, um brilho suave por cima e o
 * selo branco no meio, com o furo do eixo. O primeiro desenho tinha aneis
 * grossos e uma faixa diagonal dura, o que parecia um rolo de corda.
 */
.pp--p01 .pp__disc {
    width: 150px;
    height: 150px;
    color: rgba(255, 255, 255, .5);
    border-radius: 50%;
    background:
        conic-gradient(from 200deg, rgba(255, 255, 255, .13) 0 6%, transparent 6% 44%, rgba(255, 255, 255, .09) 44% 50%, transparent 50% 94%, rgba(255, 255, 255, .13) 94%),
        repeating-radial-gradient(circle, #0d0d0d 0 1px, #191919 1px 2.4px),
        #111111;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(255, 255, 255, .09);
}

/* o selo, que fica sob a capa quando ha capa */
.pp--p01 .pp__disc::before {
    content: "";
    position: absolute;
    width: 37%;
    height: 37%;
    border-radius: 50%;
    background: #f2f2f2;
}

/* e o furo do eixo, que fica por cima de tudo */
.pp--p01 .pp__disc::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0d0d0d;
}

/*
 * A capa vira o selo do disco, e nao o disco inteiro. A medida vai em
 * largura e altura, e nao em inset: imagem e elemento substituido, e com
 * largura automatica ela volta ao tamanho original, ignorando o recuo.
 */
.pp--p01 .pp__disc img {
    top: 50%;
    left: 50%;
    width: 37%;
    height: 37%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* sem capa, a nota fica sobre o selo */
.pp--p01 .pp__disc svg { position: relative; width: 26px; height: 26px; color: #8d8d8d; }

.pp--p01.is-playing .pp__disc { animation: pp-spin 3.4s linear infinite; }
.pp--p01.is-loading .pp__disc { animation: pp-spin 8s linear infinite; }

.pp--p01 .pp__song { font-size: 21px; }
.pp--p01 .pp__ico:hover { color: #ffffff; }