*{box-sizing:border-box}
html,body{
  margin:0!important;
  padding:0!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  overflow:hidden!important;
  background:#030202;
}
body{position:fixed;inset:0}
.stage{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background:#030202;
}
.art{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}
.art img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:cover;
  object-position:center center;
}

/* Ambient smoke only; the camera/artwork itself never moves. */
.smoke{
  position:absolute;
  pointer-events:none;
  width:52vw;
  height:25vh;
  min-width:380px;
  bottom:5%;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 25% 60%,rgba(180,147,128,.14),transparent 42%),
    radial-gradient(ellipse at 55% 48%,rgba(155,128,116,.11),transparent 38%),
    radial-gradient(ellipse at 78% 63%,rgba(190,151,126,.10),transparent 40%);
  filter:blur(32px);
  opacity:.28;
  mix-blend-mode:screen;
}
.smoke-a{left:-12%;animation:driftA 18s ease-in-out infinite alternate}
.smoke-b{right:-13%;animation:driftB 22s ease-in-out infinite alternate}
.smoke-c{left:24%;bottom:13%;opacity:.14;animation:driftC 28s ease-in-out infinite alternate}
@keyframes driftA{from{transform:translate3d(-5%,7%,0) scale(.95)}to{transform:translate3d(30%,-4%,0) scale(1.1)}}
@keyframes driftB{from{transform:translate3d(7%,5%,0) scale(1)}to{transform:translate3d(-30%,-5%,0) scale(1.12)}}
@keyframes driftC{from{transform:translate3d(-10%,4%,0)}to{transform:translate3d(14%,-4%,0) scale(1.1)}}
.vignette{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 150px 25px rgba(0,0,0,.38);
}

/* iPhone/Android portrait: fill every CSS pixel of the visible page.
   The 9:16 portrait artwork is intentionally cropped top/bottom as needed
   on taller 19.5:9 / 20:9 phones rather than letterboxed. */
@media (max-width:900px) and (orientation:portrait){
  html,body,.stage{
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
  }
  .art,.art img{
    width:100vw!important;
    height:100dvh!important;
  }
  .art img{
    object-fit:cover!important;
    object-position:50% 50%!important;
  }
  .smoke{width:82vw;min-width:280px;bottom:7%}
  .smoke-c{width:92vw;left:4%;bottom:15%}
  .vignette{box-shadow:inset 0 0 75px 10px rgba(0,0,0,.35)}
}
@supports not (height:100dvh){
  @media (max-width:900px) and (orientation:portrait){
    html,body,.stage,.art,.art img{height:-webkit-fill-available!important;min-height:-webkit-fill-available!important}
  }
}
@media (prefers-reduced-motion:reduce){.smoke{animation:none}}