/* =============================================================================
   LASTRA DI CRISTALLO — le due card dei Percorsi come lastre spesse di cristallo scuro.
   Dentro la lastra, a strati: la foto in fondo (.lastra-pozzo / .lastra-foto), un velo di
   vetro a meta' (.lastra-velo), i testi in superficie (.lastra-testi) e sopra la luce
   (.lastra-luce: riflesso speculare e filo di bisello che seguono l'angolo).
   Base (sempre): una card piana, ferma ed elegante, con la stessa foto e gli stessi testi
   (vale anche con "riduci movimento" e senza JavaScript).
   html.lastra-3d (messa da lastra.js): la lastra ha uno spessore vero, bordi di vetro
   costruiti con facce 3D, e si muove (lastra.js).
   ============================================================================= */

/* ---------- base: la stessa card di prima, a strati ---------- */
#percorsi .flip-front { animation: none; }                       /* via il respiro sul box-shadow: copriva l'anello d'oro della Live */
#percorsi .flip-front--boot,
#percorsi .flip-front--mentor { background: #030817; }
#percorsi .flip-front--boot::before,
#percorsi .flip-front--mentor::before { content: none; }          /* il riflesso colorato ora e' nel velo, dentro la lastra */

.lastra-pozzo {
  position: absolute; inset: 0; z-index: 0;
  border-radius: calc(var(--r) - 1px);
  overflow: hidden; pointer-events: none;
}
.lastra-foto {
  position: absolute; inset: -12px;                                 /* margine per la parallasse: la foto non scopre mai i bordi */
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.flip-front--boot .lastra-foto {
  background-image: linear-gradient(150deg, rgba(2, 6, 23, .84) 0%, rgba(2, 6, 23, .65) 100%), url('../images/bootcamp-bg.webp');
}
.flip-front--mentor .lastra-foto {
  background-image: linear-gradient(130deg, rgba(2, 6, 23, .86) 0%, rgba(2, 6, 23, .68) 100%), url('../images/mentor-bg.webp');
}
.lastra-velo { position: absolute; inset: -8px; }
.flip-front--boot .lastra-velo {
  background:
    radial-gradient(ellipse 80% 55% at 30% 15%, rgba(16, 185, 129, .15), transparent 60%),
    linear-gradient(118deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .018) 100%);
}
.flip-front--mentor .lastra-velo {
  background:
    radial-gradient(ellipse 80% 55% at 70% 15%, rgba(251, 191, 36, .18), transparent 60%),
    linear-gradient(118deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .018) 100%);
}
/* la profondita' del vetro: un'ombra morbida lungo il bordo interno, ferma con la cornice */
.lastra-pozzo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), inset 0 0 38px rgba(2, 6, 23, .55), inset 0 14px 26px -18px rgba(255, 255, 255, .06);
}

.lastra-testi {
  position: absolute; inset: 0; z-index: 2;
  padding: 32px 28px;
  display: flex; flex-direction: column; justify-content: center;
}
.flip-back .lastra-testi { justify-content: flex-start; }
/* 13/10: anche il fronte parte dall'alto (sotto l'etichetta), cosi' le due carte affiancate hanno i testi in fila;
   "Scopri di piu'" va in fondo alla carta e non resta un vuoto sotto */
.flip-front .lastra-testi { justify-content: flex-start; padding-top: 62px; }
.flip-front .flip-hint { margin-top: auto; }
.no-capo { white-space: nowrap; }

.lastra-luce {
  position: absolute; inset: 0; z-index: 3;
  border-radius: calc(var(--r) - 1px);
  overflow: hidden; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* il retro: un'altra superficie di vetro, opaca e incisa (fili concentrici come un quadrante) */
#percorsi .flip-back { background: #050b18; }
.lastra-incisione {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
}
.lastra-incisione::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 18% 0%, var(--lastra-tinta, rgba(16, 185, 129, .10)), transparent 62%),
    repeating-radial-gradient(circle at 104% 108%, rgba(255, 255, 255, .042) 0 .7px, rgba(255, 255, 255, 0) 1.4px 7px),
    linear-gradient(160deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 45%);
  -webkit-mask: radial-gradient(circle at 104% 108%, #000 0 40%, rgba(0, 0, 0, .35) 78%, rgba(0, 0, 0, .15) 100%);
  mask: radial-gradient(circle at 104% 108%, #000 0 40%, rgba(0, 0, 0, .35) 78%, rgba(0, 0, 0, .15) 100%);
}
.lastra-incisione::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02), inset 0 0 34px rgba(0, 0, 0, .45);
}
.flip-back--boot { --lastra-tinta: rgba(16, 185, 129, .13); }
.flip-back--mentor { --lastra-tinta: rgba(251, 191, 36, .11); }

/* la Live in primo piano: l'anello d'oro finalmente visibile (prima lo copriva il respiro) */
#percorsi .flip-wrap--featured .flip-front {
  border-color: rgba(251, 191, 36, .40);
  box-shadow: var(--shadow), 0 0 0 1px rgba(251, 191, 36, .13), 0 0 30px rgba(251, 191, 36, .06);
}
#percorsi .flip-wrap--featured:hover .flip-front {
  box-shadow: var(--shadow), 0 0 0 1px rgba(251, 191, 36, .13), 0 0 30px rgba(251, 191, 36, .06);
}
#percorsi .flip-wrap--featured:hover { transform: scale(1.03); }  /* niente piu' ingrandimento al passaggio (ammorbidiva il testo): ora la lastra si inclina */
@media (max-width: 768px) { #percorsi .flip-wrap--featured:hover { transform: none; } }
#percorsi .flip-wrap { perspective: none; }

/* ---------- html.lastra-3d: la lastra spessa che si muove ---------- */
html.lastra-3d #percorsi .flip-card { perspective: var(--lastra-p, 1500px); }
html.lastra-3d #percorsi .flip-inner {
  transition: none; will-change: auto;
  transform: translateZ(calc(var(--lastra-t, 10px) / -2));
}
html.lastra-3d #percorsi .flip-card.is-flipped .flip-inner { transform: translateZ(calc(var(--lastra-t, 10px) / -2)) rotateY(180deg); }
html.lastra-3d #percorsi .flip-front {
  transform-style: preserve-3d; overflow: visible;
  transform: translateZ(calc(var(--lastra-t, 10px) / 2));
}
html.lastra-3d #percorsi .flip-front > * { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
html.lastra-3d #percorsi .flip-front > .lastra-luce { transform: translateZ(.5px); }
html.lastra-3d #percorsi .flip-back { transform: rotateY(180deg) translateZ(calc(var(--lastra-t, 10px) / 2)); }
/* l'ombra della lastra ora e' un livello a parte, sotto: non gira con le facce */
html.lastra-3d #percorsi .flip-front,
html.lastra-3d #percorsi .flip-back { box-shadow: none; }
html.lastra-3d #percorsi .flip-wrap--featured .flip-front,
html.lastra-3d #percorsi .flip-wrap--featured:hover .flip-front { box-shadow: 0 0 0 1px rgba(251, 191, 36, .13), 0 0 30px rgba(251, 191, 36, .06); }

/* l'ombra portata: morbida, si allarga e si sposta quando la lastra si solleva */
.lastra-ombra {
  position: absolute; left: 3%; right: 3%; top: 6%; bottom: -7%;
  border-radius: 40px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 2, 10, .62), rgba(0, 2, 10, .34) 55%, rgba(0, 2, 10, 0));
  transform-origin: 50% 40%;
  will-change: transform, opacity;
}

/* lo spessore: le facce del bordo (lati e spicchi degli angoli), generate da lastra.js */
.lastra-bordi { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.lastra-faccia {
  position: absolute; display: block;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(180deg, var(--lastra-filo) 0, var(--lastra-vetro) 1.6px, var(--lastra-vetro-c) 50%, var(--lastra-vetro) calc(100% - 1.6px), var(--lastra-filo2) 100%);
}
.lastra-faccia > i {
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .7) 0, var(--lastra-luce-bordo) 26%, var(--lastra-luce-bordo-c) 50%, var(--lastra-luce-bordo) 74%, rgba(255, 255, 255, .35) 100%);
}
#percorsi .flip-wrap {
  --lastra-filo: rgba(190, 255, 230, .55); --lastra-filo2: rgba(160, 230, 210, .3);
  --lastra-vetro: rgb(4, 21, 20); --lastra-vetro-c: rgb(8, 38, 33);
  --lastra-luce-bordo: rgba(52, 211, 153, .5); --lastra-luce-bordo-c: rgba(110, 231, 183, .62);
  --lastra-bis: 214, 255, 238;
}
#percorsi .flip-wrap--featured {
  --lastra-filo: rgba(255, 236, 190, .6); --lastra-filo2: rgba(240, 210, 150, .32);
  --lastra-vetro: rgb(24, 17, 6); --lastra-vetro-c: rgb(44, 32, 10);
  --lastra-luce-bordo: rgba(251, 191, 36, .5); --lastra-luce-bordo-c: rgba(253, 224, 140, .62);
  --lastra-bis: 255, 238, 200;
}

/* la luce sulla superficie: un riflesso a banda e il filo del bisello, guidati dall'angolo */
.lastra-spec {
  position: absolute; top: -40%; bottom: -40%; left: -50%; width: 200%;
  opacity: 0; will-change: transform, opacity;
  background:
    linear-gradient(104deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .028) 40%, rgba(255, 255, 255, .06) 47.5%, rgba(255, 255, 255, .085) 50%, rgba(255, 255, 255, .06) 52.5%, rgba(255, 255, 255, .028) 60%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 22% 26% at 36% 34%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 100%);
}
.lastra-bis {
  position: absolute; inset: 0; border-radius: inherit; padding: 1px; opacity: 0;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.lastra-bis--n { background: linear-gradient(180deg, rgba(var(--lastra-bis), .95), rgba(var(--lastra-bis), .25) 7%, rgba(var(--lastra-bis), 0) 34%); }
.lastra-bis--s { background: linear-gradient(0deg, rgba(var(--lastra-bis), .95), rgba(var(--lastra-bis), .25) 7%, rgba(var(--lastra-bis), 0) 34%); }
.lastra-bis--e { background: linear-gradient(270deg, rgba(var(--lastra-bis), .95), rgba(var(--lastra-bis), .25) 7%, rgba(var(--lastra-bis), 0) 34%); }
.lastra-bis--w { background: linear-gradient(90deg, rgba(var(--lastra-bis), .95), rgba(var(--lastra-bis), .25) 7%, rgba(var(--lastra-bis), 0) 34%); }

@media (prefers-reduced-motion: reduce) {
  .lastra-ombra, .lastra-bordi { display: none; }
}