/* ==========================================================================================
   servizio-gestione-digitale.css — firma e scena di /servizi/gestione-digitale/ (BRIEF §15).
   Firma: due colonne di contenuti che salgono come un feed (le immagini sono il materiale vero dei
   case study); scorrendo salgono più in fretta (--spinta da servizio.js).
   Scena del metodo: il piano del mese → contenuti nei giorni (is-1) → messaggi (is-2) →
   la lettura dei risultati (is-3).
   ========================================================================================== */

/* ---------------------------------------------------------------- firma: il feed ---------- */
.sx-feed {
  display: flex;
  justify-content: space-between;
  padding: 0 clamp(16px, 5vw, 96px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}
.sx-feed__col { width: clamp(170px, 19vw, 290px); opacity: .78; transform: rotate(-6deg) translateY(calc(var(--spinta, 0px) * -1)); }
.sx-feed__col--dx { transform: rotate(5deg) translateY(calc(var(--spinta, 0px) * -1.4)); }
.sx-feed__nastro { display: flex; flex-direction: column; animation: sx-feed-sale 46s linear infinite; }
.sx-feed__col--dx .sx-feed__nastro { animation-duration: 38s; }
.sx-feed__post {
  display: grid;
  gap: 9px;
  margin-bottom: 18px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(21, 17, 42, .9);
  box-shadow: 0 0 0 1px var(--linea), 0 30px 60px -30px rgba(121, 64, 224, .6);
}
.sx-feed__testa { display: flex; align-items: center; gap: 8px; font: 500 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--carta-2); }
.sx-feed__testa i { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--viola-luce), var(--neon)); }
.sx-feed__media { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; }
.sx-feed__post--0 .sx-feed__media { background: radial-gradient(circle at 30% 30%, #ce69e3, #41256c 70%); }
.sx-feed__post--1 .sx-feed__media { background: linear-gradient(160deg, #a98bff, #23143d); }
.sx-feed__post--2 .sx-feed__media { background: radial-gradient(circle at 70% 60%, #7940e0, #0d0a1a 75%); }
.sx-feed__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sx-feed__azioni { display: flex; gap: 9px; }
.sx-feed__azioni i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(239, 233, 225, .42); }
.sx-feed__azioni i:first-child { background: var(--neon); box-shadow: none; }
@keyframes sx-feed-sale { to { transform: translateY(-50%); } }
@media (max-width: 819px) { .sx-feed { opacity: .45; } .sx-feed__col { width: 34vw; } }
@media (prefers-reduced-motion: reduce) { .sx-feed__nastro { animation: none; } }

/* ---------------------------------------------------------------- scena: il calendario ---- */
.sc-gd {
  position: absolute;
  inset: 0;
  container-type: size;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 3cqh;
  padding: 4cqh 3.4cqw;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(23, 17, 46, .94), rgba(10, 8, 20, .97));
  box-shadow: 0 0 0 1px rgba(169, 139, 255, .26), 0 60px 140px -50px rgba(121, 64, 224, .6);
  overflow: hidden;
}
.sc-gd__testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.sc-gd__mese { font: 300 clamp(16px, 5.4cqh, 34px)/1 var(--font-display); letter-spacing: -.03em; color: var(--carta); }
.sc-gd__temi { display: flex; gap: 8px; }
.sc-gd__temi i { padding: 7px 12px; border-radius: 999px; font: 500 clamp(9px, 2.1cqh, 12px)/1 var(--font-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--carta); box-shadow: inset 0 0 0 1px var(--tema); }
.sc-gd .t0 { --tema: #a98bff; }
.sc-gd .t1 { --tema: #ce69e3; }
.sc-gd .t2 { --tema: #efe9e1; }
.sc-gd__griglia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto repeat(4, minmax(0, 1fr)); gap: 1.4cqh 1cqw; transition: opacity .7s, filter .7s; }
.sc-gd__gs { text-align: center; font: 500 clamp(9px, 2cqh, 12px)/1 var(--font-mono); color: var(--carta-3); }
.sc-gd__giorno { position: relative; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--linea); }
.sc-gd__giorno b { position: absolute; left: 8px; top: 6px; font: 400 clamp(9px, 2cqh, 12px)/1 var(--font-mono); color: var(--carta-3); }
.sc-gd__post {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 38%;
  bottom: 12%;
  border-radius: 6px;
  background: var(--tema);
  opacity: 0;
  transform: scale(.3);
  transition: opacity .4s, transform .7s var(--curva-expo);
  transition-delay: calc(var(--i) * 55ms);
}
.is-1 .sc-gd__post { opacity: .85; transform: none; }
.sc-gd__msg {
  position: absolute;
  right: -4px;
  top: -10px;
  z-index: 2;
  display: flex;
  gap: 3px;
  padding: 6px 8px;
  border-radius: 10px 10px 10px 2px;
  background: var(--carta);
  opacity: 0;
  transform: translateY(10px) scale(.4);
  transition: opacity .4s, transform .7s var(--curva-expo);
  transition-delay: calc(var(--i) * 120ms);
}
.sc-gd__msg i { width: 4px; height: 4px; border-radius: 50%; background: var(--nero); }
.is-2 .sc-gd__msg { opacity: 1; transform: none; }
.sc-gd__grafico { position: absolute; left: 3.4cqw; right: 3.4cqw; bottom: 6cqh; height: 46cqh; width: calc(100% - 6.8cqw); overflow: visible; opacity: 0; }
/* la linea si scopre da sinistra (clip-path): con vector-effect il tratteggio animato non funziona */
.sc-gd__grafico { clip-path: inset(-20% 100% -20% 0); transition: opacity .6s, clip-path 1.8s var(--curva-expo); }
.sc-gd__grafico polyline { fill: none; stroke: var(--neon); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 8px rgba(206, 105, 227, .7)); }
.is-3 .sc-gd__griglia { opacity: .3; filter: blur(1px); }
.is-3 .sc-gd__grafico { opacity: 1; }
.is-3 .sc-gd__grafico { clip-path: inset(-20% 0 -20% 0); }