/* ==========================================================================================
   servizio-design-branding.css — firma e scena di /servizi/design-branding/ (BRIEF §15).
   Firma: tracciato di costruzione che si disegna e ruota piano, la palette del sito in orbita;
   il titolo è in grottesco e le lettere pesano di più vicino al cursore (servizio.js, .is-pesi).
   Scena del metodo: parole dell'ascolto → tracciato e lettera (is-1) → colore (is-2) → il segno
   applicato su biglietto, schermo e insegna (is-3).
   ========================================================================================== */

/* ---------------------------------------------------------------- firma ------------------ */
.pagina-sx--design-branding .sx-eroe__titolo { font-family: var(--font-sans); font-weight: 400; letter-spacing: -.035em; line-height: .88; }
.pagina-sx--design-branding .sx-eroe__titolo .serif { font-size: 1.06em; }
.sx-eroe.is-pesi .sx-l { transition: font-weight .35s var(--curva-expo); }

.sx-tracciato { display: grid; place-items: center; }
.sx-tracciato svg { width: min(118svh, 112vw); height: auto; opacity: .55; animation: sx-gira 160s linear infinite; }
.sx-tracciato :is(circle, rect, line) {
  fill: none;
  stroke: rgba(169, 139, 255, .45);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sx-disegna 3.2s var(--curva-expo) forwards;
}
.sx-tracciato :is(circle, rect, line):nth-child(2n) { animation-delay: .25s; }
.sx-tracciato :is(circle, rect, line):nth-child(3n) { animation-delay: .5s; }
.sx-tracciato__palette { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: sx-gira 70s linear infinite reverse; }
.sx-tracciato__palette i {
  position: absolute;
  left: -12px;
  top: -12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 1px rgba(239, 233, 225, .3), 0 0 26px var(--c);
  transform: rotate(calc(var(--i) * 60deg)) translateX(min(47svh, 44vw));
}
@keyframes sx-gira { to { transform: rotate(360deg); } }
@keyframes sx-disegna { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sx-tracciato svg, .sx-tracciato__palette { animation: none; }
  .sx-tracciato :is(circle, rect, line) { animation: none; stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------- scena: il segno --------- */
.sc-ds {
  position: absolute;
  inset: 0;
  container-type: size;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 45%, rgba(65, 37, 108, .5), rgba(13, 10, 26, .96) 72%);
  box-shadow: 0 0 0 1px rgba(169, 139, 255, .26), 0 60px 140px -50px rgba(121, 64, 224, .6);
  overflow: hidden;
}
.sc-ds__parole { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.sc-ds__parole li {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  padding: 1.6cqh 2cqw;
  border-radius: 999px;
  font: 500 clamp(10px, 2.6cqh, 15px)/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--carta);
  background: rgba(13, 10, 26, .9);
  box-shadow: inset 0 0 0 1px rgba(169, 139, 255, .5);
  transition: opacity .6s, transform 1s var(--curva-expo), filter .6s;
  animation: sc-ds-galleggia 5s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -.9s);
}
@keyframes sc-ds-galleggia { to { translate: 0 -1.6cqh; } }
.is-1 .sc-ds__parole li { opacity: 0; filter: blur(4px); transform: translate(calc((50 - var(--x)) * 1cqw), calc((50 - var(--y)) * 1cqh)) scale(.4); }

.sc-ds__griglia { position: absolute; width: min(74cqh, 60cqw); height: auto; overflow: visible; transition: opacity .8s; }
.sc-ds__griglia :is(circle, rect, line) { fill: none; stroke: rgba(169, 139, 255, .5); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--curva-expo); }
.sc-ds__griglia :nth-child(2n) { transition-delay: .15s; }
.sc-ds__griglia :nth-child(3n) { transition-delay: .3s; }
.is-1 .sc-ds__griglia :is(circle, rect, line) { stroke-dashoffset: 0; }
.is-3 .sc-ds__griglia { opacity: .18; }

.sc-ds__segno {
  position: relative;
  font: 300 min(40cqh, 30cqw)/1 var(--font-display);
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--viola-luce);
  opacity: 0;
  transform: scale(.82);
  transition: opacity .7s, transform 1.1s var(--curva-expo), color .8s, text-shadow .8s;
}
.is-1 .sc-ds__segno { opacity: 1; transform: none; }
.is-2 .sc-ds__segno { color: var(--viola-luce); -webkit-text-stroke-color: transparent; text-shadow: 0 0 60px rgba(169, 139, 255, .45); }
.is-3 .sc-ds__segno { transform: translateY(-20cqh) scale(.52); }

.sc-ds__palette { position: absolute; left: 0; right: 0; bottom: 8%; display: flex; justify-content: center; gap: 2.2cqw; margin: 0; padding: 0; list-style: none; transition: opacity .5s; }
.sc-ds__palette li {
  display: grid;
  justify-items: center;
  gap: 1.2cqh;
  font: 500 clamp(9px, 2.1cqh, 12px)/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--carta-2);
  opacity: 0;
  transform: translateY(3cqh);
  transition: opacity .5s, transform .8s var(--curva-expo);
  transition-delay: calc(var(--i) * 70ms);
}
.sc-ds__palette i { width: 9cqh; height: 9cqh; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(239, 233, 225, .28), 0 10px 30px -10px var(--c); }
.is-2 .sc-ds__palette li { opacity: 1; transform: none; }
.is-3 .sc-ds__palette { opacity: 0; }

.sc-ds__usi { position: absolute; left: 0; right: 0; bottom: 9%; display: flex; justify-content: center; align-items: flex-end; gap: 4cqw; }
.sc-ds__uso { position: relative; display: grid; place-items: center; opacity: 0; transform: translateY(5cqh); transition: opacity .6s, transform 1s var(--curva-expo); }
.sc-ds__uso b { font: 300 9cqh/1 var(--font-display); letter-spacing: -.05em; font-weight: 300; }
.sc-ds__uso--biglietto { width: 26cqw; aspect-ratio: 1.75; border-radius: 6px; background: var(--carta); color: var(--viola); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
.sc-ds__uso--biglietto i { position: absolute; left: 8%; height: 2px; background: rgba(6, 5, 12, .3); }
.sc-ds__uso--biglietto i:nth-of-type(1) { bottom: 18%; width: 34%; }
.sc-ds__uso--biglietto i:nth-of-type(2) { bottom: 11%; width: 22%; }
.sc-ds__uso--schermo { width: 14cqw; aspect-ratio: 9 / 18; border-radius: 3cqw; background: var(--nero); color: var(--viola-luce); box-shadow: inset 0 0 0 1px rgba(239, 233, 225, .3), 0 30px 60px -20px rgba(121, 64, 224, .6); transition-delay: .12s; }
.sc-ds__uso--schermo b { font-size: 6cqh; }
.sc-ds__uso--schermo i { position: absolute; left: 14%; right: 14%; height: 3px; border-radius: 2px; background: rgba(239, 233, 225, .2); }
.sc-ds__uso--schermo i:nth-of-type(1) { bottom: 28%; }
.sc-ds__uso--schermo i:nth-of-type(2) { bottom: 22%; right: 34%; }
.sc-ds__uso--schermo i:nth-of-type(3) { bottom: 10%; height: 4cqh; border-radius: 999px; background: var(--viola); }
.sc-ds__uso--insegna { width: 30cqw; aspect-ratio: 3 / 1; border-radius: 4px; background: linear-gradient(135deg, var(--viola), #41256c); color: var(--carta); box-shadow: 0 30px 60px -20px rgba(121, 64, 224, .7); transition-delay: .24s; }
.is-3 .sc-ds__uso { opacity: 1; transform: none; }