/* DRIP Studio · i lavori sfalsati della Home (related con layout «stagger»), la striscia delle discipline e i passaggi del
   puntatore del sito. Un lavoro grande quasi a tutta larghezza e uno piccolo più in basso, a lati alterni: numero in voce
   Playfair, discipline vere del progetto, colore del progetto come cornice e come etichetta che segue il puntatore. */

/* ——— lavori sfalsati ——— */
.zt-showcase { padding-block: var(--s9); }
.zsc-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s6); align-items: end; margin-bottom: clamp(var(--s7), 7vw, var(--s9)); }
.zsc-head .zs-h { margin: var(--s3) 0 0; }
.zsc-side .zs-lead { margin: 0 0 var(--s4); }
.zsc-side .zs-act { display: flex; align-items: baseline; gap: var(--s4); margin: 0; }
.zsc-count { font: italic 800 var(--fs-h3)/1 var(--font-voice); letter-spacing: -.02em; opacity: .9; }
.zsc { display: grid; gap: clamp(var(--s7), 8vw, var(--s9)); }
.zsc-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: clamp(var(--s4), 4vw, var(--s7)); align-items: start; }
.zsc-row.is-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); }
.zsc-i.is-small { margin-top: clamp(var(--s7), 15vw, 280px); }
.zsc-a { position: relative; display: grid; gap: var(--s4); color: inherit; text-decoration: none; transition: opacity var(--t-2) var(--ease-out), filter var(--t-2) var(--ease-out); }
.zsc-media { position: relative; display: block; overflow: hidden; border-radius: var(--r-m); aspect-ratio: 16 / 10; background: var(--wc); isolation: isolate; transition: border-radius var(--t-3) var(--ease-sport); }
.is-small .zsc-media { aspect-ratio: 4 / 5; }
.zsc-media > .zf { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; border-radius: 0; }
.zsc-media img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(calc(var(--mx, 0) * -22px), calc(var(--my, 0) * -16px), 0) scale(var(--zsc-z, 1.04)); transition: transform var(--t-3) var(--ease-out); will-change: transform; }
.zsc-field { position: absolute; inset: 0; display: grid; place-items: end start; padding: var(--s5); color: var(--won); font: 700 var(--fs-h3)/1 var(--font-sans); letter-spacing: -.03em; }
/* la cornice nel colore del progetto, che entra dai bordi */
.zsc-band { position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 0 var(--wc); transition: box-shadow var(--t-3) var(--ease-sport); pointer-events: none; }
.zsc-go { position: absolute; z-index: 2; left: var(--zsc-x, 50%); top: var(--zsc-y, 50%); display: inline-flex; align-items: center; gap: var(--s2); padding: 12px 18px; border-radius: var(--r-pill); background: var(--wc); color: var(--won); font: 700 var(--fs-xs)/1 var(--font-sans); white-space: nowrap; transform: translate(-50%, -50%) scale(0); transition: transform var(--t-2) var(--ease-spring); pointer-events: none; }
.zsc-go i { font-style: normal; transition: transform var(--t-2) var(--ease-out); }
.zsc-txt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s4); align-items: baseline; }
.zsc-n { grid-row: span 3; font: italic 800 clamp(34px, 3.4vw, 56px)/.9 var(--font-voice); color: var(--wc); transition: transform var(--t-3) var(--ease-sport); }
.zsc-txt h3 { position: relative; justify-self: start; margin: 0; font: 700 var(--fs-h3)/1.02 var(--font-sans); letter-spacing: -.03em; }
.is-small .zsc-txt h3 { font-size: var(--fs-h4); }
.zsc-txt h3::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.12em; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--t-3) var(--ease-sport); }
.zsc-txt p { margin: var(--s2) 0 0; font: 400 var(--fs-s)/1.4 var(--font-sans); opacity: .75; }
.zsc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); }
.zsc-tags span { padding: 5px 11px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px currentColor; font: 600 12px/1 var(--font-sans); opacity: .8; transition: background-color var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out), box-shadow var(--t-2) var(--ease-out), opacity var(--t-2) var(--ease-out); }
.zsc-tags span:nth-child(2) { transition-delay: calc(var(--stagger) * 1); }
.zsc-tags span:nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
.zsc-tags span:nth-child(4) { transition-delay: calc(var(--stagger) * 3); }

@media (hover: hover) and (pointer: fine) {
  .zsc:has(.zsc-a:hover) .zsc-a:not(:hover) { opacity: .42; filter: saturate(.55); }
  .zsc-a:hover .zsc-media { border-radius: var(--r-l); }
  .zsc-a:hover .zsc-media img { --zsc-z: 1.1; }
  .zsc-a:hover .zsc-band { box-shadow: inset 0 0 0 12px var(--wc); }
  .zsc-a:hover .zsc-go { transform: translate(-50%, -50%) scale(1); }
  .zsc-a:hover .zsc-go i { transform: translateX(4px); }
  .zsc-a:hover .zsc-n { transform: translateY(-6px) rotate(-6deg); }
  .zsc-a:hover .zsc-txt h3::after { transform: scaleX(1); transform-origin: left; }
  .zsc-a:hover .zsc-tags span { background: var(--wc); color: var(--won); box-shadow: inset 0 0 0 1px var(--wc); opacity: 1; }
}
.zsc-a:focus-visible { outline: none; }
.zsc-a:focus-visible .zsc-media { box-shadow: 0 0 0 3px var(--brand-cobalt); }
@media (hover: none), (pointer: coarse) { .zsc-go { display: none; } }

@media (max-width: 860px) {
  .zsc-head { grid-template-columns: 1fr; gap: var(--s4); }
  .zsc-row, .zsc-row.is-flip { grid-template-columns: 1fr; gap: var(--s7); }
  .zsc-row.is-flip .zsc-i.is-big { order: -1; }
  .zsc-i.is-small { margin-top: 0; width: 78%; justify-self: end; }
  .zsc-row.is-flip .zsc-i.is-small { justify-self: start; }
}

/* ——— la striscia delle discipline ——— */
.zt-disciplines { padding-block: var(--s7) var(--s8); overflow: hidden; }
.zdis-k { margin: 0 0 var(--s4); }
.zdis { overflow: hidden; }
.zdis-track { display: flex; align-items: center; width: max-content; animation: zdis 70s linear infinite; }
.zdis-copy { display: flex; align-items: center; }
.zdis span:not(.zdis-copy) { padding: 0 .3em; font: 700 clamp(40px, 7.2vw, 118px)/1.05 var(--font-sans); letter-spacing: -.045em; white-space: nowrap; transition: color var(--t-1) var(--ease-out), transform var(--t-2) var(--ease-sport); }
.zdis span.is-voice { font: italic 800 clamp(40px, 7.2vw, 118px)/1.05 var(--font-voice); letter-spacing: -.02em; }
.zdis i { flex: none; width: .16em; height: .58em; font-size: clamp(40px, 7.2vw, 118px); background: var(--brand-cobalt); transform: skewX(-13deg); }
@media (hover: hover) and (pointer: fine) {
  .zdis:hover .zdis-track { animation-play-state: paused; }
  .zdis span:not(.zdis-copy):hover { color: var(--brand-cobalt); transform: translateY(-.06em); }
}
@keyframes zdis { to { transform: translateX(-50%); } }

/* ——— passaggi del puntatore del sito ——— */
/* pulsante: un campo pieno sale da sotto, il testo resta sopra; l'ombra si tinge del campo */
.zbtn { position: relative; overflow: hidden; isolation: isolate; transition: transform var(--t-1) var(--ease-out), color var(--t-2) var(--ease-out); }
.zbtn::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--zbtn-fx, var(--brand-cobalt)); transform: translateY(102%); transition: transform var(--t-2) var(--ease-sport); }
:is(.zs, .zk)[data-field='cobalt'] .zbtn, .zh .zbtn, .zbtn-on { --zbtn-fx: var(--brand-off-black); }
@media (hover: hover) and (pointer: fine) {
  .zbtn:hover:not(#zbtn-x) { color: var(--brand-off-white) !important; transform: translateY(-2px); }
  .zbtn:hover::before { transform: translateY(0); }
  /* collegamento: la riga si ritira a destra e rientra da sinistra */
  .zlink { text-decoration: none; background: none; position: relative; }
  .zlink::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.18em; height: 1px; background: currentColor; transform-origin: right; transition: transform var(--t-2) var(--ease-sport); }
  .zlink:hover::after { animation: zlink-redraw var(--t-3) var(--ease-sport); }
  /* prodotti (Home ed Ecosistema): la card si alza, la freccia parte in diagonale */
  .zs-list-products a { transition: transform var(--t-2) var(--ease-sport), box-shadow var(--t-2) var(--ease-out); }
  .zs-list-products a:hover { transform: translateY(-8px); box-shadow: 0 18px 40px -18px var(--brand-cobalt); }
  .zs-list-products a::after { transition: transform var(--t-2) var(--ease-sport); }
  .zs-list-products a:hover::after { transform: translate(4px, -4px); }
  /* notizie: il titolo si sottolinea, l'immagine si avvicina */
  .zs-news a h3 { text-decoration: underline transparent 2px; text-underline-offset: .2em; transition: text-decoration-color var(--t-2) var(--ease-out); }
  .zs-news a:hover h3 { text-decoration-color: currentColor; }
  .zs-news .zf img { transition: transform var(--t-3) var(--ease-out); }
  .zs-news a:hover .zf img { transform: scale(1.06); }
  /* elenchi (servizi, metodo): la riga rientra e il titolo prende la voce */
  .zs-list:not(.zs-list-products) li { transition: transform var(--t-2) var(--ease-sport); }
  .zs-list:not(.zs-list-products) li:hover { transform: translateX(10px); }
  .zs-list:not(.zs-list-products) li:hover h3 { font-style: italic; }
}
@keyframes zlink-redraw { 0% { transform: scaleX(1); transform-origin: right; } 49% { transform: scaleX(0); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }

@media (prefers-reduced-motion: reduce) {
  .zdis-track { animation: none; flex-wrap: wrap; width: auto; }
  .zdis-copy { display: none; }
  .zsc-media img, .zsc-n, .zsc-txt h3::after, .zsc-band, .zsc-go, .zbtn::before, .zs-list li, .zs-list-products a { transition: none; }
  .zsc-media img { transform: none; }
  .zlink:hover::after { animation: none; }
}

/* ——— Home, atto I: «DRIP.» come materia. Il piano tipografico vive nel campo (dentro .zworld, sopra i suoi strati di
   colore e sotto il palco): le carte dell'arco lo attraversano davanti. Entra con una maschera quando il campo diventa
   cobalto, sale più piano della pagina, risponde al puntatore al contrario delle carte, verso Work si spinge avanti ——— */
.zh-mega { position: absolute; inset: 0; z-index: 5; display: grid; place-items: start center; padding-top: calc(var(--shell-h) + 17svh); overflow: hidden; pointer-events: none; color: color-mix(in srgb, var(--brand-off-white) 94%, var(--brand-cobalt)); }
.zh-mega-w { display: block; font: italic 700 clamp(120px, 22vw, 440px)/.8 var(--font-voice); letter-spacing: -.055em; white-space: nowrap; transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) - var(--rise, 0px)), 0) scale(var(--ms, 1)); transform-origin: 50% 70%; will-change: transform, clip-path; clip-path: inset(0 0 -10% 0); transition: clip-path var(--t-3) var(--ease-out), opacity var(--t-2) var(--ease-out); }
.zh-mega:not(.is-in) .zh-mega-w { clip-path: inset(100% 0 -10% 0); }
.zh-mega.is-in .zh-mega-w { animation: zh-mega-rise var(--t-3) var(--ease-out) both; }
@keyframes zh-mega-rise { from { translate: 0 18%; letter-spacing: -.02em; } to { translate: 0 0; letter-spacing: -.055em; } }
.zh-mega.is-out .zh-mega-w { opacity: 0; scale: 1.32; transition: opacity var(--t-2) var(--ease-io), scale var(--t-2) var(--ease-io); }
.zh-mega.is-fade .zh-mega-w { opacity: 0; transition: opacity var(--t-1) var(--ease-out); }
/* il titolo leggibile resta «We are DRIP.»: la parola grande la dice il piano, il titolo la tiene per gli screen reader */
html[data-route='home'] .zh-title.has-mega em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 768px) { .zh-mega { padding-top: calc(var(--shell-h) + 30svh); } .zh-mega-w { font-size: clamp(104px, 33vw, 220px); } }
@media (prefers-reduced-motion: reduce) { .zh-mega .zh-mega-w { animation: none; transition: none; clip-path: none; } }

/* ——— Home, atto IV: il metodo come quattro passaggi; i numeri sono materia, contorno che si riempie entrando ——— */
.zs-list-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s6); padding: 0; list-style: none; }
.zs-list-steps li { display: grid; align-content: start; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid currentColor; }
.zs-step-n { display: block; margin-bottom: var(--s3); font: italic 700 clamp(84px, 11vw, 176px)/.78 var(--font-voice); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px currentColor; transition: color var(--t-3) var(--ease-out); }
.zs-list-steps li:not(.zr-pend) .zs-step-n { color: currentColor; transition-delay: calc(var(--d, 0) * var(--stagger) * 3); }
.zs-list-steps li:hover .zs-step-n { color: var(--brand-cobalt); -webkit-text-stroke-color: var(--brand-cobalt); }
.zs-list-steps h3 { margin: 0; font: 700 var(--fs-h5)/1.1 var(--font-sans); }
.zs-list-steps p { margin: 0; max-width: 30ch; color: var(--z-mute, currentColor); }
@media (max-width: 900px) { .zs-list-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .zs-list-steps { grid-template-columns: 1fr; } .zs-step-n { font-size: 96px; } }