/* Sito DRIP Studio · il mazzo (deck.js): raccolto in basso a destra, aperto come parete curva sul campo del capitolo.
   Superfici editoriali 5:8 con il raggio del marchio, mai carte da gioco. Solo ruoli e token di drip-system.css. */

/* ——— raccolto ——— */
.zdeck { position: fixed; z-index: 37; right: var(--zp); bottom: calc(var(--s4) + env(safe-area-inset-bottom)); pointer-events: none;
  transition: transform var(--t-3) var(--ease-io), opacity var(--t-2) var(--ease-out), visibility 0s linear 0s; }
.zdeck-b { pointer-events: auto; display: flex; align-items: flex-end; gap: var(--s3); padding: var(--s2); margin: calc(var(--s2) * -1); border: 0; border-radius: var(--r-m); background: none; color: var(--brand-off-black); cursor: pointer; }
.zdeck-b:focus-visible { outline: 2px solid var(--brand-cobalt); outline-offset: 2px; }
.zdeck-l { display: grid; justify-items: end; gap: 2px; padding: var(--s1) var(--s3); border-radius: var(--r-pill); background: var(--brand-off-white); color: var(--brand-off-black); box-shadow: var(--shadow-2); font: 700 var(--fs-2xs)/1.15 var(--font-sans); letter-spacing: .02em; transition: opacity var(--t-2) var(--ease-out), transform var(--t-2) var(--ease-out); }
.zdeck-l i { font-style: normal; font-weight: 500; opacity: .6; }
.zdeck-s { position: relative; width: 44px; height: 70px; perspective: 420px; transition: scale var(--t-1) var(--ease-out); }
.zdeck-c { position: absolute; inset: 0; display: flex; align-items: flex-end; border-radius: var(--r-s); overflow: hidden; box-shadow: var(--shadow-2);
  transform: translate3d(calc((var(--k) - 2) * 6px), calc((var(--k) - 2) * 2.5px), calc((var(--k) - 2) * 10px)) rotateY(-16deg) rotateX(6deg) rotate(calc(var(--k) * 5.5deg - 9deg));
  transition: transform var(--t-3) var(--ease-out), translate var(--t-3) var(--ease-out) calc(var(--k) * var(--stagger) * 4), opacity var(--t-2) var(--ease-out) calc(var(--k) * var(--stagger) * 4), rotate var(--t-1) var(--ease-io); }
.zdeck-c img { width: 100%; height: 100%; object-fit: cover; }
.zdeck-c .zdk-name { padding: 4px; font: 700 7px/1 var(--font-sans); letter-spacing: -.02em; }
.zdeck-c.is-turn { rotate: y 90deg; }
/* vicino al puntatore il mazzo si apre appena: le card si separano e si sollevano */
@media (hover: hover) and (pointer: fine) {
  .zdeck-b:hover .zdeck-c, .zdeck-b:focus-visible .zdeck-c { transform: translate3d(calc((var(--k) - 2) * 15px), calc((var(--k) - 2) * 6px - 4px), calc((var(--k) - 2) * 14px)) rotateY(-10deg) rotateX(4deg) rotate(calc(var(--k) * 9deg - 16deg)); }
}
.zdeck.is-press .zdeck-s { scale: .92; }
/* aperto: le card raccolte sono diventate la parete */
.zdeck.is-gone .zdeck-s, .zdeck.is-gone .zdeck-l { visibility: hidden; }
/* …e il pulsante non c'è più: sotto la parete non si punta, non si mette a fuoco, il cursore non ci si aggancia */
.zdeck.is-gone .zdeck-b { visibility: hidden; pointer-events: none; }
/* prima comparsa: le card si posano dal bordo una dopo l'altra */
.zdeck:not(.is-in) .zdeck-c { translate: 0 140%; opacity: 0; }
.zdeck.is-instant, .zdeck.is-instant * { transition: none !important; }
/* fuori scena: nessun mazzo (Work, moduli, form), in cima alla Home (l'arco è il mazzo), sul piede (la storia finisce) */
.zdeck.is-off, .zdeck.is-tucked, .zdeck.is-rest { opacity: 0; transform: translate3d(0, var(--s6), 0); visibility: hidden; transition: transform var(--t-3) var(--ease-io), opacity var(--t-2) var(--ease-out), visibility 0s linear var(--t-3); }
.zdeck.is-measure, .zdeck.is-measure * { transition: none !important; }
.zdeck.is-measure { transform: none !important; }
.zdeck.is-measure .zdeck-c { translate: none !important; }
/* il menu comprime il mazzo; i cookie e i dialoghi hanno la precedenza */
html.z-menu-on .zdeck { opacity: 0; transform: scale(.86); pointer-events: none; }
body:has(.consent.on) .zdeck, body:has(.cg-panel:not([hidden])) .zdeck { opacity: 0; pointer-events: none; visibility: hidden; }
@media (max-width: 768px) {
  .zdeck { right: var(--s3); bottom: calc(var(--s3) + env(safe-area-inset-bottom)); }
  .zdeck-l { display: none; }
  .zdeck-s { width: 34px; height: 54px; }
  .zdeck-c:first-child { display: none; } /* al telefono due card: lo stesso mazzo, meno ingombro */
}

/* ——— aperto: una parete curva di superfici sul campo del capitolo ——— */
.zdeck-sheet { position: fixed; inset: 0; z-index: 29; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--shell-h) + var(--s3)) 0 var(--s5); overflow: hidden; color: var(--dk-on);
  --ch: min(54svh, 540px); --cw: calc(var(--ch) * .625); }
.zdeck-sheet[hidden] { display: none; }
.zdeck-bg { position: absolute; inset: 0; background: var(--dk); clip-path: circle(0 at 100% 100%); }
.zdeck-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: 0 var(--zp); }
.zdeck-h { margin: 0; font: 700 var(--fs-s)/1 var(--font-sans); }
.zdeck-tabs { display: flex; gap: var(--s1); }
.zdeck-tabs button, .zdeck-x { display: inline-flex; align-items: center; gap: var(--s2); height: 44px; 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); }
.zdeck-tabs button i { font-style: normal; font-weight: 500; opacity: .6; }
.zdeck-tabs button[aria-selected='true'] { background: var(--dk-on); color: var(--dk); }
.zdeck-x { background: color-mix(in srgb, currentColor 12%, transparent); }
.zdeck-x i { position: relative; width: 12px; height: 12px; }
.zdeck-x i::before, .zdeck-x i::after { content: ''; position: absolute; left: 0; right: 0; top: calc(50% - .75px); height: 1.5px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.zdeck-x i::after { transform: rotate(-45deg); }
.zdeck-tabs button:focus-visible, .zdeck-x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.zdeck-track { position: relative; display: flex; align-items: center; gap: var(--s5); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
  padding: 0 calc(50vw - var(--cw) / 2) var(--s7) var(--zp); }
.zdeck-track::-webkit-scrollbar { display: none; }
.zdeck-card { position: relative; flex: 0 0 var(--cw); height: var(--ch); padding: 0; border: 0; background: none; color: inherit; text-align: left; text-decoration: none; scroll-snap-align: center; transform-origin: 50% 50%; will-change: transform, opacity; cursor: pointer; }
.zdeck-f { position: absolute; inset: 0; display: flex; align-items: flex-end; border-radius: var(--r-m); overflow: hidden; box-shadow: var(--shadow-3); }
.zdeck-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zdk-name { position: relative; padding: var(--s4); font: 700 var(--fs-h4)/1 var(--font-sans); letter-spacing: -.03em; text-wrap: balance; }
.zdeck-card:focus-visible { outline: none; }
.zdeck-card:focus-visible .zdeck-f { outline: 2px solid currentColor; outline-offset: 5px; }
.zdeck-card[aria-current] .zdeck-f { outline: 2px solid currentColor; outline-offset: 5px; }
.zdeck-cap { position: absolute; left: 0; right: 0; top: calc(100% + var(--s3)); display: grid; gap: 2px; opacity: 0; transform: translate3d(0, var(--s2), 0); transition: opacity var(--t-2) var(--ease-out), transform var(--t-3) var(--ease-out); }
.zdeck-sheet.is-labels .zdeck-cap { opacity: 1; transform: none; }
.zdeck-cap b { font: 700 var(--fs-s)/1.2 var(--font-sans); letter-spacing: -.01em; }
.zdeck-cap i { font: 400 var(--fs-xs)/1.3 var(--font-sans); font-style: normal; opacity: .72; }
.zdeck-foot { position: relative; display: flex; justify-content: center; align-items: center; min-height: 48px; padding: 0 var(--zp); }
.zdeck-foot p { margin: 0; font: 500 var(--fs-xs)/1 var(--font-sans); opacity: .7; }
.zdeck-foot .zbtn { background: var(--dk-on); color: var(--dk) !important; }
html.z-deck-on .zhd { background: transparent !important; box-shadow: none !important; color: var(--dk-on) !important; }
html.z-deck-on body { overflow: hidden; }
@media (max-width: 768px) {
  .zdeck-sheet { --ch: min(58svh, calc(78vw * 1.6)); }
  .zdeck-top { flex-wrap: wrap; }
  .zdeck-x span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .zdeck-x { width: 44px; padding: 0; justify-content: center; }
}

/* ——— i campioni del sistema come superfici (mazzo della pagina Brand) ——— */
.zdk-sw { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.zdk-aa { position: absolute; inset: 0; display: grid; place-items: center; font: 700 calc(var(--cw) * .55)/.8 var(--font-sans); letter-spacing: -.05em; }
.zdeck-c .zdk-aa { font-size: 24px; }
.zdk-gold { position: absolute; inset: var(--s4); display: grid; align-content: end; gap: var(--s1); font: 700 var(--fs-h5)/1 var(--font-sans); }
.zdk-gold i { font-style: normal; }
.zdk-gold i:nth-child(1) { font-size: 1.6em; }
.zdeck-c .zdk-gold { inset: 4px; font-size: 7px; }
.zdk-mark { position: absolute; inset: 0; display: grid; place-items: center; }
.zdk-m { width: 42%; height: auto; }
.zdk-pass { position: absolute; inset: 0; background: currentColor; clip-path: polygon(0 62%, 100% 48%, 100% 100%, 0 100%); }

/* ——— la superficie scelta che diventa la pagina ——— */
.zdeck-fly { position: fixed; inset: 0; z-index: 36; display: flex; align-items: flex-end; overflow: hidden; transform-origin: 50% 50%; will-change: transform, clip-path; pointer-events: none; }
.zdeck-fly img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zdeck-fly .zdk-name { padding: var(--zp); font-size: var(--fs-h1); }

@media (prefers-reduced-motion: reduce) {
  .zdeck, .zdeck *, .zdeck-cap { transition-duration: 1ms !important; transition-delay: 0s !important; }
}