/* Sito DRIP Studio · scene condivise: menu, lingua, passaggio a 13°, stato d'attesa, scene 3D dello scroll.
   Solo ruoli e token di drip-system.css. Il moto è quello di motion.js: --ease-io per le superfici, --ease-out per il testo. */

/* ——— testata: Menu sempre presente; la lingua vive nel menu (direttiva Deck 20) ——— */
.zhd-menu { display: inline-flex; align-items: center; gap: var(--s2); }
.zhd-menu-i { position: relative; width: 16px; height: 8px; }
.zhd-menu-i i { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform var(--t-2) var(--ease-io), top var(--t-2) var(--ease-io); }
.zhd-menu-i i:first-child { top: 0; }
.zhd-menu-i i:last-child { top: calc(100% - 1.5px); }
html.z-menu-on .zhd-menu-i i:first-child { top: calc(50% - .75px); transform: rotate(45deg); }
html.z-menu-on .zhd-menu-i i:last-child { top: calc(50% - .75px); transform: rotate(-45deg); }
/* logo: aperto in cima (segno e «DRIP Studio»), raccolto scendendo (solo il segno, che fa uno scatto a 13° e torna),
   di nuovo aperto risalendo, al puntatore o al fuoco. Tutto dentro la testata: la sua altezza non cambia mai.
   Raccogliendo, «Studio» si ritira per primo verso il segno e si spegne mentre scorre, poi «DRIP»: le due parole non si
   sovrappongono mai. Riaprendo escono nell'ordine di lettura, «DRIP» e poi «Studio». La finestra (max-width) si chiude
   e si apre con la stessa curva, così il resto della testata non salta */
.zhd-word { display: inline-flex; gap: .28em; max-width: 7.5em; overflow: clip; white-space: nowrap; transition: max-width var(--motion-l2) var(--ease-sport); }
.zhd-word b, .zhd-word i { display: inline-block; transition: transform var(--motion-l2) var(--ease-sport), opacity var(--motion-l1) var(--ease-out); }
.zhd-word i { transition-delay: calc(var(--stagger) * 2); }
html.z-fold .zhd-word { max-width: 0; transition: max-width var(--motion-l2) var(--ease-io) calc(var(--stagger) * 2); }
html.z-fold .zhd-word b { transform: translate3d(-1.2em, 0, 0); opacity: 0; transition-delay: calc(var(--stagger) * 2); }
html.z-fold .zhd-word i { transform: translate3d(-2.4em, 0, 0); opacity: 0; transition-delay: 0s; transition-duration: var(--motion-l1), var(--motion-l0); }
.zhd-mark { transform-origin: 50% 70%; }
html.z-fold .zhd-mark { animation: zhd-tuck var(--motion-l2) var(--ease-sport); }
@keyframes zhd-tuck { 0% { transform: none; } 38% { transform: rotate(-13deg) translate3d(2px, 0, 0); } 100% { transform: none; } }
/* aperta di nuovo sopra la testata raccolta: puntatore (solo dove c'è), fuoco da tastiera, menu o mazzo aperti */
@media (hover: hover) and (pointer: fine) {
  html.z-fold .zhd-logo:hover .zhd-word { max-width: 7.5em; transition-delay: 0s; }
  html.z-fold .zhd-logo:hover .zhd-word :is(b, i) { transform: none; opacity: 1; }
  html.z-fold .zhd-logo:hover .zhd-word i { transition-delay: calc(var(--stagger) * 2); }
}
html.z-fold .zhd-logo:focus-visible .zhd-word, html.z-menu-on .zhd-word, html.z-deck-on .zhd-word { max-width: 7.5em; transition-delay: 0s; }
/* il nome di un sito che non è DRIP Studio (settings.brand): niente segno da ritirare, il nome resta intero */
.zhd-word.is-own, html.z-fold .zhd-word.is-own { max-width: 22em; }
html.z-fold .zhd-word.is-own b { transform: none; opacity: 1; }
html.z-fold .zhd-logo:focus-visible .zhd-word :is(b, i), html.z-fold.z-menu-on .zhd-word :is(b, i), html.z-fold.z-deck-on .zhd-word :is(b, i) { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.z-fold .zhd-mark { animation: none; } .zhd-word, .zhd-word :is(b, i) { transition-duration: var(--motion-l0); transition-delay: 0s; } }

/* lingua: i nomi nativi in fila, la scelta è una pillola piena nel colore del testo */
.zmenu-lang-b { height: 34px; padding: 0 var(--s3); border: 0; border-radius: var(--r-pill); background: none; color: inherit; font: 500 var(--fs-xs)/1 var(--font-sans); opacity: .62; cursor: pointer; transition: opacity var(--t-1) var(--ease-out), background-color var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out); }
.zmenu-lang-b:hover { opacity: 1; }
.zmenu-lang-b[aria-pressed='true'] { opacity: 1; font-weight: 700; background: var(--mon); color: var(--mbg); }

/* ——— menu: un campo che cresce dalla testata con il bordo a 13°, prende il colore del capitolo indicato e si ritira
   verso l'alto. Il colore cambia con un piano nuovo che sale a 13° sopra il vecchio (chrome.js), mai di colpo ——— */
.zmenu { position: fixed; inset: 0; z-index: 39; overflow-y: auto; overscroll-behavior: contain; display: block; padding: 0; gap: 0;
  background: var(--mbg, var(--brand-cobalt)); color: var(--mon, var(--brand-off-white)); transition: clip-path var(--t-3) var(--ease-io), color var(--t-2) var(--ease-out);
  clip-path: polygon(0 0, 100% 0, 100% var(--shell-h), 0 var(--shell-h)); }
.zmenu-bgs { position: fixed; inset: 0; pointer-events: none; }
.zmenu-bgs i { position: absolute; inset: 0; clip-path: polygon(0 calc(100% + 23vw), 100% 100%, 100% 200%, 0 200%); transition: clip-path var(--t-2) var(--ease-io); }
.zmenu-bgs i.is-on { clip-path: polygon(0 0, 100% -23vw, 100% 200%, 0 200%); }
.zmenu-bgs i.is-back { transform: scale(.96); transition: clip-path var(--t-2) var(--ease-io), transform var(--motion-l1) var(--ease-out); }
.zmenu-bgs i.is-back::after { content: ''; position: absolute; inset: 0; background: var(--brand-off-black); opacity: .14; }
html.z-menu-on .zhd { background: transparent !important; box-shadow: none !important; color: var(--mon) !important; transition: color var(--t-2) var(--ease-out); }
/* con il menu o il mazzo aperti la testata non ripete i capitoli: restano il marchio, i servizi, l'account e la chiusura */
.zhd-nav, .zhd-cta { transition: opacity var(--t-1) var(--ease-out), visibility 0s linear 0s; }
html.z-menu-on .zhd-nav, html.z-menu-on .zhd-cta, html.z-deck-on .zhd-nav, html.z-deck-on .zhd-cta { opacity: 0; visibility: hidden; transition: opacity var(--t-1) var(--ease-out), visibility 0s linear var(--t-1); }
.zmenu[hidden] { display: none; }
.zmenu.is-open { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% + 23vw)); }
.zmenu.is-out { clip-path: polygon(0 0, 100% 0, 100% -23vw, 0 0); }
.zmenu-in { position: relative; min-height: 100%; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) minmax(0, 3fr); grid-template-rows: 1fr auto;
  gap: var(--s6) var(--s6); padding: calc(var(--shell-h) + var(--s6)) var(--zp) var(--s5); transition: opacity var(--t-1) var(--ease-out); }
/* scelto un capitolo i testi lasciano il campo; l'anteprima resta e sale con lui (la sua immagine è l'ultima a uscire) */
.zmenu.is-passing .zmenu-in > :not(.zmenu-pre) { opacity: 0; transition: opacity var(--t-1) var(--ease-out); }
.zmenu-pre.is-handed .zmenu-deck { visibility: hidden; }
.zmenu-main ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); align-content: start; }
.zmenu-main a { display: flex; align-items: flex-start; gap: var(--s3); text-decoration: none; }
.zmenu-n { min-width: 2ch; padding-top: .9em; font: 500 var(--fs-2xs)/1 var(--font-sans); letter-spacing: .04em; opacity: 0; transition: opacity var(--t-2) var(--ease-out); }
.zmenu-w { display: block; overflow: clip; padding: .06em 0 .1em; }
.zmenu-w b { display: inline-block; font: 700 var(--fs-h2)/.92 var(--font-sans); letter-spacing: -.04em; transform: translate3d(0, 112%, 0); transition: transform var(--t-3) var(--ease-out), opacity var(--t-1) var(--ease-out); }
/* le voci salgono quando il piano del menu le ha già coperte (con lo stesso colore della pagina il piano non si vede: prima sembrava testo sopra la Home) */
.zmenu.is-open .zmenu-w b { transform: none; transition-delay: calc(var(--motion-l1) + var(--i) * var(--stagger) * 1.5); }
.zmenu.is-open .zmenu-n { opacity: .6; transition-delay: calc(var(--t-2) + var(--i) * var(--stagger)); }
.zmenu-main a.is-on .zmenu-w b { transform: translate3d(var(--s2), 0, 0); transition-delay: 0s; }
.zmenu-main a[aria-current] .zmenu-w b { font-family: var(--font-voice); font-style: italic; letter-spacing: -.02em; }
@media (hover: hover) and (pointer: fine) { .zmenu-main ol:hover a:not(.is-on) .zmenu-w b { opacity: .42; } }

/* anteprima del capitolo: un piano 5:8 nello spazio, la foto nuova sale dal basso dentro il suo ritaglio */
.zmenu-pre { margin: 0; align-self: center; justify-self: center; width: min(100%, 22vw); perspective: 1100px; opacity: 0; transform: translate3d(0, var(--s6), 0); transition: opacity var(--t-3) var(--ease-out), transform var(--t-4) var(--ease-out); }
.zmenu.is-open .zmenu-pre { opacity: 1; transform: none; transition-delay: var(--t-2); }
.zmenu-card { position: relative; aspect-ratio: 5 / 8; transform: rotateY(calc(-13deg + var(--tilt, 0) * 1.5deg)) rotateX(4deg); transform-style: preserve-3d; transition: transform var(--motion-l1) var(--ease-out); }
/* ogni anteprima è un piano: il nuovo sale dal basso dentro il suo ritaglio sopra il vecchio */
.zmenu-layer { position: absolute; inset: 0; border-radius: var(--r-m); overflow: hidden; background: var(--brand-off-black); box-shadow: var(--shadow-3); clip-path: inset(0 round var(--r-m)); transition: clip-path var(--t-3) var(--ease-io); }
.zmenu-layer.is-new { clip-path: inset(100% 0 0 round var(--r-m)); }
.zmenu-layer > img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--t-4) var(--ease-out); }
.zmenu-layer.is-new > img { scale: 1.12; }
/* Work: il mazzo vero, tre lavori a ventaglio nel piano */
.zmenu-deck { background: none; box-shadow: none; overflow: visible; clip-path: none; transition: opacity var(--t-2) var(--ease-out), transform var(--t-3) var(--ease-out); }
.zmenu-deck.is-new { opacity: 0; transform: translate3d(0, var(--s5), 0); clip-path: none; }
.zmenu-deck i { position: absolute; left: 9%; top: 6%; width: 82%; aspect-ratio: 5 / 8; border-radius: var(--r-m); overflow: hidden; box-shadow: var(--shadow-3);
  transform: translate3d(calc((var(--j) - 2) * 21px), calc((2 - var(--j)) * -8px), 0) rotate(calc((var(--j) - 2) * 6deg + 3deg)); transition: transform var(--t-3) var(--ease-out); }
.zmenu-deck i img { width: 100%; height: 100%; object-fit: cover; }
.zmenu-in:has(.zmenu-main a[href='/work'].is-on) .zmenu-deck i { transform: translate3d(calc((var(--j) - 2) * 34px), calc((2 - var(--j)) * -13px), 0) rotate(calc((var(--j) - 2) * 9deg + 3deg)); }
/* Brand: tipografia, colore e marchio */
.zmenu-spec { display: grid; grid-template-rows: 1fr auto auto; padding: var(--s5); background: var(--brand-off-white); color: var(--brand-off-black); }
.zmenu-spec b { align-self: center; font: 700 clamp(89px, 9vw, 144px)/.8 var(--font-sans); letter-spacing: -.05em; }
.zmenu-spec span { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s1); }
.zmenu-spec span i { aspect-ratio: 5 / 8; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-off-black) 12%, transparent); }
.zmenu-spec em { margin-top: var(--s4); }
.zmenu-spec-m { width: 55px; height: auto; display: block; }
/* Ambiente: la pianta vera di Frattamaggiore */
.zmenu-map { background: var(--brand-off-white); }
.zmenu-map canvas { width: 100%; height: 100%; display: block; }
.zmenu-name { display: flex; align-items: flex-end; padding: var(--s5); background: var(--brand-off-white); color: var(--brand-off-black); }
.zmenu-name b { font: 700 var(--fs-h3)/.95 var(--font-sans); letter-spacing: -.035em; }
.zmenu-pre figcaption { margin-top: var(--s3); font: 500 var(--fs-2xs)/1 var(--font-sans); letter-spacing: .04em; opacity: .7; }
.zmenu-pre figcaption b { font-weight: 700; }

.zmenu-side, .zmenu-base { opacity: 0; transform: translate3d(0, var(--s4), 0); transition: opacity var(--t-2) var(--ease-out), transform var(--t-3) var(--ease-out); }
.zmenu.is-open .zmenu-side, .zmenu.is-open .zmenu-base { opacity: 1; transform: none; transition-delay: calc(var(--t-1) + var(--i) * var(--stagger) * 1.5); }
.zmenu-side { align-self: start; }
.zmenu-k { margin: 0 0 var(--s3); font: 500 var(--fs-2xs)/1 var(--font-sans); letter-spacing: .04em; opacity: .6; }
.zmenu-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.zmenu-side a { font: 500 var(--fs-s)/1.3 var(--font-sans); text-decoration: none; }
.zmenu-side a:hover, .zmenu-legal a:hover, .zmenu-legal button:hover { text-decoration: underline; text-underline-offset: .3em; }
/* prodotti nel menu: icona, nome, «Gratis»; indicati, il campo prende il colore pieno del prodotto */
.zmenu-side .zmenu-prods { grid-template-columns: repeat(2, minmax(0, max-content)); gap: var(--s2) var(--s5); margin-bottom: var(--s5); }
.zmenu-prods a { display: inline-flex; align-items: center; gap: var(--s2); }
.zmenu-prods a .ds-appicon { flex: none; transition: transform var(--t-2) var(--ease-out); }
.zmenu-prods a.is-on .ds-appicon { transform: translate3d(0, -2px, 0) rotate(-6deg); }
.zmenu-prods small { padding: 2px 7px; border-radius: var(--r-pill); background: color-mix(in srgb, currentColor 14%, transparent); font: 600 var(--fs-2xs)/1.3 var(--font-sans); }
.zmenu-prods a:hover { text-decoration: none; }
.zmenu-prods a:hover span { text-decoration: underline; text-underline-offset: .3em; }
/* anteprima di un prodotto: Work sfoglia tre superfici come un mazzo, Notes resta una pagina ferma */
.zmenu-prod { background: var(--pc); }
.zmenu-prod > img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.zmenu-prod.is-work > i { position: absolute; inset: 9% 7% 9% 7%; overflow: hidden; border-radius: var(--r-s); box-shadow: var(--shadow-3); transform: translate3d(calc(var(--j) * 5%), calc(var(--j) * -4%), 0) rotate(calc(var(--j) * 3deg)); transition: transform var(--t-3) var(--ease-sport, var(--ease-out)); }
.zmenu-prod.is-work.is-new > i { transform: translate3d(0, 14%, 0) rotate(0deg); }
.zmenu-prod.is-work > i img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.zmenu-prod.is-work > i:nth-child(1) img { object-position: 60% 30%; }
.zmenu-prod.is-work > i:nth-child(2) img { object-position: 100% 40%; }
.zmenu-prod.is-notes { transition-duration: var(--t-4); }
.zmenu-prod.is-notes > img { transition: scale var(--t-4) var(--ease-out), opacity var(--t-4) var(--ease-out); }
.zmenu-prod.is-notes.is-new > img { scale: 1.02; opacity: 0; }
.zmenu-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); padding-top: var(--s4); border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.zmenu-lang { display: flex; gap: var(--s1); }
.zmenu .zmenu-cta { margin-left: auto; background: var(--mon); color: var(--mbg) !important; transition: background-color var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out); }
.zmenu-lang .zmenu-k { margin: 0 var(--s2) 0 0; }
.zmenu-lang { align-items: center; flex-wrap: wrap; }
.zmenu-legal { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font: 500 var(--fs-xs)/1.4 var(--font-sans); }
.zmenu-legal a, .zmenu-legal button { color: inherit; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* telefono e tablet: una colonna da toccare, niente anteprima; lingua, Account e servizi sotto, la chiamata a tutta larghezza */
@media (max-width: 1024px) {
  .zmenu-in { grid-template-columns: 1fr; grid-template-rows: auto; align-content: start; gap: var(--s5); padding-top: calc(var(--shell-h) + var(--s4)); }
  .zmenu-pre { display: none; }
  .zmenu-main a { min-height: 56px; align-items: center; }
  .zmenu-w b { font-size: clamp(34px, 10vw, 56px); }
  .zmenu-n { padding-top: 0; }
  .zmenu-side ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zmenu-side a { display: flex; align-items: center; min-height: 44px; }
  .zmenu-base { flex-direction: column; align-items: stretch; }
  .zmenu-lang-b { height: 44px; }
  .zmenu .zmenu-cta { margin-left: 0; justify-content: center; }
}

/* ——— passaggio tra capitoli: il campo a 13° (passage.js) ——— */
.zwipe { position: fixed; inset: 0; z-index: 35; pointer-events: none; clip-path: polygon(0 200vh, 100% 200vh, 100% 200vh, 0 200vh); will-change: clip-path; }
.zwipe-t { position: absolute; left: var(--zp); top: 22vh; right: var(--zp); overflow: clip; font: 700 var(--fs-h1)/.9 var(--font-sans); letter-spacing: -.04em; }
.zwipe-t span { display: inline-block; animation: zwipe-up var(--t-3) var(--ease-out) var(--t-1) both; }
.zwipe.is-out .zwipe-t { opacity: 0; transform: translate3d(0, -.18em, 0); transition: opacity var(--t-2) var(--ease-out) var(--t-1), transform var(--t-3) var(--ease-io); }
@keyframes zwipe-up { from { transform: translate3d(0, 105%, 0); } }
/* attesa oltre i 200 ms: tre piani 5:8 si compongono accanto al nome (mai una rotella) */
.zwipe-load { position: absolute; left: var(--zp); bottom: var(--s6); display: flex; gap: var(--s1); align-items: flex-end; opacity: 0; transition: opacity var(--t-2) var(--ease-out); }
.zwipe-load i { width: 13px; height: 21px; border-radius: var(--r-xs); background: currentColor; animation: zwipe-plane 1.6s var(--ease-io) infinite both; }
.zwipe-load i:nth-child(2) { animation-delay: calc(var(--stagger) * 6); }
.zwipe-load i:nth-child(3) { animation-delay: calc(var(--stagger) * 12); }
html.z-wait .zwipe-load { opacity: 1; }
@keyframes zwipe-plane { 0%, 100% { transform: translate3d(0, 0, 0) scaleY(.38); opacity: .4; } 40% { transform: translate3d(0, -8px, 0) scaleY(1); opacity: 1; } }

/* l'immagine in lettura nel passaggio: parte dal suo posto nella pagina e si posa in un piano 5:8 (passage.js) */
.zwipe-still { --zs-r: var(--radius-media); position: absolute; margin: 0; overflow: hidden; transform-origin: 50% 50%; will-change: transform, clip-path; }
.zwipe-still > img, .zwipe-still > canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.zwipe.has-still .zwipe-t { right: calc(var(--zp) + min(62vh, 620px) / 1.6 + max(32px, 6vw)); }
.zwipe.is-out .zwipe-still { translate: 0 -8vh; transition: translate var(--t-4) var(--ease-io); }
@media (max-width: 719px) { .zwipe.has-still .zwipe-t { right: var(--zp); } }

/* coreografie dei passaggi (passage.js · COVER): stessi piani a 13°, protagonisti diversi */
.zwipe-band { position: absolute; left: 0; right: 0; bottom: 0; height: 42vh; clip-path: polygon(0 calc(13vw * .23), 100% 0, 100% 100%, 0 100%); transform: translate3d(-110%, 0, 0); }
.zwipe.is-human .zwipe-band { top: 0; height: auto; clip-path: none; transform: none; opacity: 0; }
.zwipe-photo { position: absolute; inset: 0; margin: 0; opacity: 0; }
.zwipe-photo img { width: 100%; height: 100%; object-fit: cover; }
.zwipe.is-human .zwipe-t { top: auto; bottom: 9vh; z-index: 2; }
.zwipe.is-human .zwipe-t span { animation: none; }
.zwipe-map { position: absolute; inset: -10%; width: 120%; height: 120%; opacity: 0; transform-origin: 50% 50%; mix-blend-mode: multiply; }
.zwipe-cols > i { position: absolute; top: 0; bottom: 0; clip-path: polygon(0 200vh, 100% 200vh, 100% 200vh, 0 200vh); }
.zwipe-cols b { position: absolute; display: grid; place-items: center; transform: translate(-50%, -50%); opacity: 0; }
.zwipe.is-specimen .zwipe-t { z-index: 2; }
.zwipe.is-shell .zwipe-t { display: none; }
.zwipe-mark { position: absolute; left: 72%; top: 58%; width: min(34vw, 46vh); opacity: 0; color: currentColor; }
.zwipe-mark svg { display: block; width: 100%; height: auto; }
@media (max-width: 719px) { .zwipe-mark { left: 50%; top: 64%; width: 70vw; } }

/* titoli sotto un passaggio: aspettano che il campo li scopra */
.zr-w > .zr-i { transition-delay: calc(var(--late, 0ms) + var(--i) * var(--stagger) * 1.5); }

/* ——— scene 3D dello scroll (reveal.js) ——— */
/* griglia dei lavori: inizio compresso in profondità → apertura → tenuta → passaggio (si china e arretra) */
.zr-3d { perspective: 1400px; perspective-origin: 50% 0; --zd: -260px; --za: 34deg; }
.zr-3d > li { transform-origin: 50% 100%; will-change: transform, opacity;
  transform: translate3d(0, calc((1 - var(--o, 1)) * 89px), calc((1 - var(--o, 1)) * var(--zd) - var(--h, 0) * 140px)) rotateX(calc((1 - var(--o, 1)) * var(--za) - var(--h, 0) * 9deg));
  opacity: calc(.12 + var(--o, 1) * .88); }
/* parete della galleria: le foto ai lati guardano il centro finché la galleria non arriva a metà schermo */
.zr-wall { perspective: 1600px; }
.zr-wall > .zf { transform: translate3d(0, 0, var(--wz, 0)) rotateY(var(--wy, 0deg)); will-change: transform; }
@media (max-width: 768px) { .zr-3d { --zd: -120px; --za: 18deg; } }
@media (prefers-reduced-motion: reduce) { .zr-3d > li, .zr-wall > .zf { transform: none; opacity: 1; } }

/* ——— pagina Brand · il moto: campioni vivi degli oggetti veri (brand-motion.js) ——— */
.zm-grid { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
.zm-grid h3 { margin: var(--s4) 0 var(--s2); font: 700 var(--fs-h5)/1.1 var(--font-sans); letter-spacing: -.02em; }
.zm-grid p { margin: 0; font: 400 var(--fs-s)/1.5 var(--font-sans); }
.zm-stage { position: relative; aspect-ratio: 5 / 8; border-radius: var(--r-m); overflow: hidden; background: var(--brand-off-black); color: var(--brand-off-white); }
.zm-stage * { animation-play-state: paused; }
.zm-stage.is-live * { animation-play-state: running; }
.zm-pass i { position: absolute; inset: 0; background: var(--brand-cobalt); animation: zm-pass 3.2s var(--ease-io) infinite; }
.zm-pass b { position: absolute; left: var(--s4); top: 30%; font: 700 var(--fs-h4)/1 var(--font-sans); letter-spacing: -.03em; animation: zm-name 3.2s var(--ease-out) infinite; }
@keyframes zm-pass { 0% { clip-path: polygon(0 123%, 100% 100%, 100% 100%, 0 100%); } 30%, 55% { clip-path: polygon(0 0, 100% -23%, 100% 100%, 0 100%); } 85%, 100% { clip-path: polygon(0 0, 100% -23%, 100% -23%, 0 0); } }
@keyframes zm-name { 0%, 14% { opacity: 0; transform: translate3d(0, 34px, 0); } 30%, 55% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: translate3d(0, -13px, 0); } }
.zm-menu i { position: absolute; inset: 0; background: var(--brand-cobalt); animation: zm-menu 3.6s var(--ease-io) infinite; }
.zm-menu ol { position: absolute; left: var(--s4); top: var(--s6); margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s1); font: 700 var(--fs-h5)/1 var(--font-sans); letter-spacing: -.02em; }
.zm-menu li { overflow: clip; animation: zm-item 3.6s var(--ease-out) infinite; }
.zm-menu li:nth-child(2) { animation-delay: calc(var(--stagger) * 2); }
.zm-menu li:nth-child(3) { animation-delay: calc(var(--stagger) * 4); }
@keyframes zm-menu { 0% { clip-path: polygon(0 0, 100% 0, 100% 8%, 0 8%); } 28%, 62% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 123%); } 90%, 100% { clip-path: polygon(0 0, 100% 0, 100% -23%, 0 0); } }
@keyframes zm-item { 0%, 18% { opacity: 0; transform: translate3d(0, 100%, 0); } 34%, 58% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; } }
.zm-wait { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: var(--s2); padding-bottom: 38%; background: var(--brand-color-coral, var(--brand-orange)); color: var(--brand-off-black); }
.zm-wait i { width: 21px; height: 34px; border-radius: var(--r-xs); background: currentColor; animation: zwipe-plane 1.6s var(--ease-io) infinite both; }
.zm-wait i:nth-child(2) { animation-delay: calc(var(--stagger) * 6); }
.zm-wait i:nth-child(3) { animation-delay: calc(var(--stagger) * 12); }
.zm-space { position: absolute; inset: 0; perspective: 600px; background: var(--brand-powder-blue); }
.zm-space i { position: absolute; left: 50%; top: 58%; width: 22%; aspect-ratio: 5 / 8; margin: -17% 0 0 -11%; border-radius: var(--r-s); background: var(--brand-off-black); box-shadow: 0 13px 21px -13px rgba(13, 13, 13, .6); animation: zm-space 4.8s var(--ease-io) infinite; }
.zm-space i:nth-child(1) { --a: -2; } .zm-space i:nth-child(2) { --a: -1; background: var(--brand-cobalt); } .zm-space i:nth-child(3) { --a: 0; background: var(--brand-off-white); } .zm-space i:nth-child(4) { --a: 1; background: var(--brand-powder-pink); } .zm-space i:nth-child(5) { --a: 2; }
@keyframes zm-space {
  0%, 12% { transform: translate3d(calc(var(--a) * 4px), 0, calc(var(--a) * -4px)) rotateZ(calc(var(--a) * 4deg)); }
  38%, 58% { transform: translate3d(calc(var(--a) * 34px), calc(var(--a) * var(--a) * 8px), 0) rotateZ(calc(var(--a) * 13deg)); }
  80%, 100% { transform: translate3d(calc(var(--a) * 26px), 0, calc(var(--a) * var(--a) * -34px)) rotateY(calc(var(--a) * -21deg)); }
}
/* profondità: cinque piani sui gradini --z-1…4, la camera gira piano */
.zm-depth { position: absolute; inset: 0; background: var(--brand-off-white); perspective: var(--persp-near); }
.zm-depth i { position: absolute; left: 30%; top: 26%; width: 40%; aspect-ratio: 5 / 8; border-radius: var(--r-s); background: var(--brand-cobalt); box-shadow: var(--shadow-2); transform: translate3d(0, 0, var(--z)); animation: zm-depth 5s var(--ease-io) infinite alternate; }
.zm-depth i:nth-child(odd) { background: var(--brand-off-black); }
.zm-depth i:last-child { background: var(--brand-orange); }
@keyframes zm-depth { from { transform: rotateY(-34deg) translate3d(0, 0, var(--z)); } to { transform: rotateY(34deg) translate3d(0, 0, var(--z)); } }
/* intensità: lo stesso passaggio a 13° con ampiezze diverse */
.zm-int { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s1); padding: var(--s4); align-items: end; background: var(--brand-off-black); color: var(--brand-off-white); }
.zm-int span { display: grid; gap: var(--s2); justify-items: center; }
.zm-int i { width: 100%; aspect-ratio: 5 / 8; border-radius: var(--r-xs); background: var(--brand-cobalt); animation: zm-int 2.4s var(--ease-sport) infinite; }
.zm-int b { font: 700 var(--fs-2xs)/1 var(--font-sans); }
@keyframes zm-int { 0%, 20% { transform: translate3d(0, calc(var(--k) * 34px), 0) rotate(calc(var(--k) * -13deg)); opacity: calc(1 - var(--k) * .8); } 55%, 100% { transform: none; opacity: 1; } }

/* il mazzo: raccolto nell'angolo, aperto a parete al centro, raccolto di nuovo */
.zm-deck { position: absolute; inset: 0; background: var(--brand-cobalt); perspective: 600px; }
.zm-deck i { position: absolute; right: 9%; bottom: 7%; width: 16%; aspect-ratio: 5 / 8; border-radius: var(--r-xs); background: var(--brand-off-white); box-shadow: var(--shadow-2); animation: zm-deck 4.2s var(--ease-io) infinite; }
.zm-deck i:nth-child(1) { --a: 0; } .zm-deck i:nth-child(2) { --a: 1; background: var(--brand-powder-pink); } .zm-deck i:nth-child(3) { --a: 2; background: var(--brand-orange); } .zm-deck i:nth-child(4) { --a: 3; background: var(--brand-off-black); }
@keyframes zm-deck {
  0%, 12% { transform: translate3d(calc(var(--a) * -3px), calc(var(--a) * -2px), 0) rotate(calc(var(--a) * 4deg - 6deg)); }
  40%, 66% { transform: translate3d(calc(var(--a) * -46% - 90%), -170%, 0) scale(1.5) rotateY(calc(var(--a) * -12deg + 18deg)); }
  92%, 100% { transform: translate3d(calc(var(--a) * -3px), calc(var(--a) * -2px), 0) rotate(calc(var(--a) * 4deg - 6deg)); }
}
.zm-tokens { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s4); margin: var(--s6) 0 0; padding-top: var(--s4); border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.zm-tokens dt { font: 700 var(--fs-s)/1.3 var(--font-sans); }
.zm-tokens code { font: 500 var(--fs-xs)/1 var(--font-mono); }
.zm-tokens dd { margin: var(--s1) 0 0; font: 400 var(--fs-xs)/1.4 var(--font-sans); }
@media (max-width: 1024px) { .zm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zm-tokens { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .zm-grid { grid-template-columns: 1fr 1fr; gap: var(--s4); } .zm-tokens { grid-template-columns: 1fr; } }
/* la pressione: un controllo vero si abbassa di un passo (0,96) in --motion-l0 e torna con la curva sportiva */
.zm-press { position: absolute; inset: 0; display: grid; place-items: center; background: var(--brand-powder-pink); }
.zm-press b { padding: var(--s2) var(--s4); border-radius: var(--r-pill); background: var(--brand-off-black); color: var(--brand-off-white); font: 700 var(--fs-s)/1 var(--font-sans); animation: zm-press 2.4s var(--ease-sport) infinite; }
.zm-press i { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--brand-off-white); mix-blend-mode: difference; animation: zm-cur 2.4s var(--ease-sport) infinite; }
@keyframes zm-press { 0%, 30% { transform: none; } 36%, 44% { transform: scale(.96); } 56%, 100% { transform: none; } }
@keyframes zm-cur { 0% { transform: translate3d(60px, 70px, 0); } 30%, 70% { transform: translate3d(0, 0, 0) scale(1.4); } 100% { transform: translate3d(60px, 70px, 0); } }
/* moto ridotto: lo stesso passaggio come dissolvenza breve e maschera, senza rotazioni né viaggio della camera */
.zm-red { position: absolute; inset: 0; background: var(--brand-off-white); }
.zm-red i { position: absolute; inset: 0; background: var(--brand-cobalt); animation: zm-red 3.2s var(--ease-out) infinite; }
.zm-red i + i { inset: 26% 18%; border-radius: var(--r-s); background: var(--brand-off-white); animation-delay: .2s; }
@keyframes zm-red { 0%, 20% { opacity: 0; } 32%, 70% { opacity: 1; } 82%, 100% { opacity: 0; } }
/* Motion Wall (/moto, sviluppo): strumenti e moto ridotto forzato sui campioni */
.zm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.zm-toggle { display: inline-flex; align-items: center; gap: var(--s2); font: 500 var(--fs-s)/1 var(--font-sans); }
.zt-motion.is-reduced .zm-stage * { animation-name: zm-red !important; animation-timing-function: var(--ease-out) !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .zm-stage * { animation: none !important; } }

/* la voce del menu che vola sul titolo della pagina nuova (chrome.js, flyWord) */
.zmenu-fly { position: fixed; z-index: 60; margin: 0; white-space: nowrap; pointer-events: none; transform-origin: 0 0; will-change: transform, opacity; }
/* Servizi → prodotto: il nome dell'app e la sua schermata vera salgono sul colore del prodotto */
.zwipe-app { position: absolute; inset: var(--shell-h, 64px) 0 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--s5); padding: var(--s5) var(--zp) var(--s6); }
.zwipe-app p { display: flex; align-items: center; gap: var(--s3); margin: 0; font: 700 var(--fs-h3)/1 var(--font-sans); letter-spacing: -.035em; opacity: 0; transform: translate3d(0, var(--s4), 0); transition: opacity var(--t-2) var(--ease-out), transform var(--t-3) var(--ease-sport); }
.zwipe-app figure { justify-self: center; align-self: start; width: min(1080px, 100%); max-height: 100%; margin: 0; overflow: hidden; border-radius: var(--r-l); box-shadow: var(--shadow-3); opacity: 0; transform: translate3d(0, 12vh, 0) scale(.94); transition: opacity var(--t-2) var(--ease-out), transform var(--t-3) var(--ease-sport); }
.zwipe-app figure img { display: block; width: 100%; height: auto; }
.zwipe-app:not(.has-shot) { align-content: center; }
.zwipe-app:not(.has-shot) p { font-size: var(--fs-h1); }
.zwipe-app.is-on p, .zwipe-app.is-on figure { opacity: 1; transform: none; }
.zwipe-app.is-on figure { transition-delay: var(--t-1); }
.zwipe-app.is-off { opacity: 0; transition: opacity var(--t-2) var(--ease-out); }