/* =========================================================
   MOLECOLA — Lattina 3D nella card prodotto
   ========================================================= */

/* Contenitore che sta al posto dell'attuale <img> della lattina nella card.
   Adatta position/top/height ai tuoi valori reali della card. */
.js-can3d-stage {
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 69%; /* misurato sulla card "Classica" reale: il blocco testo
                  sotto inizia al 72% circa dell'altezza della card, questo
                  valore usa lo spazio disponibile senza toccarlo. Se cambi
                  il layout della card, ricontrolla dove inizia il testo e
                  aggiorna questo valore di conseguenza. */
  z-index: 3; /* deve stare sopra il resto della card quando si solleva ed
                 esce dal riquadro (titolo, testo, bottone, sfondo) */

  /* PENDENZA statica a riposo: un lean 2D (non una rotazione 3D).
     transform-origin in basso = la lattina "pende" restando ancorata
     alla base invece di ruotare intorno al centro. Cambia --can-tilt
     se il cliente vuole un angolo diverso da 5°. */
  --can-tilt: 5deg;
  /* sollevamento in hover. ATTENZIONE: la card è dentro uno Swiper
     (Advanced Slider di Breakdance) che ha overflow:hidden SENZA alcun
     margine sopra la card — necessario per far scorrere le slide in
     orizzontale, non si può togliere. Qualsiasi sollevamento che porti
     il bordo superiore di .js-can3d-stage sotto 0 (cioè oltre
     top - |can-lift|) viene tagliato dallo swiper. Con top:16px il
     massimo sollevamento sicuro è -16px; -14px lascia 2px di margine.
     Misurato dal vivo su molecola.foleia.com il 2026-09-23. */
  --can-lift: -14px;
  transform: rotate(var(--can-tilt)) translateY(0);
  transform-origin: 50% 100%;
  transition: transform 0.28s ease-out;
}

/* Il sollevamento è controllato da JS (classe .is-can3d-hover aggiunta/
   rimossa da ml-can3d.js su mouseenter/mouseleave), NON da :hover diretto.
   Prima usava :hover, ma su questo sito abbiamo trovato dal vivo una
   transizione CSS rimasta "agganciata" a metà (un'Animation in stato
   running per sempre, con :hover e i mouseenter/mouseleave del JS che si
   susseguivano senza una fonte di verità unica) che bloccava il transform
   in uno stato intermedio. Guidare tutto dalla stessa classe JS elimina
   quella doppia fonte di stato e con essa il rischio che si blocchi. */
.js-can3d-card.is-can3d-hover .js-can3d-stage {
  transform: rotate(var(--can-tilt)) translateY(var(--can-lift));
}

.js-can3d-stage model-viewer {
  width: 100%;
  height: 100%;
  --poster-color: transparent;
  pointer-events: none; /* niente orbit manuale: solo l'hover-spin controllato da JS */
}

/* IMPORTANTE — "esce dal riquadro sottostante":
   perché il sollevamento sia visibile davvero (la lattina che supera il
   bordo superiore della card), nessun antenato di .js-can3d-stage deve
   tagliare il contenuto con overflow:hidden (né la card stessa, né un
   eventuale wrapper con border-radius/clip). Nei page builder come
   Oxygen/Breakdance questo overflow è spesso impostato di default sul
   contenitore della card per arrotondare gli angoli dell'immagine: va
   tolto (overflow: visible) sul contenitore che avvolge .js-can3d-card,
   oppure l'arrotondamento va spostato su un elemento più interno che non
   include lo stage della lattina. */