html,body { margin:0; height:100%; overflow:hidden; background:#111; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }
#controls {
  position:fixed; top:12px; left:12px; right:12px; z-index:5;
  display:flex; gap:8px; align-items:center;
  background:rgba(0,0,0,.35); color:#eee; padding:8px 10px; border-radius:12px; backdrop-filter: blur(6px);
}
#controls select, #controls button { padding:6px 10px; border-radius:8px; border:0; }
#stage { position:fixed; inset:0; }

.frame {
  position:absolute; border-radius:14px; overflow:hidden; opacity:0;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  transition:opacity 1.5s ease-in-out;
}
.frame img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform-origin:center;
  animation: kenburns 24s linear infinite;
}

@keyframes kenburns {
  0%   { transform: scale(1.05) translate(0,0); }
  50%  { transform: scale(1.10) translate(-2%,-2%); }
  100% { transform: scale(1.05) translate(0,0); }
}