Aspas acima da sombra

O efeito "hover" no primeiro "blockquote", faz com que as aspas do segundo "blockquote" fiquem acima do efeito da sombra, ao invés de ficar atrás como todos os outros elementos. Isso só acontece com o segundo "blockquote", o primeiro funciona perfeitamente. O meu código html e css para as citações está abaixo:

HTML:

               <blockquote class="quote" tabindex="1">
                    <p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>
                    <cite>José Souza, Fiat</cite>
                </blockquote>

                <blockquote class="quote" tabindex="1">
                    <p>João domina as tecnologias como ninguém. Eu apresentava um problema, ele tinha na ponta da língua a solução mais adequada com as tecnologias mais recentes.</p>
                    <cite>Manoel Santos, Petrobrás</cite>
                </blockquote>

CSS:

.quote {
    background-color: #D9E5E3;
    border: 0.5em solid #C2CCCA;
    width: 30ch;
    box-sizing: border-box;
    margin: 1em 0;
    padding: 1em;
}

.quote:hover,
.quote:focus {
    box-shadow: 0 0 0 99999px rgba(0,0,0,.8);
}

p:first-letter {
    font-size: 2em;
    font-weight: bold;
    text-shadow: -1px 1px .1em black;
    font-weight: bold;
    margin-right: .2ch;
    line-height: 1;
}

.quote::before {
    content: '“';
    position: absolute;
    font-size: 10em;
    color: #bbb;
    line-height: .8;
}

.quote > p {
    z-index: 1;
    position: relative;
}

.quote:nth-of-type(odd) {
    float: right;
    margin-left: 2em;
}

.quote:nth-of-type(even) {
    float: left;
    margin-right: 2em;
}

.quote:nth-of-type(even):hover,
.quote:nth-of-type(even):focus {
    transform: scale(1.2) rotate(-5deg);
}

.quote:nth-of-type(odd):hover,
.quote:nth-of-type(odd):focus {
    transform: scale(1.2) rotate(5deg);
}