/* hero stage – real product photos on a light studio floor (owner, 7 Oct: "we are a screen company, not a phone company").
   Home: the white Samsung service-pack box standing with a display module (front + back cut-out) in front of it.
   Brand pages: the brand's banner composition (modules + box), else the best product cut-out.
   Budget: transform / opacity only – the pointer parallax writes --px / --py (hero-stage.js) and each layer moves with the
   `translate` property at its own depth; the static drop-shadows are rasterised once. Sizes are container-query units, so the
   same rules serve the desktop column (explicit height) and the phone row (aspect-ratio). Surfaces come from site.css tokens;
   the shadows / light pool use --ink-rgb at low alpha. */
.hs{--px:0;--py:0;--ink:var(--ink-rgb,15,26,48);position:relative;container-type:size;isolation:isolate;pointer-events:none}
.hs>*{pointer-events:auto}
/* soft light pool behind the objects (a shade darker than the page, so a white box reads on a white page) */
.hs::before{content:"";position:absolute;left:-4%;right:-4%;top:-2%;bottom:-4%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(58% 56% at 50% 58%,rgba(var(--ink),.09),rgba(var(--ink),.035) 48%,transparent 74%)}
/* contact shadow on the floor */
.hs__floor{position:absolute;left:2%;right:2%;bottom:0;height:15%;z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(var(--ink),.34),rgba(var(--ink),.12) 42%,transparent 70%);
  translate:calc(var(--px) * 6px) 0;transition:translate .9s var(--ease)}
.hs img{position:absolute;max-width:none;pointer-events:none;-webkit-user-drag:none;user-select:none;transition:translate .9s var(--ease)}
/* home: box standing at the right, the module in front at the left (closer to the camera, so it stands a little lower) */
.hs__box{right:-1%;bottom:10%;width:auto;height:74cqh;z-index:1;translate:calc(var(--px) * 10px) calc(var(--py) * 6px);
  filter:drop-shadow(0 16px 22px rgba(var(--ink),.2)) drop-shadow(0 1px 2px rgba(var(--ink),.12))}
.hs__mod{left:0;bottom:4%;width:auto;height:48cqh;z-index:2;rotate:-4deg;transform-origin:50% 100%;translate:calc(var(--px) * 22px) calc(var(--py) * 14px);
  filter:drop-shadow(0 20px 24px rgba(var(--ink),.3))}
/* phones / tablets (the stage is a full-width row with its own aspect ratio): the objects may fill more of it */
@media (max-width:900px){.hs__box{height:80cqh}.hs__mod{height:54cqh}}
/* brand page: one banner composition, contained in the stage */
.hs__img{left:0;top:0;width:100%;height:100%;object-fit:contain;z-index:1;translate:calc(var(--px) * 14px) calc(var(--py) * 10px);
  filter:drop-shadow(0 18px 24px rgba(var(--ink),.22))}
/* brand page without a composition: the model's cut-out (front + back) standing on the floor */
.hs__cut{left:50%;bottom:6%;width:auto;height:90cqh;z-index:1;translate:calc(-50% + var(--px) * 16px) calc(var(--py) * 10px);
  filter:drop-shadow(0 20px 24px rgba(var(--ink),.3))}
/* entrance: hidden while the photos decode (is-wait), then each layer rises into place (is-ready, hero-stage.js) */
.hs.is-wait :is(img,.hs__floor){opacity:0}
.hs.is-ready .hs__box,.hs.is-ready .hs__img,.hs.is-ready .hs__cut{animation:hs-in 1.1s var(--ease) both}
.hs.is-ready .hs__mod{animation:hs-in 1.1s .14s var(--ease) both}
.hs.is-ready .hs__floor{animation:hs-fade 1.3s .25s both}
@keyframes hs-in{from{opacity:0;transform:translateY(30px) scale(.965)}}
@keyframes hs-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .hs.is-wait :is(img,.hs__floor){opacity:1}
  .hs.is-ready :is(img,.hs__floor){animation:none}
  .hs img,.hs__floor{transition:none}
}