/* Cartes vidéo : affiche + bouton lecture, un doigt appuie, la vidéo démarre.
   Chronologie (1,7 s) : le doigt arrive (0-30 %), appuie (48 % = 0,82 s), repart. */

.vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.tap__btn {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.55);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7);
  transition: opacity 0.35s ease;
}
.tap__btn i {
  margin-left: 5px;
  border-left: 20px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.tap__ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  border: 2px solid #fff;
  opacity: 0;
}

/* La pointe de l'index (x 11,5 ; y 3 sur 24) tombe au centre du bouton. */
.tap__finger {
  position: absolute;
  left: calc(50% - 27px);
  top: calc(50% - 7px);
  z-index: 4;
  width: 56px;
  height: 56px;
  fill: #fff;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.65));
  opacity: 0;
  transform: translate(90px, 110px) rotate(-12deg);
}

.vid.is-tapping .tap__finger { animation: tap-finger 1.7s var(--ease-out) forwards; }
.vid.is-tapping .tap__btn { animation: tap-press 1.7s ease; }
.vid.is-tapping .tap__ripple { animation: tap-ripple 0.9s ease-out 0.8s; }
.vid.is-playing .tap__btn { opacity: 0; }

@keyframes tap-finger {
  0% { opacity: 0; transform: translate(90px, 110px) rotate(-12deg) scale(1); }
  30% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  42% { opacity: 1; transform: translate(0, 0) scale(1); }
  48% { opacity: 1; transform: translate(0, 7px) scale(0.9); }
  58% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(60px, 90px) rotate(10deg) scale(1); }
}
@keyframes tap-press {
  0%, 44% { transform: none; background: rgba(10, 10, 10, 0.55); }
  48% { transform: scale(0.86); background: rgba(245, 165, 36, 0.9); }
  60%, 100% { transform: none; background: rgba(10, 10, 10, 0.55); }
}
@keyframes tap-ripple {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0; transform: scale(2.6); }
}

/* Mouvement réduit : affiche seule, sans bouton ni doigt. */
.stage.is-static .tap__btn,
.stage.is-static .tap__ripple,
.stage.is-static .tap__finger { display: none; }