/* =========================================
   RICHIAMO BIBLIOGRAFICO
   ========================================= */

.article-citation {
    position: relative;
    display: inline-block;

    color: #7E8C9B;
	font-family: "Palatino Linotype", Palatino, serif;
    font-weight: 600;

    cursor: help;
    z-index: 1;
}
.article-citation:hover{
	color: var(--primary-dark);
}

.article-citation-tooltip {
    background: var(--primary-color-medium);
	color:white;
	border-radius: 10px;
	padding: 8px 12px;
	opacity:0;
	transition:opacity 0.8s ease;
}

.article-citation-tooltip-visible {
    opacity: 1;
}
/* =========================================
   EFFETTO BERSAGLIO
   ========================================= */

.article-citation-attention::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 100%;
    height: 100%;
	background: var(--primary-color-light);
    border: 1px solid var(--primary-dark);
    border-radius:6px;

    transform:
        translate(-50%, -50%)
        scale(1.6);

    opacity: 0;

    pointer-events: none;

    animation: citationTarget 1.1s ease-out;
}

.article-citation-attention:hover::after {
	 animation: citationTarget 1.5s ease-out;
}


@keyframes citationTarget {

    0% {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0;
    }

    35% {
        opacity: 0.5;
		transform: translate(-50%, -50%) scale(1.2);
    }

    70% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.4;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0;
    }
}