/* ---------------------------------------------------------------
   stones.css — quattro sassi, stessa penna dei pesci.
   Contorno nero 2px, campitura bianca, niente ombre.
   --------------------------------------------------------------- */

#canvas { position: absolute; top: 0; left: 0; z-index: 0; }
.bio    { z-index: 3; }

.stones {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;   /* i pesci continuano a sentire il cursore */
  overflow: hidden;
}

.stone {
  position: absolute;
  pointer-events: auto;
  display: block;
  width: 128px;
  text-decoration: none;
}
.stone:hover { text-decoration: none; }

.stone svg { display: block; width: 100%; height: auto; overflow: visible; }

/* la pietra */
.stone .rock {
  fill: #ffffff;
  stroke: #000000;
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill 260ms ease;
}

/* la parola sulla pietra */
.stone .carve {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-family: "Inconsolata", monospace;
  font-size: 13px;
  font-weight: 700;
  color: #000000;
  transition: color 260ms ease;
}
.stone .carve img {           /* per i loghi veri */
  display: block; height: 15px; width: auto; margin: 0 auto;
  filter: grayscale(1) contrast(2);
  transition: filter 260ms ease;
}

/* le onde: due cerchi sottili, fermi finché non lo tocchi */
.stone .wave {
  position: absolute;
  left: 50%; top: 50%;
  width: 132%; height: 66%;
  border: 1px solid #000000;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.62);
  pointer-events: none;
}
.stone .wave.two { animation-delay: 1.1s; }

/* al passaggio la pietra si riempie d'inchiostro */
.stone:hover .rock, .stone:focus .rock { fill: #000000; }
.stone:hover .carve, .stone:focus .carve { color: #ffffff; }
.stone:hover .carve img, .stone:focus .carve img { filter: grayscale(1) invert(1) contrast(2); }
.stone:hover .wave, .stone:focus .wave { animation: stoneWave 2.2s ease-out infinite; }
.stone:focus { outline: 1px solid #1A0DAB; outline-offset: 8px; }

@keyframes stoneWave {
  0%   { opacity: .4; transform: translate(-50%,-50%) scale(.62); }
  100% { opacity: 0;  transform: translate(-50%,-50%) scale(1.5); }
}

/* dove è caduto ognuno, lontano dal testo in alto a sinistra */
.stone.s1 { left: 60%; top: 24%; width: 138px; }
.stone.s2 { left: 80%; top: 55%; width: 120px; }
.stone.s3 { left: 20%; top: 68%; width: 146px; }
.stone.s4 { left: 45%; top: 82%; width: 126px; }

/* il cerchio nell'acqua al click */
.drop {
  position: absolute;
  z-index: 2;
  width: 150px; height: 150px;
  margin: -75px 0 0 -75px;
  border: 1px solid #000000;
  border-radius: 50%;
  pointer-events: none;
  animation: stoneDrop 800ms cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes stoneDrop {
  from { transform: scale(.06); opacity: .7; }
  to   { transform: scale(1.5) scaleY(.72); opacity: 0; }
}

/* schermi stretti: i sassi scendono nella metà bassa, in due file */
@media (max-width: 700px) {
  .stone { width: 100px !important; }
  .stone.s1 { left: 8%;  top: 52%; }
  .stone.s2 { left: 55%; top: 58%; }
  .stone.s3 { left: 10%; top: 74%; }
  .stone.s4 { left: 57%; top: 80%; }
  .stone .carve { font-size: 11px; }
}