/* Decorative 3D scene. All interactive controls remain ordinary HTML. */
.cinematic-scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  height: clamp(280px, 30vw, 410px);
  overflow: hidden;
  border: 1px solid rgb(141 179 196 / 13%);
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 72% 35%, rgb(126 91 41 / 17%), transparent 50%),
    radial-gradient(ellipse at 25% 70%, rgb(23 88 101 / 18%), transparent 57%),
    #0b121c;
  contain: layout paint;
}
.cinematic-scene::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 3;
  border: 1px solid rgb(145 169 187 / 8%);
  pointer-events: none;
  border-radius: 7px;
}
.cinematic-scene canvas,
.cinematic-scene .scene-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}
.cinematic-scene canvas { opacity: 0; transition: opacity .45s ease; }
.cinematic-scene.is-rendered canvas { opacity: 1; }
.cinematic-scene.is-rendered .scene-fallback { visibility: hidden; }
.cinematic-scene .scene-caption {
  position: absolute;
  bottom: 22px;
  left: 25px;
  z-index: 4;
  color: #a6b5c4;
  font: 500 9px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .2em;
  pointer-events: none;
}
.cinematic-scene .scene-caption::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 9px;
  border-radius: 50%;
  background: #dfb573;
  box-shadow: 0 0 10px rgb(223 181 115 / 50%);
  vertical-align: 1px;
}
.cinematic-scene .scene-motion {
  position: absolute;
  right: 20px;
  bottom: 17px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #364550;
  border-radius: 7px;
  background: rgb(11 18 28 / 91%);
  color: #b4c3cf;
  font: 500 10px/1.4 "Inter", "Prompt", sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}
.cinematic-scene .scene-motion:hover { border-color: #af8650; color: #eed6ae; }
.cinematic-scene .scene-motion:focus-visible { outline: 2px solid #efc082; outline-offset: 3px; }
.cinematic-scene .scene-motion[hidden] { display: none; }
@media (max-width: 640px) {
  .cinematic-scene { height: 260px; border-radius: 13px; }
  .cinematic-scene .scene-caption { left: 19px; bottom: 21px; font-size: 8px; letter-spacing: .12em; }
  .cinematic-scene .scene-motion { right: 14px; bottom: 13px; min-width: 44px; min-height: 44px; padding: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .cinematic-scene canvas { transition: none; }
}