/* ---------- Header "Esploso BIM" (18 ottobre 2026): il simbolo B1P si comporta come un modello BIM. Nasce come rilievo (contorno),
   diventa modello (pieno), reagisce allo scorrimento e all'apertura del menu si scompone in un esploso assonometrico a tre livelli.
   Markup inserito da build.py (ESPLOSO), comportamento in assets/esploso.js; senza script resta l'header della pagina.
   Stati sull'header: is-compact (oltre 80 px di scorrimento, di nuovo esteso sotto i 40), is-open (menu aperto).
   Sotto i 900 px il pulsante compatto è sempre visibile. Colori e caratteri: solo le variabili del sito. ---------- */
:root { --xb-ease: cubic-bezier(0.65, 0, 0.35, 1); }

/* the two lines watched by esploso.js: 80 px (compact) and 40 px (extended again) from the top of the page */
.xb-sentinella { position: absolute; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.xb-s80 { top: 80px; }
.xb-s40 { top: 40px; }

/* while esploso.js sets the first state (and on resize) nothing moves */
.xb-subito .xb-btn, .xb-subito .xb-btn *, .xb-subito .xb-sym, .xb-subito .xb-sym *, .xb-subito header.nav, .xb-subito header.nav *,
.xb-subito header.nav::before, .xb-subito .xb-menu, .xb-subito .xb-menu * { transition: none !important; }

/* ---------- the header: on computer it stays at the top while it gathers (as it was at the top of the page, same look) ---------- */
@media (min-width: 900px) {
  header.nav.xb-head { position: sticky; top: 0; z-index: 50; }
  header.hud.nav.xb-head { position: fixed; }   /* the home: over the hero, as before, without touching its pinning */
  header.nav.xb-head::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); transition: opacity 0.15s linear 0.5s; }
  header.hud.nav.xb-head::before { display: none; }
  header.nav.is-compact::before { opacity: 0; transition-delay: 0s; }
  header.nav.is-compact { pointer-events: none; }
  /* menu entries, language, Contattaci, menu button: their text fades while the lines (.xb-ln) gather; back at the end */
  header.nav.xb-head > :not(.logo) { transition: opacity 0.15s linear 0.5s, visibility 0s linear 0s; }
  header.nav.is-compact > :not(.logo) { opacity: 0; visibility: hidden; transition: opacity 0.15s linear 0s, visibility 0s linear 0.65s; }
  /* the logo: the B gives way to the symbol at once, the words close from right to left (320 ms); back: words first, then the B */
  header.nav.xb-head .logo { clip-path: inset(0 0 0 0); transition: clip-path 0s linear 0.65s, visibility 0s linear 0s; }
  header.nav.xb-head .logo img { clip-path: inset(0 0 0 0); transition: clip-path 0.32s var(--xb-ease) 0.33s; }
  header.nav.is-compact .logo { clip-path: inset(0 0 0 var(--xb-b, 16%)); visibility: hidden; transition: clip-path 0s linear 0s, visibility 0s linear 0.65s; }
  header.nav.is-compact .logo img { clip-path: inset(0 calc(100% - var(--xb-b, 16%)) 0 0); transition-delay: 0s; }
  /* the menu entries turn into thin lines that gather in the corner (esploso.js animates them) */
  .xb-linee { position: fixed; inset: 0; z-index: 61; pointer-events: none; }
  .xb-ln { position: absolute; height: 2px; margin-top: -1px; background: var(--fg); transform-origin: right center; opacity: 0; }
}
@media (max-width: 899px) {
  .xb-linee { display: none; }
  /* the round button is always there: the bar keeps its right end free for it (the menu button of the page gives way) */
  header.nav.xb-head { padding-right: calc(76px + env(safe-area-inset-right, 0px)); }
  header.nav.xb-head .burger { display: none; }
}

/* ---------- the round button: compact menu, ring of the page read, X when open ---------- */
.xb-btn { position: fixed; z-index: 62; top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px) + var(--xb-sb, 0px));
  width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; color: var(--fg); cursor: pointer;
  background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; transition: opacity 0.2s linear 0s, visibility 0s linear 0.2s; }
.xb-btn.xb-on { opacity: 1; visibility: visible; transition: opacity 0.25s linear 0.4s, visibility 0s linear 0s; }
.xb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.xb-anello { position: absolute; left: -5px; top: -5px; width: 66px; height: 66px; overflow: visible; rotate: -90deg; pointer-events: none; }
.xb-anello-av { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }   /* at 100 % a short pulse (esploso.js) */
.xb-x { position: absolute; left: 17px; top: 17px; width: 22px; height: 22px; fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.xb-x path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.25s var(--xb-ease); }
.xb-btn[aria-expanded="true"] .xb-x path { stroke-dashoffset: 0; transition-duration: 0.35s; transition-delay: 0.25s; }
.xb-btn[aria-expanded="true"] .xb-x path + path { transition-delay: 0.45s; }

/* ---------- the symbol, three layers in three copies: survey (outline), design (35 %), model (full). It is one element that flies
   between the logo, the button and the open menu (positions set by esploso.js); 120 px high at scale 1, as in the exploded view ---------- */
.xb-sym { position: fixed; z-index: 63; left: 0; top: 0; width: 120.89px; height: 120px; transform-origin: 0 0; pointer-events: none;
  transform: translate(var(--lx, -200px), var(--ly, 0px)) scale(var(--ls, 0.2333)); transition: transform 0.65s var(--xb-ease); }
.xb-sym.xb-bottone { transform: translate(var(--bx, 0px), var(--by, 0px)) scale(var(--bs, 0.2333)); }
.xb-sym.xb-centro { transform: translate(var(--cx, 0px), var(--cy, 0px)) scale(1); transition-duration: 0.7s; }
.xb-sym.xb-centro.xb-lato { transform: translate(var(--px, 0px), var(--py, 0px)) scale(1); transition-duration: 0.6s; }
.xb-sym.xb-chiude { transition-duration: 0.49s; }
.xb-sym.xb-nascosto { opacity: 0; }   /* reduced motion: no exploded view, the X takes the place of the symbol */
.xb-tilt, .xb-axo, .xb-spin { position: absolute; inset: 0; }
.xb-axo, .xb-spin { transform-style: preserve-3d; }
.xb-axo { transition: transform 0.7s var(--xb-ease); }
.xb-spin { transition: transform 0.7s var(--xb-ease); }
.xb-sym.xb-centro .xb-axo { transform: rotateX(55deg); }
.xb-sym.xb-centro .xb-spin { transform: rotateZ(-45deg); }
.xb-sym.xb-chiude .xb-axo, .xb-sym.xb-chiude .xb-spin, .xb-sym.xb-chiude .xb-l { transition-duration: 0.49s; }
.xb-l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: transform 0.7s var(--xb-ease), opacity 0.25s linear; }
.xb-l1 path { fill: none; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.4s var(--xb-ease) 0.25s; }
.xb-l2 path { fill: var(--accent); fill-opacity: 0.35; }
.xb-l3 path { fill: var(--accent); }
.xb-l2, .xb-l3 { opacity: 0; }
.xb-l2 { transition: transform 0.7s var(--xb-ease), opacity 0.25s linear 0.1s; }
/* from outline to full: first the survey is drawn, then the design and the model fade in (end at 800 ms) */
.xb-sym.xb-pieno .xb-l1 path { stroke-dashoffset: 0; transition-duration: 0.42s; transition-delay: 0s; }
.xb-sym.xb-pieno .xb-l2 { opacity: 1; transition: transform 0.7s var(--xb-ease), opacity 0.3s linear 0.3s; }
.xb-sym.xb-pieno .xb-l3 { opacity: 1; transition: transform 0.7s var(--xb-ease), opacity 0.3s linear 0.5s; }
/* exploded: the three layers part along the vertical, 0, 40 and 80 px */
.xb-sym.xb-centro .xb-l2 { transform: translateZ(40px); }
.xb-sym.xb-centro .xb-l3 { transform: translateZ(80px); }
/* the menu entry under the pointer lights its layer, the others at 40 % */
.xb-sym.xb-centro[data-hl] .xb-l { opacity: 0.4; transition: transform 0.7s var(--xb-ease), opacity 0.2s linear; }
.xb-sym.xb-centro[data-hl="1"] .xb-l1, .xb-sym.xb-centro[data-hl="2"] .xb-l2, .xb-sym.xb-centro[data-hl="3"] .xb-l3 { opacity: 1; }
/* hover on the button, with a mouse: a preview of the exploded view, the survey 2 px up and the model 2 px down */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .xb-btn.xb-on:hover ~ .xb-sym.xb-bottone:not(.xb-centro) .xb-l1 { transform: translateY(calc(-2px / var(--bsn, 0.2333))); transition-duration: 0.3s; }
  .xb-btn.xb-on:hover ~ .xb-sym.xb-bottone:not(.xb-centro) .xb-l3 { transform: translateY(calc(2px / var(--bsn, 0.2333))); transition-duration: 0.3s; }
}

/* ---------- the open menu: a full screen layer that opens as a circle from the button ---------- */
.xb-menu { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); color: var(--fg);
  clip-path: circle(0px at var(--ox, 100%) var(--oy, 0px)); transition: clip-path 0.7s var(--xb-ease); }
.xb-menu.xb-aperto { clip-path: circle(var(--or, 150vmax) at var(--ox, 100%) var(--oy, 0px)); }
.xb-menu.xb-chiude { transition-duration: 0.49s; }
.xb-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr) auto; gap: 20px clamp(24px, 4vw, 72px); min-height: 100%; box-sizing: border-box;
  padding: calc(80px + env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 64px) calc(16px + env(safe-area-inset-bottom, 0px)); }
.xb-posto { grid-column: 1; grid-row: 1; align-self: center; justify-self: center; width: 121px; height: 120px; }
.xb-voci { grid-column: 2; grid-row: 1; align-self: center; display: flex; flex-direction: column; align-items: flex-start; }
.xb-voci a { display: block; padding: 0.04em 0; font-family: var(--display); font-size: clamp(2rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--fg);
  opacity: 0; transform: translateY(24px); transition: opacity 0.35s linear, transform 0.5s var(--xb-ease), color 0.2s ease; transition-delay: calc(0.25s + var(--i, 0) * 60ms), calc(0.25s + var(--i, 0) * 60ms), 0s; }
.xb-menu.xb-aperto .xb-voci a { opacity: 1; transform: none; }
.xb-menu.xb-chiude .xb-voci a { transition-duration: 0.2s, 0.2s, 0.2s; transition-delay: 0s; }
.xb-voci a:hover, .xb-voci a:focus-visible { color: var(--accent); outline: none; }
.xb-piede { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; padding-top: 8px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--muted); opacity: 0; transition: opacity 0.3s linear 0.55s; }
.xb-menu.xb-aperto .xb-piede { opacity: 1; }
.xb-menu.xb-chiude .xb-piede { transition-delay: 0s; transition-duration: 0.15s; }
.xb-piede a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); }
.xb-piede a:hover, .xb-piede a:focus-visible { color: var(--accent); }
.xb-lingue { display: inline-flex; gap: 4px; margin-left: auto; }
.xb-lingue a { padding: 0 10px; color: var(--muted); }
.xb-lingue a[aria-current] { color: var(--accent); }
.xb-lingue a + a::before { content: '/'; margin: 0 14px 0 -10px; color: var(--line); }
@media (max-width: 899px) {
  .xb-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding-top: calc(84px + env(safe-area-inset-top, 0px)); gap: 24px; }
  .xb-posto { grid-column: 1; grid-row: 1; height: 150px; }
  .xb-voci { grid-column: 1; grid-row: 2; align-self: start; }
  .xb-piede { grid-row: 3; }
  .xb-lingue { margin-left: 0; }
}

/* ---------- reduced motion: no exploded view, no tilt, no magnet, no rotation; the ring stays, still; fades of 150 ms ---------- */
@media (prefers-reduced-motion: reduce) {
  header.nav.xb-head::before, header.nav.xb-head > :not(.logo), header.nav.xb-head .logo, header.nav.xb-head .logo img { transition: opacity 0.15s linear, visibility 0s linear 0s !important; }
  header.nav.is-compact::before, header.nav.is-compact > :not(.logo), header.nav.is-compact .logo, header.nav.is-compact .logo img { transition: opacity 0.15s linear, visibility 0s linear 0.15s !important; }
  header.nav.xb-head .logo, header.nav.xb-head .logo img { clip-path: none !important; }
  header.nav.is-compact .logo { opacity: 0; }
  .xb-linee { display: none; }
  .xb-btn { transition: opacity 0.15s linear, visibility 0s linear 0.15s; }
  .xb-btn.xb-on { transition: opacity 0.15s linear, visibility 0s linear 0s; }
  .xb-x path, .xb-btn[aria-expanded="true"] .xb-x path { transition: none; }
  .xb-sym, .xb-sym.xb-chiude { transition: opacity 0.15s linear; }
  .xb-sym .xb-l, .xb-sym .xb-l1 path, .xb-sym.xb-pieno .xb-l, .xb-sym.xb-pieno .xb-l1 path { transition: opacity 0.15s linear !important; }
  .xb-sym .xb-l1 path { stroke-dashoffset: 0; }   /* no drawing: the layers only fade */
  .xb-sym:not(.xb-pieno) .xb-l1 { opacity: 0; }
  .xb-menu, .xb-menu.xb-aperto, .xb-menu.xb-chiude { clip-path: none; opacity: 0; transition: opacity 0.15s linear; }
  .xb-menu.xb-aperto { opacity: 1; }
  .xb-voci a, .xb-menu.xb-aperto .xb-voci a, .xb-piede { transform: none; transition: opacity 0.15s linear, color 0.2s ease; transition-delay: 0s; }
}
@media print { .xb-btn, .xb-sym, .xb-menu, .xb-linee { display: none !important; } }