/* =====================================================================
   SERVICE VISUALS — sistema editoriale materico per le pagine canoniche
   ===================================================================== */

body[data-service] { --visual-ease: cubic-bezier(.2,.72,.2,1); }

.service-picture,
.service-picture img { width: 100%; height: 100%; display: block; }
.service-picture img { object-fit: cover; }

/* Hero: profondità leggera, griglia tecnica e didascalia leggibile. */
.service-hero-media { position: relative; isolation: isolate; overflow: hidden; }
.service-hero-media::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.13), transparent 36%, rgba(0,144,255,.12));
  mix-blend-mode: screen;
}
.service-hero-media::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000);
}
.service-hero-media .service-picture { position: absolute; inset: 0; z-index: 2; }
.service-hero-media .svc-media {
  transform: scale(1.025) translate3d(calc(var(--visual-x, 0) * 8px), calc(var(--visual-y, 0) * 8px), 0);
  transition: transform 1s var(--visual-ease);
}
.visual-chip {
  position: absolute; z-index: 5; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 11px; border: 1px solid rgba(255,255,255,.38); background: rgba(6,18,43,.62);
  backdrop-filter: blur(8px); color: #fff; font: 500 10px/1 var(--font-mono); letter-spacing: .15em; text-transform: uppercase;
}
.visual-chip::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 2px transparent; }

body[data-service="continuous"] .d-modulo .service-picture { position: relative; inset: auto; flex: 1; min-width: 0; }
body[data-service="continuous"] .d-modulo .svc-media { height: 100%; min-height: 300px; }

/* Interludio visivo condiviso. */
.visual-interlude { padding-block: 0 clamp(64px,9vw,132px); }
.visual-interlude__stage {
  position: relative; min-height: clamp(360px,56vw,660px); overflow: hidden; isolation: isolate;
  border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--ink);
  box-shadow: 0 32px 80px -58px rgba(10,37,64,.8);
}
.visual-interlude__stage .service-picture { position: absolute; inset: 0; z-index: 1; }
.visual-interlude__stage img {
  transform: scale(1.035) translate3d(calc(var(--visual-x, 0) * 10px), calc(var(--visual-y, 0) * 10px), 0);
  transition: transform 1.1s var(--visual-ease), filter .7s ease;
}
.visual-interlude__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(6,18,43,.78) 0%, rgba(6,18,43,.13) 55%, rgba(6,18,43,.36) 100%);
}
.visual-interlude__caption {
  position: absolute; z-index: 6; left: clamp(22px,4vw,54px); bottom: clamp(22px,4vw,52px); max-width: 34rem; color: #fff;
}
.visual-interlude__caption .eyebrow { color: rgba(255,255,255,.72); }
.visual-interlude__caption .eyebrow .reg { color: var(--accent-2); }
.visual-interlude__caption h2 { margin-top: 14px; font: 700 clamp(2rem,5vw,4.8rem)/.92 var(--font-display); letter-spacing: -.035em; }
.visual-interlude__caption p { max-width: 42ch; margin-top: 16px; color: rgba(255,255,255,.78); font-size: clamp(.96rem,1.4vw,1.12rem); }
.visual-index {
  position: absolute; z-index: 6; top: 18px; left: 18px; color: rgba(255,255,255,.72);
  font: 500 10px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
}

/* Offset: fogli CMYK che entrano a registro. */
.registration-deck { position: absolute; z-index: 5; right: clamp(20px,6vw,84px); top: 18%; width: clamp(150px,22vw,290px); aspect-ratio: 4/5; }
.registration-deck i { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.52); background: rgba(255,255,255,.08); backdrop-filter: blur(2px); transition: transform 1.1s var(--visual-ease); }
.registration-deck i:nth-child(1) { border-color: #18c7ff; transform: translate(-20px,-15px) rotate(-5deg); }
.registration-deck i:nth-child(2) { border-color: #ff3ea5; transform: translate(20px,-9px) rotate(4deg); }
.registration-deck i:nth-child(3) { border-color: #ffd23e; transform: translate(-10px,17px) rotate(-2deg); }
.registration-deck i:nth-child(4) { border-color: rgba(255,255,255,.82); transform: translate(10px,8px) rotate(2deg); }
.is-visible .registration-deck i { transform: translate(0,0) rotate(0); }

/* Etichette: nastro fisico e luce sulle finiture. */
.visual-interlude--labels .visual-interlude__stage { border-color: rgba(255,255,255,.18); }
.visual-interlude--labels .visual-interlude__veil { background: linear-gradient(90deg, rgba(6,18,43,.86), rgba(6,18,43,.06) 70%); }
.label-track { position: absolute; z-index: 5; right: -4%; top: 10%; width: 58%; height: 70px; transform: rotate(-8deg); border-block: 1px solid rgba(255,255,255,.4); background: rgba(250,248,240,.72); transition: translate 1.2s var(--visual-ease); }
.label-track::before { content: ""; position: absolute; inset: 9px 0; background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(10,37,64,.78) 19px 20px, transparent 21px 92px); }
.visual-glint { position: absolute; z-index: 4; inset: -40% auto -40% -28%; width: 20%; transform: rotate(18deg); background: linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); transition: left 1.5s var(--visual-ease); }
.is-visible .visual-glint { left: 108%; }

/* Promozionali: etichette di categoria in profondità. */
.object-tags { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.object-tags span { position: absolute; padding: 8px 10px; border: 1px solid rgba(255,255,255,.5); background: rgba(6,18,43,.7); color: #fff; font: 500 10px/1 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; backdrop-filter: blur(7px); transition: transform .9s var(--visual-ease), opacity .8s ease; opacity: 0; }
.object-tags span:nth-child(1) { right: 10%; top: 19%; transform: translateY(16px) rotate(2deg); }
.object-tags span:nth-child(2) { right: 22%; bottom: 17%; transform: translateY(20px) rotate(-2deg); }
.object-tags span:nth-child(3) { left: 58%; top: 46%; transform: translateY(14px); }
.is-visible .object-tags span { opacity: 1; transform: none; }

/* Modulo continuo: percorso perforato che si disegna. */
.paper-path { position: absolute; z-index: 5; right: 8%; top: 10%; bottom: 10%; width: 34px; border-inline: 1px solid rgba(255,255,255,.42); overflow: hidden; }
.paper-path::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, #fff 0 2px, transparent 2.5px) center top/20px 20px repeat-y; transform: translateY(-100%); transition: transform 1.3s var(--visual-ease); }
.is-visible .paper-path::before { transform: none; }
.paper-sequence { position: absolute; z-index: 5; right: 13%; bottom: 15%; display: grid; gap: 7px; }
.paper-sequence i { width: clamp(90px,14vw,180px); height: 10px; background: rgba(255,255,255,.85); transform: scaleX(.15); transform-origin: left; transition: transform .8s var(--visual-ease); }
.paper-sequence i:nth-child(2) { transition-delay: .12s; background: #cfe6ff; }
.paper-sequence i:nth-child(3) { transition-delay: .24s; background: #0090ff; }
.is-visible .paper-sequence i { transform: scaleX(1); }

/* Progettazione: tavole che si allineano su una griglia. */
.design-boards { position: absolute; z-index: 5; right: 7%; top: 12%; width: clamp(150px,23vw,300px); aspect-ratio: 1; }
.design-boards i { position: absolute; width: 72%; height: 78%; border: 1px solid rgba(255,255,255,.65); background: rgba(255,255,255,.08); backdrop-filter: blur(3px); transition: transform 1.05s var(--visual-ease); }
.design-boards i:nth-child(1) { left: 0; top: 12%; transform: rotate(-8deg) translate(-16px,12px); }
.design-boards i:nth-child(2) { right: 0; top: 0; border-color: #18c7ff; transform: rotate(7deg) translate(15px,-10px); }
.design-boards i:nth-child(3) { right: 8%; bottom: 0; border-color: #0090ff; transform: rotate(-2deg) translateY(16px); }
.is-visible .design-boards i { transform: none; }

/* Entrata e parallax accessibile. */
.js .visual-enter { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--visual-ease), transform .85s var(--visual-ease); }
.js .visual-enter.is-visible { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .visual-interlude__stage { min-height: 520px; }
  .visual-interlude__veil { background: linear-gradient(to top, rgba(6,18,43,.9), rgba(6,18,43,.05) 70%); }
  .visual-interlude__caption { right: 22px; }
  .registration-deck, .design-boards { width: 145px; right: 20px; top: 12%; }
  .label-track { width: 78%; top: 14%; }
  .object-tags span:nth-child(3) { display: none; }
}

@media (max-width: 860px) {
  body[data-service] .nav-links {
    left: 0; right: 0; transform: none; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
  body[data-service] .nav-links.is-open {
    opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-hero-media .svc-media,
  .visual-interlude__stage img,
  .registration-deck i,
  .visual-glint,
  .object-tags span,
  .paper-path::before,
  .paper-sequence i,
  .design-boards i,
  .visual-enter { transition: none !important; transform: none !important; opacity: 1 !important; }
  .visual-glint { display: none; }
}