/* Floating 3D device scene (homepage hero + Work hero). The poster image is always
   rendered first; the WebGL canvas fades in over it once loaded (assets/js/three-stage.js). */
.three-stage{position:relative;margin:0;aspect-ratio:6/5;width:100%;max-width:620px;cursor:grab}
.three-stage__poster,.three-stage__canvas{position:absolute;inset:0;width:100%;height:100%}
.three-stage__poster{object-fit:contain;transition:opacity .6s ease .1s}
.three-stage__canvas{opacity:0;transition:opacity .6s ease}
.three-stage.is-3d .three-stage__canvas{opacity:1}
.three-stage.is-3d .three-stage__poster{opacity:0}

/* Work hero: copy left, devices right */
.pf-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
.pf-hero-grid .three-stage{justify-self:end}
@media (max-width:980px){
  .pf-hero-grid{grid-template-columns:minmax(0,1fr)}
  .pf-hero-grid .three-stage{justify-self:center;max-width:540px;margin-top:8px}
}

/* Homepage hero A (proof-led): the devices replace the browser stack */
.fth-stack.fth-stack--3d{height:auto;display:flex;justify-content:center}
.fth-stack--3d .three-stage{max-width:560px}
.fth-stack--3d .fth-result{position:absolute;z-index:4;left:-10px;bottom:6%}
@media (max-width:980px){.fth-stack.fth-stack--3d{height:auto}.fth-stack--3d .fth-result{left:0;bottom:2%}}

/* The still image floats too, so the hero moves even before (or without) the 3D scene. */
@keyframes stageFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(-.6deg)}}
.three-stage:not(.is-3d) .three-stage__poster{animation:stageFloat 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.three-stage .three-stage__poster{animation:none}}