/* A kinetic installation inside the photographic atelier. */
.hero-with-image .sculpture-stage{top:25%;width:44%;height:48%}
.atelier-backdrop{transform:translateY(var(--atelier-shift,0px));will-change:transform}
.hero-with-image .sculpture-stage::before{content:"";position:absolute;inset:14% 11%;border-radius:50%;background:radial-gradient(ellipse,#e1d3a916,transparent 66%);pointer-events:none}
.hero-with-image .interaction-bar{flex-direction:column;gap:11px;margin-bottom:24px}
.hero-with-image .stage-caption p{padding:3px 12px;font-size:10px;background:transparent}
.hero-with-image .scene-controls{flex-wrap:wrap;align-items:center;gap:9px}
.scene-explode{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;border:1px solid #e1e9bf;border-radius:12px;color:#22281f;background:linear-gradient(155deg,#e8edcf,#c7d59b);box-shadow:0 4px 0 #75844e,0 10px 20px #080e0838,inset 0 1px #ffffff8c;font:600 11px var(--font);cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s}
.scene-explode svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s}
.scene-explode[aria-pressed=true]{background:linear-gradient(155deg,#fff9e9,#dfd8bb);border-color:#fff7e2}
.scene-explode[aria-pressed=true] svg{transform:rotate(180deg)}
.scene-explode:disabled{cursor:default;opacity:.5}
.scene-explode:active{transform:translateY(3px);box-shadow:0 1px 0 #75844e,0 3px 9px #080e0838}
.scene-explode:focus-visible{outline:3px solid #d6dfac;outline-offset:6px}
.dialog-bottom{flex-wrap:wrap;gap:16px}
.dialog-bottom .scene-explode{margin-left:auto}
.dialog-bottom>p{flex-basis:100%;text-align:center}
@media(hover:hover) and (pointer:fine){.scene-explode:hover{transform:translateY(-2px);box-shadow:0 6px 0 #75844e,0 15px 24px #080e0840}}
@media(max-width:760px){
  .hero-with-image{height:870px}
  .hero-with-image .interaction-bar{gap:8px;margin-bottom:23px}
  .hero-with-image .scene-controls{max-width:360px;gap:8px}
  .hero-with-image .shape-picker{flex-basis:100%;justify-content:center}
  .hero-with-image .shape-picker button{flex:1}
  .hero-with-image .hero-copy{bottom:30px}
  .scene-explode{padding:10px 13px}
  .dialog-bottom .scene-explode{margin-left:0}
  .dialog-bottom .shape-picker{flex:1}
}
@media(prefers-reduced-motion:reduce){
  .atelier-backdrop{transform:none!important;will-change:auto}
  .scene-explode,.scene-explode svg{transition:none!important}
  .scene-explode:hover{transform:none}
}