/* Pagine prodotto: il pezzo che gira e si apre in apertura (/wp-content/uploads/protechta/assets/js/pezzo.js).
   Colori, caratteri e sezioni vengono da site.css e prodotti.css. */

.palco { position: relative; height: 320vh; padding: 0 !important; }
.palco-fissa { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.palco canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%);
}
.palco-fissa::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 10, 20, 0.9) 0%, rgba(5, 10, 20, 0.5) 34%, rgba(5, 10, 20, 0) 56%);
}

/* titolo del prodotto: sparisce appena il pezzo inizia ad aprirsi */
.palco-testo {
  position: absolute; z-index: 3; left: var(--gutter); bottom: clamp(72px, 12vh, 140px);
  width: min(560px, calc(100% - 2 * var(--gutter)));
}
.palco-testo h1 {
  margin: 0; font: 600 clamp(56px, 9vw, 132px)/.95 var(--display); letter-spacing: -0.05em;
  padding-bottom: .12em;
  background: linear-gradient(180deg, #ffffff 10%, #9fd2ff 70%, #3fa9ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 40px rgba(63, 169, 255, 0.18));
}
.palco-testo .lead { margin: 16px 0 0; max-width: 460px; font-size: 17px; line-height: 1.55; }
.palco-testo .azioni { margin-top: 28px; }
.suggerimento {
  position: absolute; z-index: 3; left: 50%; bottom: 26px; translate: -50% 0;
  font: 400 11px/1 var(--mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--tenue);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.suggerimento::after {
  content: ''; width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--blu), transparent);
  animation: scendi 1.8s ease-in-out infinite;
}
@keyframes scendi { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* le parti compaiono mentre il pezzo si apre */
.parti {
  position: absolute; z-index: 2; left: var(--gutter); top: 50%; translate: 0 -50%;
  width: min(420px, 40vw); list-style: none; margin: 0; padding: 0;
}
.parti .riga-processo { opacity: 0; translate: -12px 0; transition: opacity .45s ease, translate .45s ease; padding: 16px 0 18px; }
.parti .riga-processo::before {
  content: ''; position: absolute; left: -14px; top: 22px; width: 3px; height: 0; border-radius: 3px;
  background: var(--blu); box-shadow: 0 0 10px var(--blu); transition: height .35s ease;
}
.parti .riga-processo p { font-size: 15px; }
.parti .riga-processo.attiva { opacity: 1; translate: 0 0; }
.parti .riga-processo.attiva::before { height: 22px; }
.parti .riga-processo.attiva .meta { color: var(--blu); }
/* le parti gia viste restano, piu tenui */
.parti .riga-processo.vista { opacity: .4; translate: 0 0; }
.parti .riga-processo.vista p { display: none; }

@media (max-width: 760px) {
  .palco-fissa::before { background: linear-gradient(0deg, var(--notte) 0%, var(--notte) 30%, rgba(5, 10, 20, 0.6) 44%, rgba(5, 10, 20, 0) 56%); }
  .palco canvas { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%); mask-image: linear-gradient(180deg, transparent 0, #000 10%); }
  .palco-testo { bottom: 88px; }
  .palco-testo .lead { font-size: 15px; }
  .parti { top: auto; bottom: 70px; translate: none; width: auto; right: var(--gutter); }
  .parti .riga-processo { position: absolute; left: 0; right: 0; bottom: 0; }
  .parti .riga-processo.vista { opacity: 0; }
  .suggerimento { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .suggerimento::after { animation: none; }
}

/* prodotti che si abbinano, in fondo alla pagina */
.abbina { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 48px; }
.abbina-titolo { margin-right: 8px; font: 400 12px/1.3 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--tenue); }

/* nomi lunghi (Bloccasterzo, Blocca porte): il titolo resta intero nella sua colonna */
.palco-testo h1.lungo { font-size: clamp(44px, 6.4vw, 100px); }

/* foto del prodotto nella scheda "in breve": altezza naturale, niente box calcolati */
.foto-pezzo { margin: 0 0 40px; }
.foto-pezzo img { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 30px rgba(63, 169, 255, 0.12)); }
.foto-pezzo.foto img { max-width: 420px; border-radius: 14px; border: 1px solid var(--bordo); filter: none; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }

/* l'occhiello sta dentro il titolo: riga sua, colore suo, fuori dal gradiente */
.palco-testo h1 .occhiello { display: flex; width: max-content; max-width: 100%; margin: 0 0 18px; color: var(--blu); -webkit-text-fill-color: var(--blu); }
.foto-pezzo.largo img { max-width: 640px; }