/* ==========================================================================================
   servizio-video-contenuti.css — firma e scena di /servizi/video-contenuti/ (BRIEF §15).
   Firma: il set (bande del formato, luci che passano, guide dei terzi, angoli, REC e timecode
   che corre: servizio.js).
   Scena del metodo: la timeline di montaggio. Storyboard → tagli sulla traccia video (is-1) →
   grafica, musica e sottotitoli (is-2) → i formati di consegna (is-3). La testina segue lo
   scroll (--t).
   ========================================================================================== */

/* ---------------------------------------------------------------- firma: il set ----------- */
.sx-set { --banda: clamp(48px, 10vh, 110px); }
.sx-set__banda { position: absolute; left: 0; right: 0; height: var(--banda); background: #000; z-index: 2; }
.sx-set__banda--su { top: 0; }
.sx-set__banda--giu { bottom: 0; }
.sx-set__luce {
  position: absolute;
  left: -12vw;
  top: 4vh;
  width: 62vw;
  height: 62vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(206, 105, 227, .4), rgba(121, 64, 224, .15) 55%, transparent);
  animation: sx-set-luce 16s ease-in-out infinite alternate;
}
.sx-set__luce--2 { left: auto; right: -16vw; top: auto; bottom: -10vh; background: radial-gradient(closest-side, rgba(121, 64, 224, .5), rgba(65, 37, 108, .2) 55%, transparent); animation-duration: 21s; animation-direction: alternate-reverse; }
@keyframes sx-set-luce { to { transform: translate(18vw, 14vh) scale(1.2); } }
.sx-set__guide i { position: absolute; background: rgba(239, 233, 225, .08); }
.sx-set__guide i:nth-child(1), .sx-set__guide i:nth-child(2) { top: var(--banda); bottom: var(--banda); width: 1px; }
.sx-set__guide i:nth-child(1) { left: 33.33%; }
.sx-set__guide i:nth-child(2) { left: 66.66%; }
.sx-set__guide i:nth-child(3), .sx-set__guide i:nth-child(4) { left: 0; right: 0; height: 1px; }
.sx-set__guide i:nth-child(3) { top: calc(var(--banda) + (100% - 2 * var(--banda)) / 3); }
.sx-set__guide i:nth-child(4) { top: calc(var(--banda) + (100% - 2 * var(--banda)) * 2 / 3); }
.sx-set__angoli i { position: absolute; width: 34px; height: 34px; border: 0 solid rgba(239, 233, 225, .55); }
.sx-set__angoli i:nth-child(1) { left: 4vw; top: calc(var(--banda) + 20px); border-width: 1px 0 0 1px; }
.sx-set__angoli i:nth-child(2) { right: 4vw; top: calc(var(--banda) + 20px); border-width: 1px 1px 0 0; }
.sx-set__angoli i:nth-child(3) { left: 4vw; bottom: calc(var(--banda) + 20px); border-width: 0 0 1px 1px; }
.sx-set__angoli i:nth-child(4) { right: 4vw; bottom: calc(var(--banda) + 20px); border-width: 0 1px 1px 0; }
.sx-set__hud { position: absolute; bottom: calc(var(--banda) + 30px); display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--font-mono); letter-spacing: .08em; color: var(--carta-2); font-variant-numeric: tabular-nums; }
.sx-set__hud--sx { left: calc(4vw + 46px); }
.sx-set__hud--dx { right: calc(4vw + 46px); }
.sx-set__rec { width: 9px; height: 9px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 12px var(--neon); animation: sx-set-rec 1.2s steps(1) infinite; }
@keyframes sx-set-rec { 50% { opacity: .15; } }
.pagina-sx--video-contenuti .sx-eroe__briciole { position: relative; z-index: 3; }
@media (max-width: 819px) { .sx-set__hud--dx { display: none; } .sx-set__hud--sx { left: 4vw; } }
@media (prefers-reduced-motion: reduce) { .sx-set__luce, .sx-set__rec { animation: none; } }

/* ---------------------------------------------------------------- scena: la timeline ------ */
.sc-vd { position: absolute; inset: 0; container-type: size; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 2.6cqh; }
.sc-vd__monitor {
  position: relative;
  justify-self: center;
  height: 100%;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(169, 139, 255, .3), 0 50px 120px -50px rgba(121, 64, 224, .7);
  container-type: size;
}
/* il «girato»: luci in movimento al posto delle immagini (schema, non un video del cliente) */
.sc-vd__monitor::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 30% 60%, rgba(206, 105, 227, .9), transparent 32%),
    radial-gradient(circle at 70% 40%, rgba(121, 64, 224, .95), transparent 38%),
    radial-gradient(circle at 50% 90%, rgba(239, 233, 225, .35), transparent 30%),
    #120a24;
  opacity: 0;
  transition: opacity .8s;
  animation: sc-vd-girato 7s ease-in-out infinite alternate;
}
@keyframes sc-vd-girato { to { transform: translate(6%, -5%) rotate(8deg) scale(1.1); } }
.is-1 .sc-vd__monitor::before { opacity: 1; }
.sc-vd__quadro { position: absolute; inset: 12% 8%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4%; transition: opacity .5s; }
.sc-vd__quadro i { border-radius: 6px; outline: 1px dashed rgba(169, 139, 255, .6); outline-offset: -1px; background: linear-gradient(135deg, transparent 49.5%, rgba(169, 139, 255, .25) 50%, transparent 50.5%); }
.is-1 .sc-vd__quadro { opacity: 0; }
.sc-vd__sotto {
  position: absolute;
  left: 50%;
  bottom: 9%;
  translate: -50% 0;
  padding: 1.2cqh 2.4cqw;
  border-radius: 4px;
  white-space: nowrap;
  font: 500 clamp(10px, 5.4cqh, 20px)/1.2 var(--font-sans);
  color: #fff;
  background: rgba(0, 0, 0, .62);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s, transform .7s var(--curva-expo);
}
.is-2 .sc-vd__sotto { opacity: 1; transform: none; }
.sc-vd__formati { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 5%; background: rgba(6, 5, 12, .55); opacity: 0; transition: opacity .6s; }
.sc-vd__formati i { display: grid; place-items: end start; padding: 2.4cqh; font: 500 clamp(9px, 4.4cqh, 14px)/1 var(--font-mono); font-style: normal; letter-spacing: .06em; color: var(--carta); border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--carta), 0 0 30px -6px var(--viola-luce); transform: scale(.7); transition: transform .9s var(--curva-expo); }
.sc-vd__formati .f916 { height: 70%; aspect-ratio: 9 / 16; }
.sc-vd__formati .f11 { height: 48%; aspect-ratio: 1; transition-delay: .1s; }
.sc-vd__formati .f169 { height: 36%; aspect-ratio: 16 / 9; transition-delay: .2s; }
.is-3 .sc-vd__formati { opacity: 1; }
.is-3 .sc-vd__formati i { transform: none; }
.is-3 .sc-vd__sotto { opacity: 0; }

.sc-vd__tracce { position: relative; display: grid; gap: 1.2cqh; padding: 2cqh 2cqw; border-radius: 10px; background: rgba(13, 10, 26, .92); box-shadow: inset 0 0 0 1px var(--linea); --etichetta: 9cqw; --spazio: 1.5cqw; }
.sc-vd__traccia { display: grid; grid-template-columns: var(--etichetta) minmax(0, 1fr); align-items: center; gap: var(--spazio); height: 6.4cqh; min-height: 22px; }
.sc-vd__traccia > b { font: 500 clamp(9px, 2cqh, 11px)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--carta-2); }
.sc-vd__clip { position: relative; height: 100%; }
.sc-vd__clip i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--l) * 1%);
  width: calc(var(--w) * 1% - 3px);
  display: flex;
  align-items: center;
  border-radius: 4px;
  outline: 1px dashed rgba(169, 139, 255, .55);
  outline-offset: -1px;
  overflow: hidden;
  transition: background-color .5s, outline-color .4s;
  transition-delay: calc(var(--i) * 70ms);
}
.sc-vd__clip em { padding-left: 6px; font: 500 clamp(8px, 1.8cqh, 11px)/1 var(--font-mono); font-style: normal; white-space: nowrap; color: var(--carta-2); }
.is-1 .sc-vd__clip i { outline-color: transparent; background: rgba(121, 64, 224, .62); }
.is-1 .sc-vd__clip em { color: var(--carta); }
.sc-vd__clip--grafica i { outline-color: transparent; opacity: 0; transition: opacity .5s; transition-delay: calc(var(--i) * 90ms); }
.is-2 .sc-vd__clip--grafica i { opacity: 1; background: rgba(206, 105, 227, .55); }
.sc-vd__onda { display: flex; align-items: center; gap: 2px; height: 100%; }
.sc-vd__onda i { flex: 1; height: calc(var(--h) * 1%); border-radius: 2px; background: rgba(239, 233, 225, .6); transform: scaleY(0); transition: transform .5s var(--curva-expo); transition-delay: calc(var(--i) * 10ms); }
.is-2 .sc-vd__onda i { transform: none; }
/* la testina: uno strato largo quanto le tracce che trasla (transform: niente spostamenti di layout) */
.sc-vd__testina { position: absolute; top: 1cqh; bottom: 1cqh; left: calc(2cqw + var(--etichetta) + var(--spazio)); right: 2cqw; pointer-events: none; transform: translateX(calc(var(--t, 0) * 100%)); }
.sc-vd__testina::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--neon); box-shadow: 0 0 12px var(--neon); }
.sc-vd__testina::after { content: ""; position: absolute; left: -6px; top: -6px; border: 6px solid transparent; border-top: 8px solid var(--neon); border-bottom: 0; }