/* DOPEN · sbirciata (2026-11-02): i lavori selezionati si aprono cliccandoci sopra.
   .pk-cue = pillola «Guarda il sito» sul riquadro del lavoro (compare passandoci sopra; sul telefono sempre, in un angolo).
   .pk     = finestra a tutto schermo con il sito vero dentro una cornice da browser (computer) o da telefono;
             .is-shot quando al posto del sito si sfogliano le schermate (sito non incorporabile o non online). */

/* ---------- invito sul riquadro ---------- */
.case[data-site] .stage,.case[data-shot] .stage{cursor:pointer}
.stage:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.pk-cue{position:absolute;left:50%;top:50%;z-index:3;translate:-50% -50%;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px 0 18px;
  border-radius:999px;background:var(--ink);color:#0B0B0C;font-weight:600;font-size:15px;letter-spacing:-.01em;white-space:nowrap;pointer-events:none;
  opacity:0;scale:.9;transition:opacity .3s var(--ease),scale .45s var(--ease);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.pk-cue::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc)}
.stage:hover .pk-cue,.stage:focus-visible .pk-cue{opacity:1;scale:1}
.case:not([data-site]):not([data-shot]) .pk-cue{display:none}
@media (hover:none){.pk-cue{opacity:1;scale:1;left:12px;top:auto;bottom:12px;translate:none;min-height:36px;padding:0 14px 0 12px;font-size:13px;gap:8px}}

/* ---------- finestra ---------- */
.pk{position:fixed;inset:0;z-index:160;display:flex;flex-direction:column;background:rgba(11,11,12,.97)}
.pk[hidden]{display:none}
.pk-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.pk-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:clamp(17px,1.5vw,22px);letter-spacing:-.02em}
.pk-tools{display:flex;align-items:center;gap:8px;flex:none}
.pk-dev{display:flex;gap:2px;padding:4px;border-radius:999px;background:#1b1b1e}
.pk-dev button{min-height:36px;padding:0 16px;border:0;border-radius:999px;background:none;color:var(--mute);font:500 14px/1 var(--sans);cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
.pk-dev button[aria-pressed="true"]{background:var(--ink);color:#0B0B0C}
.pk-open{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--acc);color:#fff;font-weight:500;font-size:15px;transition:background-color .3s var(--ease),color .3s var(--ease)}
.pk-open svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8}
.pk-open[hidden]{display:none}
@media (hover:hover){.pk-open:hover{background:var(--ink);color:#0B0B0C}}
.pk-stage{flex:1;min-height:0;display:grid;place-items:center;padding:0 var(--g) var(--g)}
.pk-win{display:flex;flex-direction:column;width:min(100%,1360px);height:100%;border-radius:14px;overflow:hidden;background:#1b1b1e;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.pk-chrome{flex:none;display:flex;align-items:center;gap:7px;height:38px;padding:0 14px}
.pk-chrome i{width:11px;height:11px;border-radius:50%;background:#3a3a3f}
.pk-url{flex:0 1 420px;margin:0 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 14px;border-radius:999px;background:#111113;color:var(--mute);font:400 13px/1.2 var(--mono);text-align:center;translate:-22px 0}
.pk-frame{position:relative;flex:1;min-height:0;background:#fff}
.pk-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#fff}
.pk-load{position:absolute;inset:0;z-index:1;display:grid;place-items:center;background:var(--bg2)}
.pk-load[hidden]{display:none}
.pk-load svg{width:44px;height:44px;overflow:visible;animation:pkSpin 1.1s linear infinite}
.pk-load path{fill:none;stroke:var(--ink);stroke-width:13;stroke-linecap:round}
.pk-load circle{fill:var(--acc)}
@keyframes pkSpin{to{transform:rotate(360deg)}}
/* schermate al posto del sito: si scorrono dentro la finestra */
.pk-shot{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;background:#111113}
.pk-shot img{display:block;width:100%;height:auto}
.pk-shot img+img{margin-top:2px}
.pk.is-shot .pk-dev{display:none}

/* telefono: cornice stretta con bordo scuro, senza barra del browser */
.pk.is-m .pk-win{width:min(100%,410px);height:min(100%,864px);border-radius:44px;border:10px solid #1b1b1e;background:#000}
.pk.is-m .pk-chrome{display:none}
.pk.is-m .pk-frame{border-radius:34px;overflow:hidden}
@media (max-width:699px){
  .pk-dev{display:none}
  .pk-open span{display:none}
  .pk-open{padding:0 14px}
  .pk-win{border-radius:12px}
}

/* entrata e uscita */
.pk.is-in{animation:pkFade .35s var(--ease) both}
.pk.is-in .pk-win{animation:pkRise .7s var(--ease) both}
.pk.is-out{animation:pkFade .3s var(--ease) reverse both}
@keyframes pkFade{from{opacity:0}}
@keyframes pkRise{from{opacity:0;transform:translateY(36px) scale(.985)}}
@media (prefers-reduced-motion:reduce){.pk.is-in,.pk.is-in .pk-win,.pk.is-out,.pk-load svg{animation:none}}