/* Photo command page: the uploaded photo sits centre-stage, blurred copy fills the background. */
body.photo-page{background:#0b0605}
body.photo-page::before{display:none}

.photo-bg{position:fixed;inset:-40px;z-index:0;background:url("hero-photo.png") center/cover no-repeat;
  filter:blur(38px) brightness(.42) saturate(1.15);transform:scale(1.1)}

.photo-frame{position:fixed;left:50%;top:50%;z-index:1;pointer-events:none;
  width:min(100vw,96vh,980px);aspect-ratio:1/1;transform:translate(-50%,-50%);
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.photo{width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 60%;
  animation:breathe 7s ease-in-out infinite alternate}
@keyframes breathe{
  from{transform:scale(1);filter:brightness(1) contrast(1)}
  to{transform:scale(1.03);filter:brightness(1.08) contrast(1.02)}
}

#embers{position:fixed;inset:0;z-index:1;pointer-events:none}

body.photo-page .vignette{background:radial-gradient(ellipse at 50% 50%,transparent 38%,rgba(5,3,2,.55) 100%)}

@media (max-width:760px){
  .photo-frame{width:100vw;top:16vh;transform:translate(-50%,0)}
  .stage{display:flex;flex-direction:column;min-height:auto;padding:0 12px 0}
  .tabs-left{margin-top:62vh}
  .figure-space{display:none}
  .tabs{flex-direction:row;flex-wrap:wrap}
  .scenario-strip{position:relative;left:auto;bottom:auto;transform:none;margin:14px 12px 28px;max-width:none}
}

@media (prefers-reduced-motion: reduce){
  .photo{animation:none}
}