/* Sito DRIP Studio · i capitoli con una scena propria: Foundation (logo, sotto-navigazione, l'1%), Servizi (due mondi, il
   mazzo delle discipline, i prodotti veri), Ambiente (la pianta vera), DRIP Urban e il piede (la città 3D). Solo token. */

/* ——— Foundation ——— */
/* il logo ufficiale (assets/img/brand/foundation-logo.png) come maschera: la barra in Powder Blue, la scritta nel colore del testo */
.zf-logo { position: relative; display: block; height: 30px; aspect-ratio: 600 / 164; background: currentColor;
  -webkit-mask: url(/assets/img/brand/foundation-logo.png) 0 0 / contain no-repeat; mask: url(/assets/img/brand/foundation-logo.png) 0 0 / contain no-repeat; }
.zf-logo::before { content: ''; position: absolute; inset: 0 88.4% 0 0; background: var(--brand-powder-blue); }
.zt-strip { padding-top: 0; padding-bottom: var(--s5); }
.zs-poster > .zfnav { order: -1; margin-bottom: var(--s5); padding-top: 0; border-top: 0; }
.zfnav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); padding-top: var(--s4); border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.zfnav-logo { display: block; padding: var(--s1) 0; }
.zfnav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); }
.zfnav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 var(--fs-s)/1 var(--font-sans); text-decoration: none; }
.zfnav a:hover { text-decoration: underline; text-underline-offset: .3em; }
.zfnav a[aria-current] { font-weight: 700; box-shadow: inset 0 -2px currentColor; }

/* l'1%: cento tessere su un piano che si inclina con lo scroll (--p, reveal.js); una sola si stacca */
.zpct { align-items: center; }
.zpct-stage { position: relative; aspect-ratio: 1; perspective: 1200px; }
.zpct-plane { position: absolute; inset: 9%; display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; transform-style: preserve-3d;
  transform: rotateX(calc(var(--p, 1) * 56deg)) rotateZ(calc(var(--p, 1) * -34deg)) scale(calc(1 - var(--p, 1) * .1)); }
.zpct-plane i { aspect-ratio: 1; border-radius: var(--r-xs); background: color-mix(in srgb, currentColor 14%, transparent); transform-style: preserve-3d; }
.zpct-plane i.is-one { background: var(--brand-cobalt); transform: translateZ(calc(var(--p, 1) * 89px)); box-shadow: var(--shadow-3); }
.zpct-n { position: absolute; left: 0; bottom: 0; font: 700 clamp(89px, 12vw, 233px)/.8 var(--font-sans); letter-spacing: -.05em; opacity: calc(.25 + var(--p, 1) * .75); }
.zpct-k { margin-top: var(--s4); font: 700 var(--fs-xs)/1 var(--font-sans); letter-spacing: .02em; }

/* ——— Servizi: due mondi ——— */
.zt-worlds { padding-top: var(--s6); }
.zwd { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.zwd-w { position: relative; display: grid; grid-template-rows: 1fr auto; gap: var(--s5); min-height: min(64svh, 580px); padding: var(--s5); border-radius: var(--r-xl); overflow: hidden; text-decoration: none; }
.zwd-w.is-studio { background: var(--brand-orange); color: var(--brand-off-black); }
.zwd-w.is-products { background: var(--brand-cobalt); color: var(--brand-off-white); }
.zwd-w:focus-visible { outline: 2px solid var(--brand-off-black); outline-offset: 4px; }
.zwd-stack { position: relative; perspective: 900px; }
.zwd-stack i { position: absolute; right: 6%; top: 0; width: 36%; aspect-ratio: 5 / 8; border-radius: var(--r-m); overflow: hidden; box-shadow: var(--shadow-3);
  transform: translate3d(calc(var(--k) * -36%), calc(var(--k) * 5%), calc(var(--k) * -40px)) rotate(calc(var(--k) * -5deg + 4deg)) rotateY(-12deg); transition: transform var(--t-3) var(--ease-out); }
.zwd-stack i img { width: 100%; height: 100%; object-fit: cover; }
.zwd-stack i.is-field { display: flex; align-items: flex-end; }
.zwd-stack i.is-field b { padding: var(--s3); font: 700 var(--fs-body)/1 var(--font-sans); letter-spacing: -.02em; }
.zwd-names { display: grid; align-content: start; font: 700 clamp(34px, 4.2vw, 68px)/.95 var(--font-sans); letter-spacing: -.04em; }
.zwd-names i { font-style: normal; opacity: .38; transition: opacity var(--t-2) var(--ease-out), transform var(--t-3) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .zwd-w:hover .zwd-stack i { transform: translate3d(calc(var(--k) * -50%), calc(var(--k) * 7% - 3%), 0) rotate(calc(var(--k) * -8deg + 6deg)) rotateY(-6deg); }
  .zwd-w:hover .zwd-names i { opacity: .92; transform: translate3d(var(--s2), 0, 0); }
}
.zwd-c { display: grid; gap: var(--s2); max-width: 30em; }
.zwd-c b { font: 700 var(--fs-h3)/1 var(--font-sans); letter-spacing: -.035em; }
.zwd-c span { font: 400 var(--fs-s)/1.45 var(--font-sans); }
.zwd-c .zwd-k { font: 700 var(--fs-xs)/1 var(--font-sans); letter-spacing: .02em; }

/* le discipline: un elenco e il loro mazzo; quella indicata va davanti, le altre si riordinano in profondità */
.zt-svdeck { overflow-x: clip; }
.zsv { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s6); align-items: start; }
.zsv-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.zsv-list a { display: grid; grid-template-columns: 3ch 1fr; grid-template-areas: 'n t' '. d'; gap: var(--s1) var(--s3); padding: var(--s4) 0; border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent); text-decoration: none; transition: opacity var(--t-1) var(--ease-out); }
.zsv-n { grid-area: n; padding-top: .7em; font: 500 var(--fs-2xs)/1 var(--font-sans); letter-spacing: .04em; opacity: .6; }
.zsv-list b { grid-area: t; font: 700 var(--fs-h4)/1 var(--font-sans); letter-spacing: -.03em; transition: transform var(--t-2) var(--ease-out); }
.zsv-d { grid-area: d; max-width: 36em; font: 400 var(--fs-s)/1.45 var(--font-sans); opacity: .76; }
.zsv-list a.is-on b { transform: translate3d(var(--s2), 0, 0); }
@media (hover: hover) and (pointer: fine) { .zsv-list:hover a:not(.is-on) { opacity: .45; } }
.zsv-deck { position: sticky; top: calc(var(--shell-h) + var(--s5)); aspect-ratio: 5 / 6; perspective: 1200px; }
.zsv-card { position: absolute; left: 12%; top: 0; width: 66%; aspect-ratio: 5 / 8; display: flex; align-items: flex-end; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow-3);
  transform: translate3d(calc(var(--r, 0) * 21px), calc(var(--r, 0) * -13px), calc(var(--r, 0) * -89px)) rotate(calc(var(--r, 0) * 3deg)) rotateY(-8deg);
  opacity: calc(1 - var(--r, 0) * .24); z-index: calc(10 - var(--r, 0)); transition: transform var(--t-3) var(--ease-out), opacity var(--t-2) var(--ease-out); }
.zsv-card img { width: 100%; height: 100%; object-fit: cover; }
.zsv-card.is-field b { padding: var(--s5); font: 700 var(--fs-h3)/.95 var(--font-sans); letter-spacing: -.035em; }
.zsv-card[data-field='coral'], .zwd-stack i[data-field='coral'] { background: var(--brand-orange); color: var(--brand-off-black); }
.zsv-card[data-field='cobalt'], .zwd-stack i[data-field='cobalt'] { background: var(--brand-cobalt); color: var(--brand-off-white); }
.zsv-card[data-field='pink'], .zwd-stack i[data-field='pink'] { background: var(--brand-powder-pink); color: var(--brand-off-black); }
.zsv-card[data-field='ink'], .zwd-stack i[data-field='ink'] { background: var(--brand-off-black); color: var(--brand-off-white); box-shadow: var(--shadow-3), inset 0 0 0 1px color-mix(in srgb, var(--brand-off-white) 18%, transparent); }
.zsv-card[data-field='blue'], .zwd-stack i[data-field='blue'] { background: var(--brand-powder-blue); color: var(--brand-off-black); }

/* i prodotti: l'interfaccia vera dove c'è, la pianta vera per Urban, il campo del prodotto con il suo nome altrimenti */
.zpd { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s4); }
.zpd a { display: grid; gap: var(--s3); align-content: start; text-decoration: none; }
.zpd-face { position: relative; aspect-ratio: 8 / 5; display: flex; align-items: flex-end; border-radius: var(--r-l); overflow: hidden; background: var(--pc, var(--brand-off-black)); color: var(--pon, var(--brand-off-white)); transition: transform var(--t-2) var(--ease-out); --map-mark: var(--brand-off-white); }
.zpd-face img, .zpd-face canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zpd-face > b { position: relative; padding: var(--s4); font: 700 var(--fs-h3)/.95 var(--font-sans); letter-spacing: -.035em; }
.zpd-face .zenv-map { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; border-radius: 0; background: none; color: inherit; opacity: .55; --map-mark: var(--brand-off-white); }
@media (hover: hover) and (pointer: fine) { .zpd a:hover .zpd-face { transform: translate3d(0, -4px, 0); } }
.zpd-id { display: flex; align-items: center; gap: var(--s2); }
.zpd-id b { font: 700 var(--fs-h5)/1.1 var(--font-sans); letter-spacing: -.02em; }
.zpd-free { margin-left: auto; padding: 3px 9px; border-radius: var(--r-pill); background: var(--pc, var(--brand-off-black)); color: var(--pon, var(--brand-off-white)); font: 600 var(--fs-2xs)/1.3 var(--font-sans); }
.zpd-d { font: 400 var(--fs-s)/1.45 var(--font-sans); opacity: .8; }
.zpd-go { font: 700 var(--fs-xs)/1 var(--font-sans); }
@media (max-width: 1024px) { .zpd { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .zwd, .zsv { grid-template-columns: 1fr; }
  .zwd-w { min-height: 440px; }
  .zsv-deck { display: none; }
}
@media (max-width: 560px) { .zpd { grid-template-columns: 1fr; } }

/* ——— Ambiente: la pianta vera al posto della foto che non c'è ——— */
.zenv-map { position: relative; margin-top: var(--s7); aspect-ratio: 8 / 5; max-height: 89svh; border-radius: var(--r-xl); overflow: hidden; color: var(--brand-off-black); --map-mark: var(--brand-cobalt); }
.zenv-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ——— la città 3D: la sezione di DRIP Urban e il piede «Born and raised in Frattamaggiore» ——— */
.zcity { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: hidden; background: var(--brand-off-black); }
.zcity canvas, .zft-stage canvas { position: absolute; inset: 0; display: block; }
.zcity-src, .zft-src { position: absolute; left: var(--s4); bottom: var(--s3); z-index: 1; margin: 0; font: 500 var(--fs-2xs)/1 var(--font-sans); letter-spacing: .02em; color: var(--brand-off-white); opacity: .55; }
/* il credito dei dati sta in basso a destra: la frase occupa l'alto */
.zft-src { left: auto; right: var(--zp); bottom: var(--s3); }
/* la città è uno strato posizionato: titolo, collegamenti e legale le stanno sopra */
.zft-city { position: relative; height: 190svh; margin: calc(var(--s8) * -1) calc(var(--zp) * -1) 0; }
.zft-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
/* velo scuro in alto: la frase si legge anche sopra i tetti chiari della pianta */
.zft-stage::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 calc(var(--shell-h) + var(--s8) * 2.2) calc(var(--s8) * 1.6) calc(var(--s8) * -.6) var(--brand-off-black); }
/* la frase su due piani: la prima riga entra a maschera e poi arretra (--d), la seconda si risolve all'arrivo (--a) */
/* la frase sta in alto, sul fondo scuro dell'inquadratura (nebbia), mai sopra i volumi chiari del plastico */
.zft-claim { position: absolute; left: var(--zp); right: var(--zp); top: calc(var(--shell-h) + var(--s6)); z-index: 1; margin: 0; font: 700 var(--fs-h1)/.92 var(--font-sans); letter-spacing: -.04em; pointer-events: none; }
.zft-l { display: block; width: fit-content; }
/* le due righe entrano una dopo l'altra e restano intere (prima la prima arretrava sotto la maschera e si vedeva tagliata) */
.zft-l:first-child { clip-path: inset(0 0 calc((1 - var(--a, 1)) * 100%) 0); transform: translate3d(0, calc((1 - var(--a, 1)) * .5em), 0); }
.zft-l:last-child { opacity: var(--a, 1); transform: translate3d(0, calc((1 - var(--a, 1)) * .4em), 0); }
.zft-l em { color: var(--brand-powder-blue); }
.zft-pin { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity var(--t-2) var(--ease-out); }
.zft-pin.is-on { opacity: 1; }
.zft-pin i { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--brand-powder-blue); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-powder-blue) 30%, transparent); }
.zft-pin b { position: absolute; left: 0; bottom: 13px; translate: -50% 0; display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-s); background: var(--brand-off-white); color: var(--brand-off-black); font: 700 var(--fs-xs)/1.2 var(--font-sans); white-space: nowrap; box-shadow: var(--elev-2, none); }
.zft-pin b > span { display: grid; gap: 2px; } .zft-pin small { font: 400 var(--fs-2xs)/1.2 var(--font-sans); }
.zft-pin-mark { width: auto; height: 1.6em; fill: currentColor; flex: none; }
@media (max-width: 768px) { .zft-city { height: 180svh; } .zft-claim { font-size: clamp(40px, 11vw, 64px); top: calc(var(--shell-h) + var(--s4)); } }
@media (prefers-reduced-motion: reduce) { .zft-city { height: 100svh; } }

/* il concierge passa a sinistra: l'angolo in basso a destra è del mazzo */
.cg { right: auto; left: var(--zp); justify-items: start; }

/* ——— foto da definire (media_pending): il posto resta, con formato, raggio e moto; la superficie è del marchio ——— */
:where(.zf.is-pending) { aspect-ratio: 8 / 5; }
.zf.is-pending, .zp-hero-fig.is-pending { position: relative; overflow: hidden; background: color-mix(in srgb, currentColor 8%, transparent); }
.zp-hero-fig.is-pending { background: var(--pc); color: var(--pon); }
/* la geometria del marchio: un piano a 13° appena più denso, così il posto si legge come superficie e non come buco */
.zf.is-pending::before, .zp-hero-fig.is-pending::before { content: ''; position: absolute; inset: 0; background: currentColor; opacity: .05; clip-path: polygon(0 62%, 100% 39%, 100% 100%, 0 100%); }
.zf-pend { display: none; position: absolute; left: var(--s4); bottom: var(--s4); gap: 2px; font: 700 var(--fs-2xs)/1.25 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; opacity: .62; }
.zf-pend i { font-style: normal; font-weight: 500; letter-spacing: .02em; text-transform: none; }
html.z-dev .zf-pend { display: grid; }
.zp-hero-fig.is-pending .zf-pend { left: auto; right: var(--zp); bottom: auto; top: calc(var(--shell-h) + var(--s4)); text-align: right; }

/* ——— capitolo Brand dei casi studio (sections.js · brandChapter) ———
   Il nome del marchio su un campo pieno del suo colore; poi l'idea, il marchio su carta e sul suo colore, i colori come
   colonne alte con il ruolo, i caratteri, le applicazioni (la prima grande). Il moto è quello di reveal.js. */
.zt-brand { padding: 0 0 var(--s9); background: var(--brand-off-white); color: var(--brand-off-black); overflow-x: clip; }
.zbr-marks > *, .zbr-apps > * { min-width: 0; }
.zbr { display: grid; gap: var(--s7); }
.zbr-h { display: grid; gap: var(--s3); padding: var(--s9) var(--zp) var(--s7); background: var(--c); color: var(--on); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13vw * .23), 0 100%); }
.zbr-k { margin: 0; font: 700 var(--fs-xs)/1.3 var(--font-sans); letter-spacing: .02em; opacity: .75; }
.zbr-name { margin: 0; font-size: clamp(64px, 13vw, 220px); line-height: .86; letter-spacing: -.055em; overflow-wrap: anywhere; }
.zbr-sub { margin: 0; max-width: 28ch; font: 600 var(--fs-h4)/1.15 var(--font-sans); letter-spacing: -.02em; }
.zbr-sub em { font-style: normal; opacity: .7; }
.zbr-idea { max-width: 62ch; padding: 0 var(--zp); font: 400 var(--fs-l)/1.5 var(--font-sans); }
.zbr-idea p { margin: 0 0 var(--s3); }
.zbr-marks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); padding: 0 var(--zp); }
.zbr-marks figure { display: grid; place-items: center; margin: 0; aspect-ratio: 8 / 5; border-radius: var(--radius-media); background: var(--brand-paper-2, color-mix(in srgb, var(--brand-off-black) 5%, var(--brand-off-white))); }
.zbr-marks figure.is-dark { background: var(--c); }
.zbr-marks img { width: 54%; max-height: 52%; object-fit: contain; }
.zbr-pal { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0; margin: 0; padding: 0 var(--zp); list-style: none; }
.zbr-pal li { display: flex; flex-direction: column; justify-content: space-between; min-height: clamp(220px, 34vw, 460px); padding: var(--s4); background: var(--c); color: var(--on); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-off-black) 10%, transparent); }
.zbr-pal li:first-child { border-radius: var(--radius-media) 0 0 var(--radius-media); } .zbr-pal li:last-child { border-radius: 0 var(--radius-media) var(--radius-media) 0; }
.zbr-pal b { font: 700 var(--fs-s)/1.2 var(--font-sans); }
.zbr-pal span { font: 600 var(--fs-xs)/1 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.zbr-type { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); margin: 0; padding: 0 var(--zp); list-style: none; }
.zbr-type li { display: grid; gap: var(--s1); padding-top: var(--s3); border-top: 1px solid var(--line); }
.zbr-aa { font-size: clamp(72px, 9vw, 140px); line-height: 1; }
.zbr-type small { color: var(--ink-3); }
.zbr-apps { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s3); padding: 0 var(--zp); }
.zbr-apps.is-one { grid-template-columns: minmax(0, 1fr); }
.zbr-apps .is-lead { grid-row: span 2; }
.zbr.is-minor .zbr-pal { padding: 0; margin-top: var(--s4); }
.zbr.is-minor .zbr-pal li { min-height: 120px; }
/* moto: i colori salgono dal bordo a 13° uno dopo l'altro (reveal.js: .zr-pend finché la riga non arriva) */
.zbr-pal li.zr-item { transform: none; opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: clip-path var(--t-4) var(--ease-sport); transition-delay: calc(var(--d, 0) * var(--stagger) * 3); }
.zbr-pal li.zr-pend { transform: none; opacity: 1; clip-path: polygon(0 100%, 100% calc(100% - 13vw * .23), 100% 100%, 0 100%); }
@media (max-width: 760px) {
  .zbr-marks, .zbr-apps { grid-template-columns: minmax(0, 1fr); }
  .zbr-pal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zbr-pal li { min-height: 160px; border-radius: 0 !important; }
}

/* ——— chiusura del piede: il sipario dell'epilogo sale sopra l'ultima inquadratura della città, e il racconto finisce
   sul marchio (simbolo ufficiale e parola, come nella testata) a tutta larghezza ——— */
/* il sipario va da bordo a bordo: il piede ha il suo margine laterale (--zp), il fondo lo scavalca senza spostare la griglia */
.zft-epi { position: relative; z-index: 2; margin-top: -32svh; padding-top: var(--s7); background: var(--brand-off-black); box-shadow: 0 0 0 100vmax var(--brand-off-black); clip-path: inset(0 -100vmax); }
.zft-brand { display: flex; align-items: flex-end; gap: .08em; margin: var(--s7) 0 var(--s5); font: 700 clamp(88px, 22.5vw, 420px)/.74 var(--font-sans); letter-spacing: -.055em; color: var(--brand-off-white); overflow: hidden; }
.zft-brand-mark { flex: none; height: .74em; width: auto; fill: currentColor; }
.zft-brand b { display: block; font: inherit; }
.zft-brand > * { transition: translate var(--t-3) var(--ease-out), opacity var(--t-3) var(--ease-out); }
.zft-brand.zr-pend > * { translate: 0 40%; opacity: 0; }
.zft-brand.zr-pend b { transition-delay: var(--stagger); }
@media (prefers-reduced-motion: reduce) { .zft-brand > * { transition: none; } }