/* ==========================================================
   L'ufficio che vive da solo: rig a pezzi, idle, scenette, ambiente
   ========================================================== */
.scena { contain: layout paint; }

/* Cielo vivo dietro le aperture */
.apertura .nuvole { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.apertura .nuvola { position: absolute; left: -40%; animation: nuvola linear infinite; filter: blur(.5px); }
.apertura .nuvola svg { width: 100%; height: auto; display: block; }
@keyframes nuvola { from { transform: translateX(0); } to { transform: translateX(400%); } }
.apertura .tinta-ora { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; transition: opacity 2s, background 2s; }
.apertura .uccello { position: absolute; left: 0; width: 6%; pointer-events: none; }
.apertura .uccello .ala { animation: ala .35s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes ala { from { transform: scaleY(1); } to { transform: scaleY(.3); } }

/* Ventola del condizionatore */
.ventola { pointer-events: none; }
.ventola svg { width: 100%; height: 100%; }
.ventola .pale { transform-origin: 20px 20px; animation: ventola 1.6s linear infinite; }
@keyframes ventola { to { transform: rotate(360deg); } }

/* Buio quando la lampadina salta */
.buio { z-index: 24; background: #05070f; opacity: 0; pointer-events: none; transition: opacity .15s; }
.buio.attivo { opacity: .93; }
.lampadina.spenta { opacity: 0 !important; animation: none; }
.lucina.forte { opacity: 1; animation: lampeggio .3s steps(2) 6; }

/* Bacheca: puntina che cade, foglio che penzola */
.penzola { pointer-events: none; z-index: 11; opacity: 0; }
.penzola b { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fdf7e6; box-shadow: 0 2px 4px rgba(0,0,0,.3); transform-origin: 10% 0; }
.penzola .puntina-caduta { position: absolute; left: 60%; top: -6%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: var(--rosso); box-shadow: 0 0 0 2px #fff; }
.penzola.attiva { opacity: 1; }
.penzola.attiva .puntina-caduta { animation: cade 1.4s cubic-bezier(.4,0,.8,1) forwards; }
.penzola.attiva b { animation: penzola 2.6s ease-in-out .2s infinite alternate; }
@keyframes cade { 30% { transform: translateY(0) rotate(0); } 100% { transform: translateY(900%) rotate(200deg); opacity: 0; } }
@keyframes penzola { from { transform: rotate(-14deg); } to { transform: rotate(-4deg); } }

/* ---------- Rig a pezzi ---------- */
.pg .corpo { position: relative; width: 100%; aspect-ratio: 1; }
.pg .corpo > div { position: absolute; }
.pg .corpo svg, .pg .corpo img { width: 100%; height: 100%; display: block; }
.pg .busto { z-index: 2; transform-origin: 50% 100%; }
.pg .braccio { z-index: 1; transform-origin: 50% 0; transition: transform .35s ease; }
.pg .braccio.dx { z-index: 3; }
.pg .testa { z-index: 4; transform-origin: 50% 90%; transform: rotate(var(--giro, 0deg)); transition: transform .6s ease; }
.pg .occhi, .pg .bocca { position: absolute; inset: 0; opacity: 0; }
.pg .occhi.chiusi { opacity: 1; }
.pg .bocca.aperta { opacity: 1; }
.pg .in-mano { z-index: 5; opacity: 0; transition: opacity .2s; transform-origin: 50% 100%; }
.pg .in-mano.pieno { opacity: 1; }
.pg .in-mano svg, .pg .in-mano img { width: 100%; height: 100%; }
.pg .cartello { z-index: 6; }

/* respiro (unica cosa che resta con prefers-reduced-motion) */
.pg .corpo { animation: respiro var(--respiro, 4s) ease-in-out var(--delay, 0s) infinite; transform-origin: 50% 100%; }

/* vita di base */
.pg.scrive .braccio.sx { animation: batte-sx .22s ease-in-out infinite alternate; }
.pg.scrive .braccio.dx { animation: batte-dx .2s ease-in-out .1s infinite alternate; }
@keyframes batte-sx { from { transform: rotate(-38deg) translateY(0); } to { transform: rotate(-30deg) translateY(-3%); } }
@keyframes batte-dx { from { transform: rotate(38deg) translateY(0); } to { transform: rotate(30deg) translateY(-3%); } }
.scena.chiusura .foglio { animation-duration: 1.2s; }
.pg.beve .braccio.dx { transform: rotate(-150deg); }
.pg.beve .in-mano { transform: translate(-10%, -210%) rotate(-20deg); }
.pg.gira .braccio.dx { animation: gira .8s ease-in-out infinite alternate; }
.pg.gira .in-mano { animation: gira-oggetto 1.6s linear infinite; }
@keyframes gira { from { transform: rotate(-70deg); } to { transform: rotate(-95deg); } }
@keyframes gira-oggetto { to { transform: translateY(-120%) rotate(360deg); } }
.pg.sospira .testa { animation: sospiro 1.5s ease-in-out; }
.pg.sospira .busto { animation: spalle 1.5s ease-in-out; }
@keyframes sospiro { 30% { transform: rotate(var(--giro, 0deg)) translateY(-6%) rotate(-6deg); } 70% { transform: rotate(var(--giro, 0deg)) translateY(2%); } }
@keyframes spalle { 30% { transform: translateY(-4%); } 70% { transform: translateY(1%); } }
.pg.guarda-via .testa { transition: transform .5s ease; }

/* camminata */
.pg.cammina .corpo { animation: cammina .42s ease-in-out infinite alternate; }
.pg.cammina.corre .corpo { animation-duration: .24s; }
.pg.cammina .braccio.sx { animation: passo-sx .42s ease-in-out infinite alternate; }
.pg.cammina .braccio.dx { animation: passo-dx .42s ease-in-out infinite alternate; }
@keyframes cammina { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-4%) rotate(1.5deg); } }
@keyframes passo-sx { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes passo-dx { from { transform: rotate(22deg); } to { transform: rotate(-22deg); } }

/* pose */
.pg.posa-lavoro .braccio.sx { transform: rotate(-34deg); } .pg.posa-lavoro .braccio.dx { transform: rotate(34deg); }
.pg.posa-scrive-veloce .braccio.sx { animation: batte-sx .12s ease-in-out infinite alternate; }
.pg.posa-scrive-veloce .braccio.dx { animation: batte-dx .11s ease-in-out .05s infinite alternate; }
.pg.posa-scrive-veloce .testa { transform: rotate(var(--giro, 0deg)) translateY(4%); }
.pg.posa-contento .braccio.sx { transform: rotate(-150deg); } .pg.posa-contento .braccio.dx { transform: rotate(150deg); }
.pg.posa-contento .corpo { animation: respiro var(--respiro, 4s) ease-in-out infinite, salto .7s ease-out 2; }
.pg.posa-contento .bocca { opacity: 1; }
.pg.posa-braccia-su .braccio.sx { transform: rotate(-165deg); } .pg.posa-braccia-su .braccio.dx { transform: rotate(165deg); }
.pg.posa-braccia-su .bocca { opacity: 1; }
.pg.posa-colpito .corpo { animation: respiro var(--respiro, 4s) ease-in-out infinite, scossa .5s ease-in-out 2; }
.pg.posa-colpito .testa { transform: rotate(var(--giro, 0deg)) rotate(-12deg); }
.pg.posa-colpito .braccio.sx { transform: rotate(-120deg); } .pg.posa-colpito .braccio.dx { transform: rotate(60deg); }
.pg.posa-colpito .bocca { opacity: 1; }
.pg.posa-sciopero .braccio.dx { transform: rotate(-178deg); }
.pg.posa-inchino .corpo { animation: respiro var(--respiro, 4s) ease-in-out infinite, inchino 1.4s ease-in-out; }
.pg.posa-inchino .braccio.sx { transform: rotate(-60deg); } .pg.posa-inchino .braccio.dx { transform: rotate(60deg); }
.pg.posa-sudore .testa { transform: rotate(var(--giro, 0deg)) translateY(-3%); }
.pg.posa-sudore .braccio.dx { transform: rotate(-130deg) translateX(30%); }
.pg.posa-testa-bassa .testa { transform: rotate(var(--giro, 0deg)) translateY(8%) rotate(10deg); }
.pg.posa-testa-bassa .braccio.sx, .pg.posa-testa-bassa .braccio.dx { transform: rotate(0); }
.pg.posa-legge .braccio.sx { transform: rotate(-110deg); } .pg.posa-legge .braccio.dx { transform: rotate(110deg); }
.pg.posa-legge .in-mano { transform: translate(-60%, -120%) scale(1.3); }
.pg.posa-legge .testa { transform: rotate(var(--giro, 0deg)) translateY(5%); }
.pg.posa-balla .corpo { animation: balla .4s ease-in-out infinite alternate; }
.pg.posa-balla .braccio.sx { animation: passo-sx .4s ease-in-out infinite alternate; } .pg.posa-balla .braccio.dx { animation: passo-dx .4s ease-in-out .2s infinite alternate; }
@keyframes balla { from { transform: translateX(-4%) rotate(-5deg); } to { transform: translateX(4%) rotate(5deg); } }
.pg.posa-indica .braccio.dx { transform: rotate(-95deg); }
.pg.posa-indica .testa { transform: rotate(var(--giro, 0deg)) translateX(-4%); }
.pg.posa-saluta .braccio.dx { animation: saluta .35s ease-in-out infinite alternate; }
@keyframes saluta { from { transform: rotate(-160deg); } to { transform: rotate(-190deg); } }
.pg.posa-beve .braccio.dx { transform: rotate(-150deg); }
.pg.posa-beve .in-mano { transform: translate(-10%, -210%) rotate(-20deg); }
.pg.posa-ride .busto { animation: ride .18s ease-in-out infinite alternate; }
.pg.posa-ride .testa { transform: rotate(var(--giro, 0deg)) translateY(-4%) rotate(-5deg); }
.pg.posa-ride .bocca { opacity: 1; }
@keyframes ride { from { transform: translateY(0); } to { transform: translateY(-3%); } }
.pg.posa-scuote .testa { animation: scuote .5s ease-in-out 3; }
@keyframes scuote { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.pg.posa-appallottola .braccio.sx { animation: appallottola .3s ease-in-out 4 alternate; }
.pg.posa-appallottola .braccio.dx { animation: appallottola .3s ease-in-out .15s 4 alternate-reverse; }
@keyframes appallottola { from { transform: rotate(-80deg); } to { transform: rotate(-110deg); } }
.pg.posa-colpo .braccio.dx { animation: colpo .5s ease-in; }
@keyframes colpo { 0% { transform: rotate(-170deg); } 60% { transform: rotate(-170deg); } 100% { transform: rotate(40deg); } }
.pg.posa-scatto .corpo { animation: scatto .7s ease-out; }
@keyframes scatto { 30% { transform: translateY(-12%) scaleY(1.05); } 100% { transform: translateY(0); } }
.pg .sudore { position: absolute; z-index: 7; font-size: clamp(10px, 1.3vw, 20px); animation: sudore 1.4s ease-in forwards; }

/* fogli che volano */
.foglio-vola { pointer-events: none; z-index: 14; width: 2%; aspect-ratio: 1.3; background: #fdf7e6; box-shadow: 0 1px 3px rgba(0,0,0,.3); }

/* stampante inceppata, fumo */
.oggetto.inceppata { animation: trema .3s ease-in-out infinite; }
.fumo { pointer-events: none; z-index: 13; }
.fumo::before, .fumo::after { content: ''; position: absolute; left: 30%; top: -20%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: rgba(90,80,70,.55); filter: blur(4px); animation: fumo 1.2s ease-out infinite; }
.fumo::after { left: 55%; animation-delay: .5s; }
@keyframes fumo { from { transform: translateY(0) scale(.5); opacity: .9; } to { transform: translateY(-160%) scale(1.8); opacity: 0; } }

/* il gatto che cammina e si sdraia */
.gatto.cammina { animation: gatto-cammina .5s ease-in-out infinite alternate; }
.gatto.cammina svg { transform: scaleX(-1); }
@keyframes gatto-cammina { from { transform: translateY(0); } to { transform: translateY(-5%); } }
.gatto.sdraiato svg, .gatto.sdraiato img { transform: scaleY(.6) translateY(30%); }

.pg.in-scenetta .etichetta { display: none; }
.scena.pausa .pg .corpo, .scena.pausa .nuvola, .scena.pausa .ventola .pale { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .pg .corpo { animation: respiro 4s ease-in-out infinite !important; }
  .nuvola, .ventola .pale, .pg .braccio, .pg .testa { animation: none !important; }
}