/* Pagina pesca: il pesce che nuota giù per tutta la pagina (pesca-salto.js).
   Due livelli grandi come la pagina: la scia dietro ai contenuti, il pesce sopra (solo nei margini, su computer)
   o dietro (telefono e tablet, dove i margini sono stretti). Nessuno spazio riservato: la pagina non si sposta. */
.bv-nuoto { position: absolute; left: 0; top: 0; overflow: hidden; pointer-events: none; }
.bv-nuoto--dietro { z-index: -1; }
.bv-nuoto--avanti { z-index: 5; }
.bv-nuoto--avanti.is-stretto { z-index: -1; }

.bv-salto__corpo { fill: var(--bv-orange); stroke: var(--bv-navy); stroke-width: 1.6; stroke-linejoin: round; }
.bv-salto__pinna { fill: none; stroke: var(--bv-navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bv-salto__occhio { fill: var(--bv-navy); }
.bv-salto__scia { fill: none; stroke: var(--bv-ocean); stroke-width: 2; stroke-dasharray: 6 7; stroke-linecap: round; }
.bv-salto__scia.is-fatta { opacity: 0.3; }

.bv-salto__anello { fill: none; stroke: var(--bv-ocean); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: bv-anello 0.7s ease-out forwards; }
.bv-salto__goccia { fill: var(--bv-ocean); animation: bv-goccia 0.6s ease-out forwards; }

@keyframes bv-anello { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(3.6); opacity: 0; } }
@keyframes bv-goccia {
	50% { transform: translate(calc(var(--dx) * 0.6), var(--dy)); opacity: 1; }
	to { transform: translate(var(--dx), 2px); opacity: 0; }
}

@media print {
	.bv-nuoto { display: none; }
}