/* ============================================================
   SIPRO — sistema "Modulo" sul tema chiaro.

   Sul fondo chiaro il pannello smette di essere un'atmosfera e
   diventa quello che e': una foto di prodotto. Ombre nette invece
   di aloni, contorni leggibili.

   --sun non fa piu' sorgere un sole (il fondo e' gia' luminoso):
   scorrendo cresce la presenza del verde, dal bianco neutro in cima
   al verde del brand in fondo. Stesso arco del payback.
   ============================================================ */

:root { --sun: 0; }

/* velo verde che si intensifica scorrendo */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 60% at 50% 106%,
      rgba(143, 194, 30, calc(.22 * var(--sun))) 0%,
      rgba(113, 165, 0, calc(.10 * var(--sun))) 40%,
      transparent 74%);
}

/* ---------- il modulo ---------- */
.pv {
  position: absolute;
  pointer-events: none;
  background: url("/img/panel-detail.svg") center / contain no-repeat;
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.2,.7,.3,1), transform 1.3s cubic-bezier(.2,.7,.3,1);
  will-change: transform, opacity;
}
[data-seen="1"] .pv { opacity: var(--pv-o, .5); }

/* riflesso sul vetro: su chiaro basta un velo, non un lampo */
.pv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(152deg, transparent 14%, rgba(255,255,255,.30) 23%,
              rgba(226,240,190,.16) 30%, transparent 46%);
}

/* ---------- 1. HERO: il modulo come prodotto ---------- */
.hero { overflow: hidden; }
/* Il modulo dell'hero ora vive DENTRO la card (.book::after): qui resta
   solo per le pagine che non hanno una card, quindi si nasconde di default. */
.hero .pv--hero { display: none; }
.hero .pv--hero-legacy {
  z-index: -1;
  right: 2%;
  bottom: 4%;
  width: clamp(300px, 40vw, 620px);
  aspect-ratio: 640 / 440;
  --pv-o: 1;
  opacity: 1;
  transform: perspective(1200px) rotateX(46deg) rotateZ(-16deg);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 34px 46px rgba(30, 40, 15, .34));
  animation: pv-lay 2.1s cubic-bezier(.2,.75,.3,1) both;
}
@keyframes pv-lay {
  from { opacity: 0; transform: perspective(1200px) rotateX(60deg) rotateZ(-22deg) translateY(70px); }
  to   { opacity: 1; transform: perspective(1200px) rotateX(46deg) rotateZ(-16deg); }
}
/* alone verde: il modulo sta appoggiato sulla luce */
.hero .pv--hero::before {
  content: "";
  position: absolute;
  left: 4%; right: 4%; bottom: -14%;
  height: 44%;
  background: radial-gradient(ellipse at 50% 50%, rgba(143,194,30,.42), transparent 70%);
  filter: blur(24px);
}
.hero .pv--hero::after { animation: pv-shine 10s ease-in-out infinite; }
@keyframes pv-shine {
  0%, 100% { opacity: .55; transform: translate(0, 0); }
  50%      { opacity: 1;   transform: translate(-2%, 2%); }
}
.hero__grid, .home-hero .wrap { position: relative; z-index: 1; }

/* ---------- 2. IL MECCANISMO (fascia antracite) ---------- */
section:nth-of-type(2) { position: relative; overflow: hidden; }
section:nth-of-type(2) .pv {
  --pv-o: .22;
  left: -6%;
  bottom: -14%;
  width: clamp(340px, 44vw, 700px);
  aspect-ratio: 640 / 440;
  transform: perspective(1100px) rotateX(58deg) rotateZ(11deg) translateX(-40px);
  transform-origin: 0 100%;
  -webkit-mask-image: linear-gradient(70deg, #000 26%, transparent 78%);
  mask-image: linear-gradient(70deg, #000 26%, transparent 78%);
}
section:nth-of-type(2)[data-seen="1"] .pv {
  transform: perspective(1100px) rotateX(58deg) rotateZ(11deg) translateX(0);
}

/* ---------- 3. NON SOLO RISPARMIO (chiaro) ---------- */
section:nth-of-type(3) { position: relative; overflow: hidden; }
section:nth-of-type(3) .pv {
  --pv-o: .14;
  right: -8%;
  top: -10%;
  width: clamp(260px, 32vw, 520px);
  aspect-ratio: 640 / 440;
  transform: perspective(900px) rotateX(40deg) rotateZ(-24deg) translateY(-30px);
  -webkit-mask-image: linear-gradient(220deg, #000 22%, transparent 74%);
  mask-image: linear-gradient(220deg, #000 22%, transparent 74%);
}
section:nth-of-type(3)[data-seen="1"] .pv {
  transform: perspective(900px) rotateX(40deg) rotateZ(-24deg) translateY(0);
}

/* ---------- 4. COME LO PAGHI (fascia verde) ----------
   Sul verde pieno il modulo va tenuto basso: il contrasto e' gia' forte
   e il testo deve restare la cosa piu' leggibile della fascia. */
section:nth-of-type(4) { position: relative; overflow: hidden; }
section:nth-of-type(4) .pv {
  --pv-o: .16;
  bottom: -12%;
  width: clamp(190px, 21vw, 330px);
  aspect-ratio: 640 / 440;
  transform-origin: 50% 100%;
}
section:nth-of-type(4) .pv:nth-of-type(1) {
  left: 4%;
  transform: perspective(1000px) rotateX(56deg) rotateZ(-9deg) translateY(50px);
}
section:nth-of-type(4) .pv:nth-of-type(2) {
  left: 38%; bottom: -6%;
  transform: perspective(1000px) rotateX(53deg) rotateZ(-9deg) translateY(50px);
}
section:nth-of-type(4) .pv:nth-of-type(3) {
  left: 71%; bottom: 0%;
  transform: perspective(1000px) rotateX(50deg) rotateZ(-9deg) translateY(50px);
}
section:nth-of-type(4)[data-seen="1"] .pv:nth-of-type(1) { transform: perspective(1000px) rotateX(56deg) rotateZ(-9deg); transition-delay: 0s; }
section:nth-of-type(4)[data-seen="1"] .pv:nth-of-type(2) { transform: perspective(1000px) rotateX(53deg) rotateZ(-9deg); transition-delay: .14s; }
section:nth-of-type(4)[data-seen="1"] .pv:nth-of-type(3) { transform: perspective(1000px) rotateX(50deg) rotateZ(-9deg); transition-delay: .28s; }

/* ---------- 5. PROVA SOCIALE: la distesa ---------- */
section:nth-of-type(5) { position: relative; overflow: hidden; }
section:nth-of-type(5) .pv {
  --pv-o: .13;
  left: -10%; right: -10%;
  bottom: -6%;
  width: auto;
  height: clamp(130px, 17vw, 250px);
  background-size: auto 210%;
  background-repeat: repeat-x;
  background-position: center 40%;
  transform: perspective(800px) rotateX(63deg) translateY(40px);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 18%, transparent 88%);
  mask-image: linear-gradient(to top, #000 18%, transparent 88%);
}
section:nth-of-type(5)[data-seen="1"] .pv { transform: perspective(800px) rotateX(63deg); }

/* ---------- 6. CTA FINALE (fascia verde) ---------- */
.final { position: relative; overflow: hidden; }
.final .pv {
  --pv-o: .20;
  left: 50%;
  bottom: -18%;
  width: clamp(340px, 46vw, 760px);
  aspect-ratio: 640 / 440;
  transform: translateX(-50%) perspective(1400px) rotateX(62deg) scale(.94);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 -14px 40px rgba(0, 0, 0, .18));
  -webkit-mask-image: linear-gradient(to top, #000 24%, transparent 92%);
  mask-image: linear-gradient(to top, #000 24%, transparent 92%);
  z-index: 0;
}
.final[data-seen="1"] .pv {
  transform: translateX(-50%) perspective(1400px) rotateX(48deg) scale(1);
}
.final[data-seen="1"] .pv::after { animation: pv-shine 7s ease-in-out infinite; }

/* ---------- home: una sola sezione dopo l'hero ---------- */
.home-hero { overflow: hidden; }
body.home section:nth-of-type(2) .pv {
  --pv-o: .16;
  left: auto; right: -8%;
  bottom: -16%;
  width: clamp(300px, 38vw, 560px);
  transform: perspective(1000px) rotateX(54deg) rotateZ(-14deg);
}

/* ---------- leggibilita' prima di tutto ---------- */
@media (max-width: 860px) {
  .hero .pv--hero { right: -14%; bottom: -4%; width: 92%; opacity: .5; }
  section:nth-of-type(4) .pv:nth-of-type(2),
  section:nth-of-type(4) .pv:nth-of-type(3) { display: none; }
  section:nth-of-type(4) .pv:nth-of-type(1) { left: 50%; width: 62%; }
  .pv { --pv-o: .1; }
}

@media (prefers-reduced-motion: reduce) {
  .pv, .pv::after, .hero .pv--hero { animation: none !important; transition: opacity .3s linear; }
  [data-seen="1"] .pv { transform: none !important; }
  .hero .pv--hero { transform: perspective(1200px) rotateX(46deg) rotateZ(-16deg) !important; }
}