/* =============================================================================
   PERCORSI VIVI — un segreto: passando col mouse su una card dei percorsi, la
   card si sveglia finche' resti sopra. Respira, una luce ne percorre il bordo,
   un riflesso la attraversa; Live "trasmette" in diretta.
   Solo livelli sovrapposti (pointer-events: none): struttura e flip intatti.
   ============================================================================= */
@property --vita-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.vita-strato { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; }

/* la luce che percorre il bordo */
.vita-bordo {
  padding: 1.5px;
  background: conic-gradient(from var(--vita-ang), transparent 0deg 250deg, var(--vita-col) 305deg, rgba(255, 255, 255, .85) 318deg, transparent 335deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 1.4s cubic-bezier(.22, .61, .36, 1);
  animation: vitaGiro 7.5s linear infinite paused;
}
.flip-front--mentor .vita-bordo { animation-duration: 6.2s; animation-direction: reverse; }
.vivo .vita-bordo { opacity: .75; animation-play-state: running; }
@keyframes vitaGiro { to { --vita-ang: 360deg; } }

/* il riflesso di vetro, una volta sola al risveglio */
.vita-riflesso { overflow: hidden; }
.vita-riflesso::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 60%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .0) 30%, rgba(255, 255, 255, .11) 50%, rgba(255, 255, 255, 0) 70%, transparent 100%);
  transform: translateX(-120%) skewX(-12deg); opacity: 0;
}
.vivo .vita-riflesso::before { animation: vitaRiflesso 2.2s cubic-bezier(.45, 0, .2, 1) .15s 1 both; }
@keyframes vitaRiflesso { 0% { transform: translateX(-120%) skewX(-12deg); opacity: 1; } 100% { transform: translateX(260%) skewX(-12deg); opacity: 1; } }

/* (l'alone di luce che seguiva il cursore e' stato tolto: percorsi-vivi.js non crea piu' lo strato) */

/* LIVE — le onde di trasmissione dal punto rosso */
.flip-badge--live { overflow: visible; }
.vita-onda { position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; border: 1px solid rgba(248, 113, 113, .7); opacity: 0; pointer-events: none; }
.vivo .vita-onda { animation: vitaOnda 2.6s cubic-bezier(.2, .6, .3, 1) infinite; }
.vivo .vita-onda + .vita-onda { animation-delay: 1.3s; }
@keyframes vitaOnda { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(4.2); opacity: 0; } }
/* colori per card */
.flip-front--boot { --vita-col: rgba(52, 211, 153, .95); --vita-luce: rgba(16, 185, 129, .13); }
.flip-front--mentor { --vita-col: rgba(251, 191, 36, .95); --vita-luce: rgba(251, 191, 36, .12); }

@media (prefers-reduced-motion: reduce) {
  .vita-strato, .vita-onda { display: none !important; }
}