/* ==========================================================================
   INUMELE — media in movimento
   Ogni filmato stock è virato in duotono blu/bianco (ffmpeg): una cianografia
   in movimento. I render dei progetti reali restano a colori.
   ========================================================================== */
:root { --night: #00005a; --signal: #b3b3ff; }

.vid { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--night); }

/* pulsante pausa/riproduci condiviso */
.media-toggle { position: absolute; right: var(--gutter); top: var(--s-5); z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(0, 0, 90, .35); border: 1.5px solid rgba(255, 255, 255, .7); color: #fff; cursor: pointer; }
.media-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: square; }
.media-toggle .i-play { display: none; }
.media-toggle[aria-pressed="true"] .i-play { display: block; }
.media-toggle[aria-pressed="true"] .i-pause { display: none; }
.media-toggle:hover { background: #fff; color: var(--cut); }

/* ---------- HOME: il film dall'idea alla linea ---------- */
.reel { position: relative; min-height: calc(100svh - var(--header-h)); display: grid; align-items: end; color: #fff; background: var(--night); overflow: hidden; isolation: isolate; }
.reel__video { position: absolute; inset: 0; z-index: -2; }
.reel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 90, .8) 0%, rgba(0, 0, 90, .4) 50%, rgba(0, 0, 90, 0) 85%), linear-gradient(0deg, rgba(0, 0, 90, .75) 0%, rgba(0, 0, 90, 0) 40%); }
.reel__copy { padding-block: clamp(72px, 10vh, 120px) clamp(24px, 3.5vh, 40px); }
.reel h1 { color: #fff; font-size: clamp(3rem, min(6.4vw, 10.5vh), 6.75rem); max-width: 13ch; margin-bottom: var(--s-5); }
.reel h1 em { color: var(--signal); }
.reel .lead { color: rgba(255, 255, 255, .88); margin-bottom: var(--s-6); }
.reel__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.btn--white { background: #fff; border-color: #fff; color: var(--cut); }
.btn--white::after { border-color: rgba(0, 0, 254, .35); }
.btn--white:hover { background: var(--signal); border-color: var(--signal); color: var(--night); }
.btn--white:hover::after { border-color: rgba(0, 0, 90, .4); }
.reel .btn--line-light::after { border-color: rgba(255, 255, 255, .3); }

/* le cinque fasi avanzano insieme al filmato */
.reel__phases { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); margin-top: clamp(32px, 5vh, 64px); }
.reel__phases li { font-weight: 750; font-stretch: 85%; font-size: 1rem; color: rgba(255, 255, 255, .5); transition: color .4s; }
.reel__phases li::before { content: ""; display: block; height: 2px; margin-bottom: 12px; background: linear-gradient(90deg, #fff var(--p, 0%), rgba(255, 255, 255, .22) var(--p, 0%)); }
.reel__phases li.is-on, .reel__phases li.is-done { color: #fff; }
.reel__phases li span { display: block; font-weight: 400; font-stretch: 100%; font-size: .875rem; opacity: .78; margin-top: 2px; }
@media (max-width: 760px) {
  .reel::before { background: linear-gradient(0deg, rgba(0, 0, 90, .94) 0%, rgba(0, 0, 90, .6) 55%, rgba(0, 0, 90, .25) 100%); }
  .reel h1 { font-size: clamp(2.75rem, 13vw, 4.5rem); }
  .reel__phases { gap: 6px; }
  .reel__phases li { font-size: .75rem; }
  .reel__phases li span { display: none; }
}

/* ---------- Esploratore dei servizi: elenco + scena che cambia ---------- */
.explorer { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.explorer__list { list-style: none; border-top: var(--line) solid var(--cut); }
.explorer__list li { border-bottom: 1.5px dashed rgba(0, 0, 254, .5); }
.explorer__item { position: relative; width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 4px var(--s-4); align-items: center; padding: 18px 14px 18px 4px; background: none; border: 0; text-align: left; cursor: pointer; color: var(--ink); transition: background-color .35s var(--ease-out), color .25s, padding .35s var(--ease-out); }
.explorer__item strong { font-weight: 800; font-stretch: 72%; text-transform: uppercase; font-size: clamp(1.375rem, 2.1vw, 1.875rem); line-height: 1; }
.explorer__item > span { grid-column: 1; color: var(--ink-2); font-size: .9875rem; line-height: 1.4; }
.explorer__item > svg { grid-row: 1 / span 2; grid-column: 2; width: 22px; height: 22px; color: var(--cut); transition: transform .35s var(--ease-out); }
.explorer__item::before { content: ""; position: absolute; left: 0; top: -2px; bottom: -1px; width: 4px; background: var(--cut); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease-out); }
.explorer__item:hover { color: var(--cut); }
.explorer__item.is-active { padding-left: 22px; color: var(--cut); background: var(--sheet); }
.explorer__item.is-active::before { transform: none; }
.explorer__item.is-active > svg { transform: translateX(4px); }
.explorer__timer { grid-column: 1 / -1; height: 2px; margin-top: 10px; background: rgba(0, 0, 254, .12); overflow: hidden; display: none; }
.explorer__timer i { display: block; height: 100%; background: var(--cut); transform-origin: left; transform: scaleX(0); }
.explorer.is-auto .explorer__item.is-active .explorer__timer { display: block; }
.explorer__stage { position: sticky; top: calc(var(--header-h) + 24px); aspect-ratio: 10 / 11; max-height: calc(100svh - var(--header-h) - 48px); width: 100%; background: var(--night); overflow: hidden; }
.explorer__media { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(1.06); transition: opacity .7s var(--ease-out), transform 1.4s var(--ease-out), visibility 0s .7s; }
.explorer__media.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .7s var(--ease-out), transform 1.4s var(--ease-out); }
.explorer__media > img { width: 100%; height: 100%; object-fit: cover; }
.kb { animation: kenburns 16s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12) translate(-2%, -2%); } }
.explorer__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(20px, 2.6vw, 36px); padding-top: 72px; color: #fff; background: linear-gradient(0deg, rgba(0, 0, 90, .88), rgba(0, 0, 90, 0)); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); }
.explorer__caption p { margin: 0; max-width: 38ch; font-size: 1rem; color: rgba(255, 255, 255, .92); }
.explorer__caption .link-arrow { color: #fff; flex: none; }
.explorer__caption .link-arrow:hover { color: var(--signal); }
@media (max-width: 960px) {
  .explorer { grid-template-columns: 1fr; }
  .explorer__stage { position: relative; top: 0; order: -1; aspect-ratio: 16 / 12; max-height: none; }
  .explorer__caption p { display: none; }
}

/* simulazione CFD disegnata: linee di flusso che scorrono */
.flowsim { position: absolute; inset: 0; display: grid; place-items: center; background: var(--night); color: var(--signal); }
.flowsim svg { width: 92%; height: auto; fill: none; stroke: currentColor; stroke-linecap: round; }
.flowsim .body { stroke: #fff; stroke-width: 2.2; fill: rgba(255, 255, 255, .06); }
.flowsim .stream { stroke-width: 1.4; stroke-dasharray: 14 10; animation: flow 2.4s linear infinite; opacity: .85; }
.flowsim .stream:nth-child(2n) { animation-duration: 1.8s; opacity: .55; }
.flowsim .stream:nth-child(3n) { animation-duration: 3s; }
.flowsim .mesh { stroke: rgba(255, 255, 255, .22); stroke-width: .8; }
@keyframes flow { to { stroke-dashoffset: -48; } }

/* ---------- Mosaico: video e foto con leggera parallasse ---------- */
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 230px); gap: clamp(10px, 1.2vw, 16px); margin-top: clamp(48px, 6vw, 88px); }
.mosaic__cell { position: relative; overflow: hidden; background: var(--night); margin: 0; }
.mosaic__cell > img, .mosaic__cell > video { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.mosaic__cell figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; background: #fff; color: var(--cut); font-weight: 700; font-stretch: 88%; font-size: .875rem; line-height: 1.3; }
.mosaic__cell--a { grid-column: span 7; grid-row: span 2; }
.mosaic__cell--b, .mosaic__cell--c { grid-column: span 5; }
@media (max-width: 760px) {
  .mosaic { grid-auto-rows: 150px; }
  .mosaic__cell--a { grid-column: 1 / -1; grid-row: span 2; }
  .mosaic__cell--b, .mosaic__cell--c { grid-column: span 6; }
}

/* ---------- Carosello progetti (render reali, a colori) ---------- */
.showreel__bar { display: flex; justify-content: space-between; align-items: end; gap: var(--s-5); margin-bottom: clamp(28px, 3.5vw, 48px); }
.showreel__bar h2 { margin: 0 0 var(--s-4); }
.showreel__bar p { margin: 0; color: var(--ink-2); max-width: 56ch; }
.showreel__nav { display: flex; gap: 8px; flex: none; }
.showreel__nav button { width: 52px; height: 52px; display: grid; place-items: center; border: var(--line) solid var(--cut); background: #fff; color: var(--cut); cursor: pointer; transition: background-color .2s, color .2s; }
.showreel__nav svg { width: 20px; height: 20px; }
.showreel__nav button:first-child svg { transform: rotate(180deg); }
.showreel__nav button:hover:not(:disabled) { background: var(--cut); color: #fff; }
.showreel__nav button:disabled { opacity: .35; cursor: default; }
.showreel__track { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 36vw, 540px); gap: clamp(14px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); padding-bottom: var(--s-4); scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
.showreel__track::-webkit-scrollbar { display: none; }
.showreel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.showreel__track.is-dragging a, .showreel__track.is-dragging img { pointer-events: none; }
.showreel__track li { scroll-snap-align: start; }
.showreel__card { margin: 0; }
.showreel__card .frame { position: relative; aspect-ratio: 4 / 3; background: #fff; border: var(--line) solid var(--cut); overflow: hidden; }
.showreel__card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); -webkit-user-drag: none; user-select: none; }
.showreel__card:hover img { transform: scale(1.05); }
.showreel__card figcaption { padding-top: var(--s-3); display: grid; gap: 2px; }
.showreel__card figcaption strong { font-weight: 800; font-stretch: 72%; text-transform: uppercase; font-size: 1.375rem; line-height: 1; }
.showreel__card figcaption span { color: var(--ink-2); font-size: .9375rem; }
.showreel__progress { height: 2px; background: rgba(0, 0, 254, .14); margin-top: var(--s-4); }
.showreel__progress i { display: block; height: 100%; background: var(--cut); transform-origin: left; transform: scaleX(.2); }
@media (max-width: 640px) { .showreel__nav { display: none; } }

/* ---------- Fascia film a tutta larghezza ---------- */
.film { position: relative; min-height: clamp(460px, 80vh, 780px); display: grid; align-items: center; overflow: hidden; color: #fff; background: var(--night); isolation: isolate; }
.film__media { position: absolute; left: 0; right: 0; top: -10%; height: 120%; z-index: -2; }
.film::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 90, .7), rgba(0, 0, 90, .1)); }
.film .film__quote { font-weight: 850; font-stretch: 66%; text-transform: uppercase; line-height: .88; font-size: clamp(3.25rem, 9.6vw, 9.5rem); margin: 0; max-width: 9ch; color: #fff; }
.film__quote span { display: block; color: var(--signal); }
.film p:not(.film__quote) { max-width: 46ch; color: rgba(255, 255, 255, .9); font-size: 1.1875rem; margin: var(--s-5) 0 0; }

/* ---------- Metodo: dallo schizzo alla linea (animazione SVG legata allo scroll) ---------- */
.assembly { position: relative; background: #fff; }
.assembly__sticky { padding-block: clamp(72px, 10vw, 136px); }
.assembly__inner { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(16px, 2.4vh, 32px); }
.assembly__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-4) var(--s-8); align-items: end; }
.assembly__head h2 { margin: 0; }
.assembly__head p { margin: 0; color: var(--ink-2); font-size: 1.125rem; max-width: 52ch; }
.assembly__stage { position: relative; min-height: 0; display: grid; place-items: center; border: var(--line) solid var(--cut); background: #fff; background-image: linear-gradient(rgba(0, 0, 254, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 254, .06) 1px, transparent 1px); background-size: 24px 24px; }
.assembly__svg { width: 100%; height: 100%; max-height: 100%; aspect-ratio: 1200 / 560; color: var(--cut); font-family: var(--font); }
.assembly__steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.assembly__steps li { position: relative; padding-top: 14px; color: var(--ink-2); transition: color .3s; }
.assembly__steps li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--cut) var(--p, 0%), rgba(0, 0, 254, .14) var(--p, 0%)); }
.assembly__n { display: block; font-weight: 850; font-stretch: 66%; font-size: 2.25rem; line-height: .9; color: rgba(0, 0, 254, .35); transition: color .3s; }
.assembly__steps h3 { margin: 6px 0 4px; color: var(--ink); }
.assembly__steps p { margin: 0; font-size: .9375rem; line-height: 1.45; }
.assembly__steps li.is-on .assembly__n, .assembly__steps li.is-done .assembly__n { color: var(--cut); }
.assembly__steps li.is-on h3 { color: var(--cut); }
/* modalità animata: la scena resta ferma mentre si scorre */
.assembly.is-live { height: 360vh; }
.assembly.is-live .assembly__sticky { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); padding-block: clamp(20px, 3.5vh, 40px); }
.assembly.is-live .assembly__inner { height: 100%; }
@media (max-width: 860px) {
  .assembly__head { grid-template-columns: 1fr; }
  .assembly__head p { font-size: 1rem; }
  .assembly__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .assembly__svg { aspect-ratio: auto; height: 100%; }
  .assembly__steps li { padding-top: 10px; display: flex; align-items: baseline; gap: 8px; }
  .assembly__steps p { display: none; }
  .assembly__steps h3 { font-size: 1rem; margin: 0; }
  .assembly__n { font-size: 1.5rem; }
  .assembly.is-live .assembly__head p { display: none; }
}

/* ---------- Chiusura con video ---------- */
.closing--film { background: var(--night); isolation: isolate; }
.closing--film .closing__media { position: absolute; inset: 0; z-index: -2; }
.closing--film::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 254, .78); }

/* ---------- Pagine interne: banda video sotto l'intestazione ---------- */
.page-film { position: relative; height: clamp(240px, 36vw, 500px); overflow: hidden; background: var(--night); }
.page-film > video, .page-film > img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; }
.page-film__tag { position: absolute; left: var(--gutter); bottom: var(--s-5); z-index: 2; padding: 8px 14px; background: #fff; color: var(--cut); font-weight: 700; font-stretch: 85%; font-size: .9375rem; }

/* servizi: il riquadro di ogni servizio diventa una scena */
.svc-row__face--film { padding: 0; overflow: hidden; background: var(--night); }
.svc-row__face--film > video, .svc-row__face--film > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-row__face--film > svg.badge { position: absolute; right: 10px; bottom: 10px; width: 58px; height: 58px; padding: 8px; background: #fff; color: var(--cut); stroke-width: 2.4; z-index: 2; }
.svc-row__face--film .flowsim svg { width: 96%; }

/* foto con didascalia */
.photo-sheet img.cover { aspect-ratio: 4 / 3; }

@media (prefers-reduced-motion: reduce) {
  .kb, .flowsim .stream { animation: none; }
  .explorer__media { transition: none; transform: none; }
}