* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
#stage { position: fixed; inset: 0; }

.layer {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  will-change: opacity;
}
.layer.show { opacity: 1; }

/* blurred fill behind off-aspect images so the frame is never black-barred */
.bg {
  position: absolute; inset: -4%;
  background-size: cover; background-position: center;
  filter: blur(40px) brightness(.45) saturate(1.1);
  transform: scale(1.12);
}

/* the image itself — fills the screen by default (app.js switches very off-aspect
   pieces back to "contain" so panoramas/portraits aren't badly cropped) */
.pic {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: drift 24s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: scale(1.0) translate(0, 0); }
  to   { transform: scale(1.05) translate(0.6%, -0.6%); }
}

#err {
  position: fixed; left: 12px; bottom: 10px;
  color: #555; font: 12px -apple-system, system-ui, sans-serif;
  opacity: .0; transition: opacity .3s;
}