:root {
  --bg: #DADADA;
  --ink: #1d1d1d;
  --paper: #FDFCF9;
  --red: #9d1c2f;
  --ease: cubic-bezier(.7, 0, .2, 1);
  --zoom-ms: 1050ms;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }

/* ---------- Scrivania ---------- */

#desk { position: fixed; inset: 0; overflow: hidden; }

#world {
  position: absolute;
  left: 0; top: 0;
  transform-origin: 0 0;
  transition: transform var(--zoom-ms) var(--ease), opacity .9s ease;
  will-change: transform;
  opacity: 0;
}
#world.ready { opacity: 1; }

.obj {
  position: absolute;
  pointer-events: none;
  transition: opacity .7s ease;
}
.par { position: absolute; inset: 0; will-change: transform; }

.obj img {
  display: block;
  width: 100%; height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.hit {
  position: absolute;
  pointer-events: auto;
  padding: 0; margin: 0;
  background: none; border: 0;
  border-radius: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hit:focus-visible { outline: 2px solid var(--red); outline-offset: 8px; }

/* oggetti non attivi quando si è in zoom su uno di loro */
#world.zoomed .obj:not(.active) { opacity: 0; }
#world.zoomed .obj:not(.active) .hit { pointer-events: none; }

/* leggero sollevamento in hover */
.obj .idle { transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .35s ease; }
.obj.is-hover .idle { transform: scale(1.012); }

/* ---------- Cuffie ---------- */

.rig {
  position: absolute;
  pointer-events: none;
  transition: transform 1s var(--ease);
}
.rig img {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .4s ease;
}
.rig .sh {
  mix-blend-mode: multiply;
  filter: brightness(0) blur(var(--b, 5px));
  transform: translate(var(--sx, 5px), var(--sy, 8px));
  transition: opacity .9s ease, filter 1s var(--ease), transform 1s var(--ease);
}
.bob { position: absolute; inset: 0; }

.cuffie.on .idle { opacity: 0; }
.cuffie.on .rig .giu { opacity: 1; }
.cuffie.on .rig .sh  { opacity: .34; }

.cuffie.up .rig { transform: translateY(-2.6%) scale(1.06); }
.cuffie.up .rig .giu { opacity: 0; }
.cuffie.up .rig .su  { opacity: 1; }
.cuffie.up .rig .sh  { --b: 16px; --sx: 22px; --sy: 38px; opacity: .2; }
.cuffie.up .bob { animation: bob 5.6s ease-in-out infinite; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-1.4%) rotate(.55deg); }
}

/* ---------- Tooltip e note ---------- */

#tip {
  position: fixed; left: 0; top: 0;
  z-index: 5;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--ink);
  color: #f3f1ec;
  font-size: 13px;
  letter-spacing: .01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
#tip.show { opacity: 1; }

.ui { z-index: 10; }

#note {
  position: fixed; left: 50%; bottom: 7vh;
  margin: 0;
  transform: translate(-50%, 8px);
  padding: 10px 18px;
  border-radius: 99px;
  background: var(--paper);
  font-size: 14px;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease, transform .5s ease;
}
#note.show { opacity: 1; transform: translate(-50%, 0); }

#close {
  position: fixed; top: 22px; right: 22px;
  width: 46px; height: 46px;
  border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper);
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .4);
}
#close[hidden], #music[hidden] { display: none; }

#music {
  position: fixed; left: 22px; bottom: 22px;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px 11px 14px;
  border: 0; border-radius: 99px;
  background: var(--ink);
  color: #f3f1ec;
  font-size: 13px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  :root { --zoom-ms: 1ms; }
  .cuffie.up .bob { animation: none; }
}

/* ---------- PC: coperchio 3D e progetti sullo schermo ---------- */

.persp { position: absolute; inset: 0; }
.lap { position: absolute; inset: 0; transform-style: preserve-3d; }
.lap > * { position: absolute; }

.lap .shadowimg { transform: translateZ(-6px); pointer-events: none; }
.lap .sh-open { opacity: 0; }
.lap .part { transform: translateZ(-2px); }
.lap img { display: block; width: 100%; height: 100%; }

.lid {
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
}
.face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.face.back { transform: rotateX(180deg); }
.shade {
  position: absolute; inset: 0;
  background: #000;
  opacity: .05;
  pointer-events: none;
}

.screen {
  position: absolute;
  overflow: hidden;
  container-type: size;
  pointer-events: none;
}
.win {
  position: absolute;
  left: 7.7%; top: 14.4%;
  width: 84.6%; height: 65.8%;
  border-radius: 1.3cqw;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 1.4cqw 3.6cqw -1.2cqw rgba(40, 25, 15, .45), 0 .2cqw .8cqw rgba(40, 25, 15, .25);
  opacity: 0;
  pointer-events: none;
}
.win.on { opacity: 1; }
.win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.arrow {
  position: absolute; top: 47%;
  width: 5.4cqw; height: 5.4cqw;
  margin-top: -2.7cqw;
  padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 .8cqw 2cqw -.8cqw rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease .4s, transform .25s ease, background .25s ease, color .25s ease;
}
.arrow svg { width: 55%; height: 55%; }
.arrow.prev { left: 1.2cqw; }
.arrow.next { right: 1.2cqw; }
.screen.on .arrow { opacity: 1; pointer-events: auto; }
.arrow:hover { transform: scale(1.08); background: var(--red); color: #fff; }
.arrow:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* clic sull'oggetto attivo: non deve chiudere */
.obj.active img, .obj.active .screen.on, .obj.active .arrow { pointer-events: auto; }
.obj.active .shadowimg, .obj.active .rig img { pointer-events: none; }

/* ---------- Fotocamera: giro fronte/retro e foto sullo schermo LCD ---------- */

.cpersp { position: absolute; }
.card { position: absolute; inset: 0; }
.cface {
  position: absolute; inset: 0;
  transition: opacity .4s ease;
}
/* nessuna rotazione: il retro sostituisce il fronte con una dissolvenza breve */
.cface.back { opacity: 0; }
.obj.camera.turned .cface.back { opacity: 1; }
.obj.camera.turned .cface.front { opacity: 0; }

/* le foto occupano tutto lo schermo LCD */
.lcd { border-radius: .5cqw; background: #101012; }
.lcd .win {
  left: 0; top: 0; width: 100%; height: 100%;
  border-radius: 0;
  box-shadow: none;
  background: #101012;
}
/* leggero riflesso sul vetro, sopra la foto ma sotto le frecce */
.lcd::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, 0) 38%);
  box-shadow: inset 0 0 1.6cqw rgba(0, 0, 0, .55);
  pointer-events: none;
}
.lcd .arrow {
  top: 50%;
  width: 8cqw; height: 8cqw;
  margin-top: -4cqw;
  background: rgba(253, 252, 249, .88);
  z-index: 2;
}
.lcd .arrow.prev { left: 2cqw; }
.lcd .arrow.next { right: 2cqw; }

/* quando la camera è attiva i clic vanno alle frecce, non al pulsante-area */
.obj.camera.active .hit { pointer-events: none; }

/* ---------- Sketchbook: fotogrammi sovrapposti e navigazione ---------- */

/* il palco ha la dimensione dei fotogrammi (layout.js -> sketchbook.frame) */
.sb-stage { position: absolute; pointer-events: none; }
.sb-frame {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* area cliccabile sul libro aperto: metà sinistra = indietro, metà destra = avanti */
.sb-hit { position: absolute; pointer-events: none; touch-action: none; }
.sb-stage.live .sb-hit { pointer-events: auto; cursor: pointer; }

/* a sketchbook attivo il pulsante-area e l'immagine statica non intercettano i clic:
   fuori dal libro il clic chiude, sul libro sfoglia */
.obj.sketchbook.active .hit,
.obj.sketchbook.active img { pointer-events: none; }

.sb-nav {
  position: fixed; top: 50%;
  width: 46px; height: 46px; margin-top: -23px;
  padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .4);
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease, transform .25s ease, background .25s ease, color .25s ease;
}
.sb-nav svg { width: 22px; height: 22px; }
.sb-nav.prev { left: 22px; }
.sb-nav.next { right: 22px; }
.sb-nav.on { opacity: 1; pointer-events: auto; }
.sb-nav.on:not(.off):hover { transform: scale(1.08); background: var(--red); color: #fff; }
/* agli estremi la freccia resta nella pagina ma non fa nulla (e non chiude) */
.sb-nav.on.off { opacity: .25; cursor: default; }
.sb-nav:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

@media (max-width: 700px) {
  .sb-nav { width: 40px; height: 40px; margin-top: -20px; }
  .sb-nav.prev { left: 10px; }
  .sb-nav.next { right: 10px; }
}

/* ---------- Lampada: spenta di partenza, accesa con un clic ---------- */

.lamp-wrap { position: absolute; inset: 0; transform-origin: 50% 50%; }
.lamp-wrap img { position: absolute; inset: 0; }
.lamp-on { opacity: 0; transition: opacity .35s ease; }
.obj.lampada.lit .lamp-on { opacity: 1; }

/* tinta calda uniforme su tutta la scena quando la lampada è accesa
   --lamp-tint = colore, --lamp-tint-alpha = trasparenza (0.20 = 20%) */
:root {
  --lamp-tint: 255, 170, 80;
  --lamp-tint-alpha: .20;
}
.wash {
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(var(--lamp-tint), var(--lamp-tint-alpha));
  opacity: 0;
  transition: opacity .7s ease;
}
.wash.on { opacity: 1; }