/* Sito DRIP Studio · la figurina da collezione (figurine.js): i lavori come album dei Mondiali 2026, nella parete di Work,
   nell'album e nel mazzo. Misure in cqw della figurina (larghezza 100, altezza 160: la 5:8 del Brand), colori dal
   progetto (--fc cornice, --fc2 accento), lamina e riflesso dai token --fx-* del sistema. */

.zfig { container-type: inline-size; }
.zfig > * { position: absolute; }
.zfig-frame { inset: 0; border-radius: inherit; background: var(--fx-sheen), var(--fc); }
.zfig-ph { inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(16cqw 5cqw 44cqw round 4cqw); transition: clip-path var(--t-3) var(--ease-sport); }
.zfig-type { display: flex; align-items: flex-start; box-sizing: border-box; padding: 21cqw 9cqw 48cqw; background: var(--fc2); color: var(--fon2); }
.zfig-type b { font: 700 12cqw/1 var(--font-sans); letter-spacing: -.03em; text-wrap: balance; }
.zfig-ui { inset: 0; color: var(--fon); pointer-events: none; transition: opacity var(--t-2) var(--ease-out) var(--t-1); }
.zfig-ui > * { position: absolute; }

/* testata: il settore come squadra, lo stemma DRIP */
.zfig-top { left: 6cqw; right: 5cqw; top: 4cqw; height: 9cqw; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; }
.zfig-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 4.2cqw/1 var(--font-sans); letter-spacing: .07em; text-transform: uppercase; }
.zfig-crest { flex: none; display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: var(--fon); color: var(--fc); }
.zfig-mark { width: 62%; height: auto; }
/* la finestra della foto, con il suo filo; il numero è una linguetta della cornice */
.zfig-win { top: 16cqw; left: 5cqw; right: 5cqw; bottom: 44cqw; border-radius: 4cqw; box-shadow: inset 0 0 0 .7cqw color-mix(in srgb, var(--fon) 26%, transparent); }
.zfig-no { left: 5cqw; bottom: 44cqw; padding: 2cqw 3cqw 0 1cqw; border-radius: 0 4cqw 0 0; background: var(--fc); font: 900 11cqw/.86 var(--font-wide); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
/* targhetta: nome e ruolo */
.zfig-plate { left: 5cqw; right: 5cqw; top: 118.5cqw; height: 24cqw; display: grid; align-content: center; gap: 1.2cqw; box-sizing: border-box; padding: 0 4cqw; border-radius: 3cqw; background: var(--fc2); color: var(--fon2); }
.zfig-plate b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font: 700 6.4cqw/1.02 var(--font-sans); letter-spacing: -.025em; text-wrap: balance; }
.zfig-plate i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 3.6cqw/1.1 var(--font-sans); font-style: normal; opacity: .78; }
/* statistiche vere: anno, disciplina */
.zfig-stats { left: 6cqw; right: 6cqw; bottom: 4cqw; height: 11cqw; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6cqw; align-items: end; font: 700 4.2cqw/1 var(--font-sans); }
.zfig-stats span { display: grid; gap: 1cqw; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zfig-stats i { font: 500 2.8cqw/1 var(--font-sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
/* lamina olografica e riflesso: si muovono con l'inclinazione (--fp, --gx, --gy) */
.zfig-foil { inset: 0; border-radius: inherit; background: var(--fx-foil); background-size: 320% 320%; background-position: var(--fp, 35%) 50%; mix-blend-mode: color-dodge; opacity: .26; transition: opacity var(--t-2) var(--ease-out); }
.zfig-glare { inset: 0; border-radius: inherit; background: var(--fx-glare); mix-blend-mode: soft-light; opacity: 0; transition: opacity var(--t-2) var(--ease-out); }

/* piccola (il mazzo raccolto): resta la sagoma, niente testo illeggibile */
@container (max-width: 96px) {
  .zfig-top b, .zfig-plate > *, .zfig-stats, .zfig-no, .zfig-crest { display: none; }
  .zfig-plate { height: 16cqw; top: 122cqw; }
}

/* ——— nel palco: foto nell'arco della Home, figurina sulla parete di Work (il vestito entra con il passaggio) ——— */
.zstage .zfig-frame { opacity: 0; transition: opacity var(--t-2) var(--ease-out); }
.zstage:not(.is-fig) .zfig-ph { clip-path: inset(0 round 0); }
/* da foto il vestito non esiste per il motore: niente stile, layout o pittura dei suoi nodi, nessun contenitore (il cambio
   di mondo ricalcola tutta la pagina: 40 figurine nascoste rallentavano ogni passaggio) */
.zstage:not(.is-fig) .zfig { container-type: normal; }
.zstage:not(.is-fig) .zfig-ui { opacity: 0; content-visibility: hidden; }
/* sul palco le card sono tante e in movimento: lamina senza fusione, nessun riflesso (l'album e il mazzo aperto li hanno) */
.zstage .zfig-foil { mix-blend-mode: normal; opacity: .14; }
.zstage .zfig-glare { display: none; }
.zstage:not(.is-fig) .zfig-type { padding: var(--s4); background: transparent; color: inherit; }
.zstage:not(.is-fig) .zfig-type b { font-size: var(--fs-h5); line-height: 1.05; }
.zstage.is-fig .zfig-frame { opacity: 1; }

/* ——— nell'album: girabile, inclinabile ——— */
.zalb-fig { position: absolute; inset: 0; display: block; perspective: 900px; color: inherit; text-decoration: none; border-radius: var(--r-m); }
.zalb-fig .zfig { position: absolute; inset: 0; border-radius: var(--r-m); transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--ry, 0deg) + var(--flip, 0deg))); transition: transform var(--t-3) var(--ease-sport); box-shadow: var(--shadow-2); }
.zalb-fig .zfig > * { backface-visibility: hidden; }
.zalb-fig:hover .zfig { transition-duration: var(--t-1); }
.zalb-fig:hover .zfig-glare, .zalb-fig:focus-visible .zfig-glare { opacity: .9; }
.zalb-fig:hover .zfig-foil { opacity: .4; }
.zalb-fig:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.zalb-slot.is-flip .zfig { --flip: 180deg; }
.zfig-back { inset: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 5cqw; box-sizing: border-box; padding: 7cqw 7cqw 8cqw; border-radius: inherit; background: var(--fx-sheen), var(--fc); color: var(--fon); transform: rotateY(180deg); }
.zfig-back-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 3cqw; font: 700 4cqw/1.15 var(--font-sans); }
.zfig-back-top em { font: 700 italic 4.4cqw/1.1 var(--font-voice); }
.zfig-back-top > b { font: 900 6cqw/1 var(--font-wide); }
.zfig-reason { align-self: center; font: 500 5.6cqw/1.3 var(--font-sans); letter-spacing: -.01em; text-wrap: pretty; }
.zfig-tags { display: flex; flex-wrap: wrap; gap: 1.6cqw; }
.zfig-tags i { padding: 1.4cqw 3cqw; border-radius: var(--r-pill); background: var(--fon); color: var(--fc); font: 700 3.4cqw/1 var(--font-sans); font-style: normal; }

/* ——— Work: parete ⇄ album ——— */
.zwk { position: relative; }
.zw-switch { position: sticky; top: calc(var(--shell-h) + var(--s3)); z-index: 3; height: 0; display: flex; align-items: flex-start; justify-content: center; pointer-events: none; }
.zw-seg { pointer-events: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--z-on) 12%, var(--world, var(--brand-off-white))); color: var(--z-on); box-shadow: var(--shadow-1); transition: color var(--t-2) var(--ease-out), background-color var(--t-2) var(--ease-out); }
.zw-seg button { height: 38px; padding: 0 var(--s4); border: 0; border-radius: var(--r-pill); background: none; color: inherit; font: 700 var(--fs-xs)/1 var(--font-sans); cursor: pointer; transition: background-color var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out); }
.zw-seg button[aria-pressed='true'] { background: var(--z-on); color: var(--world); }
.zw-seg button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.zw-seg button:active { transform: scale(.97); }

.zalb { position: relative; padding: calc(var(--shell-h) + var(--s7)) var(--zp) var(--s8); color: var(--brand-off-black); --em: var(--drip-ink); }
.zalb-head { max-width: 1320px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s4) var(--s6); align-items: end; margin: 0 auto var(--s6); }
.zalb-h { grid-row: span 2; margin: 0; font: 700 var(--fs-h2)/.94 var(--font-sans); letter-spacing: -.045em; text-wrap: balance; }
.zalb-h em { color: var(--em); }
.zalb-l { max-width: 46ch; margin: 0; font: 400 var(--fs-s)/1.5 var(--font-sans); text-wrap: pretty; }
.zalb-chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.zalb-chips button { display: inline-flex; align-items: center; gap: var(--s2); height: 38px; padding: 0 var(--s3) 0 var(--s4); border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; font: 700 var(--fs-xs)/1 var(--font-sans); cursor: pointer; transition: background-color var(--t-1) var(--ease-out), color var(--t-1) var(--ease-out); }
.zalb-chips button i { font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; opacity: .6; }
.zalb-chips button[aria-pressed='true'] { background: var(--brand-off-black); color: var(--brand-off-white); }
.zalb-chips button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.zalb-chips button:active { transform: scale(.97); }
/* la pagina dell'album: riquadri stampati 5:8, numerati, con la figurina attaccata appena storta */
.zalb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1320px; gap: var(--s6) var(--s5); margin: 0 auto; padding: 0; list-style: none; counter-reset: none; }
.zalb-slot { position: relative; aspect-ratio: 5 / 8; }
.zalb-print { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: var(--s2); padding: var(--s4); border-radius: var(--r-m); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand-off-black) 16%, transparent); background: color-mix(in srgb, var(--brand-off-black) 4%, transparent); text-align: center; }
.zalb-print b { font: 900 var(--fs-h2)/.9 var(--font-wide); letter-spacing: -.04em; opacity: .16; }
.zalb-print i { max-width: 18ch; font: 700 var(--fs-xs)/1.3 var(--font-sans); font-style: normal; opacity: .5; text-wrap: balance; }
.zalb-fig { transform: rotate(var(--lean)); transition: transform var(--t-3) var(--ease-sport), opacity var(--t-2) var(--ease-out); }
.zalb-slot.is-out .zalb-fig { transform: translate3d(0, -6%, 0) rotate(calc(var(--lean) * -4)) scale(.94); opacity: 0; pointer-events: none; }
.zalb-flip { position: absolute; z-index: 2; top: var(--s2); right: var(--s2); display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--brand-off-white); color: var(--brand-off-black); box-shadow: var(--shadow-2); cursor: pointer; opacity: 0; transform: scale(.86); transition: opacity var(--t-1) var(--ease-out), transform var(--t-2) var(--ease-sport); }
.zalb-slot:hover .zalb-flip, .zalb-slot:focus-within .zalb-flip, .zalb-slot.is-flip .zalb-flip { opacity: 1; transform: none; }
.zalb-slot.is-out .zalb-flip { display: none; }
.zalb-flip:focus-visible { outline: 2px solid var(--brand-off-black); outline-offset: 2px; }
@media (hover: none) { .zalb-flip { opacity: 1; transform: none; } }
/* entrata: le card del palco sono già nei riquadri; le figurine vere le sostituiscono senza salto */
.zalb:not(.is-in) .zalb-fig { opacity: 0; }
.zalb .zalb-head > * { transition: opacity var(--t-3) var(--ease-out), transform var(--t-3) var(--ease-out); }
.zalb:not(.is-open, .is-in) .zalb-head > * { opacity: 0; transform: translate3d(0, var(--s3), 0); }
.zalb.is-open .zalb-head > :nth-child(2) { transition-delay: var(--stagger); } .zalb.is-open .zalb-head > :nth-child(3) { transition-delay: calc(var(--stagger) * 2); }
.zwk.is-album + * { margin-top: 0; }
@media (max-width: 768px) {
  .zalb { padding-top: calc(var(--shell-h) + var(--s7) + var(--s4)); }
  .zalb-head { grid-template-columns: minmax(0, 1fr); }
  .zalb-h { grid-row: auto; font-size: var(--fs-h3); }
  .zalb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s3); }
  .zalb-print b { font-size: var(--fs-h3); }
  .zw-switch { top: calc(var(--shell-h) + var(--s6) + var(--s2)); }
  .zalb-flip { width: 32px; height: 32px; top: var(--s1); right: var(--s1); }
  .zalb-flip svg { width: 15px; height: 15px; }
}

/* ——— Studio: il ventaglio delle figurine verso l'album ——— */
.zalbum { align-items: center; }
/* il ventaglio aperto esce oltre il bordo sui telefoni: la sezione lo taglia in orizzontale, altrimenti il browser allarga
   la pagina e la rimpicciolisce (testata spinta fuori in fondo alla pagina) */
.zt-album { overflow-x: clip; }
.zfan { position: relative; height: min(520px, 42vw); --cw: min(200px, 14vw); }
.zfan-c { position: absolute; left: calc(50% - var(--cw) / 2); bottom: var(--s4); width: var(--cw); aspect-ratio: 5 / 8; border-radius: var(--r-m); color: inherit;
  transform-origin: 50% 135%; transform: translate3d(calc(var(--o) * var(--cw) * .3), calc(var(--o) * var(--o) * 3px), 0) rotate(calc(var(--o) * 5deg));
  transition: transform var(--t-3) var(--ease-sport); }
.zfan-c .zfig { position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow-2); }
.zfan-c:hover, .zfan-c:focus-visible { z-index: 2; transform: translate3d(calc(var(--o) * var(--cw) * .3), calc(var(--o) * var(--o) * 3px - var(--s5)), 0) rotate(calc(var(--o) * 5deg)) scale(1.04); }
.zfan-c:hover .zfig-glare, .zfan-c:focus-visible .zfig-glare { opacity: .9; }
.zfan-c:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
/* entrata: il ventaglio si apre dal mazzo quando arriva (sections.js toglie .is-pend), una figurina dopo l'altra */
.zfan .zfan-c { transition: transform var(--t-4) var(--ease-sport), opacity var(--t-2) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger) * 2); }
.zfan.is-pend .zfan-c { opacity: 0; transform: translate3d(0, var(--s6), 0) rotate(calc(var(--o) * 1deg)); }
.zfan .zfan-c:is(:hover, :focus-visible) { transition-delay: 0s; transition-duration: var(--t-2); }
@media (max-width: 768px) {
  .zfan { height: 300px; --cw: 118px; margin-top: var(--s4); }
  .zfan-c { transform: translate3d(calc(var(--o) * var(--cw) * .3), calc(var(--o) * var(--o) * 2px), 0) rotate(calc(var(--o) * 6deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .zfig-ph, .zfig-ui, .zalb-fig, .zalb-fig .zfig, .zalb .zalb-head > *, .zfan-c { transition-duration: 1ms !important; transition-delay: 0s !important; }
}