/* Manifesto */
#manifesto {
  position: relative;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  background: var(--ink);
}
.manifesto-glow {
  position: absolute; inset: -20% -10%;
  background:
    radial-gradient(46% 62% at 72% 40%, rgba(180, 24, 14, .3), transparent 72%),
    radial-gradient(50% 60% at 18% 88%, rgba(40, 54, 110, .34), transparent 72%);
}
.manifesto-inner { position: relative; width: 100%; display: grid; pointer-events: none; }
.m-group { grid-area: 1 / 1; align-self: center; }
.m-group p > span { position: relative; display: inline-block; }
.manifesto-x {
  position: absolute; z-index: 0; right: -3vw; top: 50%;
  width: min(44vw, 80vh); aspect-ratio: 1; margin-top: calc(min(44vw, 80vh) / -2);
  will-change: transform, opacity;
}
/* Il disegno tecnico attorno alla X: stesso centro, tela più grande del 60%. */
.m-halo, .m-draw {
  --mx: min(44vw, 80vh);
  position: absolute; z-index: 0; top: 50%;
  right: calc(-3vw - var(--mx) * .3);
  width: calc(var(--mx) * 1.6); height: calc(var(--mx) * 1.6); margin-top: calc(var(--mx) * -.8);
  pointer-events: none;
}
.m-halo { background: radial-gradient(closest-side, rgba(255, 40, 20, .3), rgba(200, 24, 14, .1) 55%, transparent); will-change: transform, opacity; }
.m-draw svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.m-plan { -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 80%); mask-image: radial-gradient(closest-side, #000 45%, transparent 80%); }
.m-line { fill: none; stroke: rgba(255, 255, 255, .24); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.m-accent { stroke: rgba(255, 74, 52, .62); }
.m-fade { fill: none; stroke: rgba(255, 255, 255, .34); stroke-width: 1.5; }
.m-marks { stroke: rgba(255, 110, 90, .7); }
.m-note { fill: rgba(255, 255, 255, .62); stroke: none; font-size: 21px; font-weight: 600; letter-spacing: .08em; }
.m-shard-body { transform-box: fill-box; transform-origin: center; animation: m-float 12s ease-in-out infinite alternate paused; }
#manifesto.is-near .m-shard-body { animation-play-state: running; }
.rm .m-shard-body { animation: none; }
@keyframes m-float {
  from { transform: translate(-7px, 10px) rotate(-7deg); }
  to { transform: translate(9px, -14px) rotate(9deg); }
}
.manifesto-x canvas { width: 100%; height: 100%; display: block; }
.manifesto-x .x-fallback { inset: 22%; }
.js:not(.rm) .manifesto-x { visibility: hidden; }
html:not(.js) .manifesto-x { display: none; }
.strike-line {
  position: absolute; left: -.04em; right: -.06em; top: 56%;
  height: max(3px, .05em);
  background: var(--red);
  box-shadow: 0 0 14px rgba(255, 42, 26, .9);
  transform-origin: left;
  transform: rotate(-1.2deg);
  border-radius: 2px;
}
.js:not(.rm) .strike-line { transform: scaleX(0); }

/* Servizi */
#servizi {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--ink);
}
.service-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(44% 56% at 72% 68%, rgba(214, 28, 16, .36), transparent 74%),
    radial-gradient(60% 70% at 8% 100%, rgba(40, 54, 110, .36), transparent 72%);
}
.service {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  padding: 10vh var(--gutter);
}
.service-text { position: relative; z-index: 2; }
.service-text .title { margin-top: .32em; }
.rule {
  display: block; height: 2px; width: min(240px, 60%); margin: 1.4em 0 1.1em;
  background: var(--red); transform-origin: left;
  box-shadow: 0 0 10px rgba(255, 42, 26, .8);
}
.service-stage {
  position: relative; height: 100%;
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d;
  transform: perspective(1400px);
}
#servizi { perspective: 1600px; }
.rig { position: relative; width: 100%; max-width: 860px; }
.rig-site .rig-main { width: 92%; }
.rig-site .rig-side { position: absolute; right: 0; bottom: -7%; width: 23%; filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .55)); }
.rig-dash .rig-main { width: 100%; }
.rig-shop { display: flex; align-items: center; justify-content: center; gap: 6%; }
.rig-phone { width: 32%; }
.rig-card { width: 44%; }

.constellation { position: relative; width: 100%; max-width: 680px; aspect-ratio: 5 / 4; }
/* Il grafico gira in CSS, solo con trasformazioni: non pesa sulla pagina. Le scritte controruotano e restano dritte. */
.c-orbit { position: absolute; left: 50%; top: 50%; height: 100%; aspect-ratio: 1; margin-left: -40%; margin-top: -40%; animation: c-orbit 26s linear infinite paused; will-change: transform; }
.c-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.c-sat { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 0; height: 0; animation: c-orbit 26s linear infinite reverse paused; will-change: transform; }
.is-live .c-orbit, .is-live .c-sat { animation-play-state: running; }
@keyframes c-orbit { to { transform: rotate(360deg); } }
.constellation line { stroke: rgba(255, 60, 40, .42); stroke-width: 1; vector-effect: non-scaling-stroke; }
.c-core {
  position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border-radius: 50%; background: radial-gradient(circle, #ffe2da 0%, var(--red) 48%, rgba(255, 42, 26, 0) 100%);
  box-shadow: 0 0 34px 12px rgba(255, 42, 26, .62);
}
.c-node {
  position: absolute;
  translate: -50% -50%;
  white-space: nowrap;
  padding: .55em .9em;
  font-size: clamp(.72rem, 1.05vw, .95rem);
  font-weight: 560;
  border: 1px solid rgba(255, 60, 40, .55);
  border-radius: 8px;
  background: rgba(22, 13, 20, .86);
  box-shadow: 0 0 16px rgba(255, 42, 26, .16);
}

@media (max-width: 860px) {
  .service {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: start;
    padding: 84px var(--gutter) 76px;
    gap: 8px;
  }
  /* Su telefono la X sta sotto le scritte, che salgono per farle posto. */
  #manifesto { align-items: flex-start; padding-top: 15svh; }
  .manifesto-x { left: 50%; right: auto; top: auto; bottom: 8svh; width: min(92vw, 52svh); margin: 0 0 0 calc(min(92vw, 52svh) / -2); }
  .rm #manifesto { padding-bottom: min(92vw, 52svh); }
  .m-halo, .m-draw {
    --mx: min(92vw, 52svh);
    left: 50%; right: auto; top: auto; bottom: calc(8svh - var(--mx) * .3);
    margin: 0 0 0 calc(var(--mx) * -.8);
  }
  .m-line, .m-fade { stroke-width: 2.6; }
  .m-note, .m-shard.is-far { display: none; }
  .rule { margin: .8em 0 .7em; }
  .service-stage { min-height: 0; }
  .rig { max-width: 100%; }
  .constellation { max-width: 100%; }
  .c-node { font-size: .68rem; }
}

/* Con reduced motion o senza JS le sezioni si leggono in fila */
.rm #manifesto, html:not(.js) #manifesto { height: auto; padding-block: 16vh; }
.rm .manifesto-inner, html:not(.js) .manifesto-inner { display: block; }
.rm .m-group + .m-group, html:not(.js) .m-group + .m-group { margin-top: 1em; }
.rm #servizi, html:not(.js) #servizi { height: auto; overflow: visible; }
.rm .service, html:not(.js) .service { position: relative; inset: auto; min-height: 90vh; }
.rm .c-orbit, .rm .c-sat { animation: none; }