/* Front-facing product pieces. --piece-ratio is a piece's native CSS width
   divided by the desktop CSS width. The gallery uses one scale for all pieces;
   position changes composition without distorting the size of the UI. */
.screen-stage,.product-scene{
  --desktop-width:60%;
  --scene-aspect:1.15;
  --scene-wall:var(--bg,#111c2e);
  --scene-ink:color-mix(in srgb,var(--scene-wall) 46%,#04140f);
  --scene-contact:color-mix(in srgb,var(--scene-ink) 49%,transparent);
  --scene-short:color-mix(in srgb,var(--scene-ink) 36%,transparent);
  --scene-mid:color-mix(in srgb,var(--scene-ink) 25%,transparent);
  --scene-long:color-mix(in srgb,var(--scene-ink) 16%,transparent);
  position:relative;isolation:isolate;container-type:inline-size;
  display:block;width:100%;aspect-ratio:var(--scene-aspect);margin:0;overflow:visible;
}
/* The light belongs to the portfolio, not to the product's colour palette. */
.screen-stage::before,.product-scene::before{
  content:"";position:absolute;inset:4% -4% -9%;z-index:-1;
  background:radial-gradient(ellipse at 35% 37%,color-mix(in srgb,var(--fg,#f2ebdb) 5%,transparent),transparent 66%);
  pointer-events:none;
}
.screen-stage__piece,.product-scene__piece{
  --piece-ratio:1;--piece-scale:1;
  position:absolute;left:var(--piece-x,16%);top:var(--piece-y,6%);
  width:calc(var(--desktop-width) * var(--piece-ratio) * var(--piece-scale));
  height:auto;overflow:visible;border-radius:.65cqw;
  border:0;outline:0;
  box-shadow:.12cqw .264cqw .8cqw -.03cqw var(--scene-contact),
    .45cqw .99cqw 2.8cqw -.15cqw var(--scene-short),
    1.1cqw 2.42cqw 6.4cqw -.35cqw var(--scene-mid),
    2.2cqw 4.84cqw 13cqw -.6cqw var(--scene-long);
  transform:none;filter:none;
}
.screen-stage__piece img,.product-scene__piece img{
  position:static;display:block;width:100%;height:auto;max-width:none;
  margin:0;object-fit:contain;filter:none;transform:none;border-radius:inherit;
}
.screen-stage__desktop{z-index:1}
.screen-stage__phone{
  --piece-x:79%;--piece-y:36%;--piece-ratio:.330508;--piece-scale:.58;
  z-index:4;border-radius:1.3cqw;
}
.screen-stage__detail-a{
  --piece-x:3%;--piece-y:58%;--piece-ratio:.35;z-index:3;
}
.screen-stage__detail-b{
  --piece-x:70%;--piece-y:18%;--piece-ratio:.28;z-index:2;
}
/* Details have a shorter shadow, so they float closer to the main screen. */
.screen-stage__detail-a,.screen-stage__detail-b,.product-scene__piece--detail{
  box-shadow:.08cqw .176cqw .5cqw -.02cqw var(--scene-contact),
    .3cqw .66cqw 1.8cqw -.08cqw var(--scene-short),
    .75cqw 1.65cqw 4.4cqw -.18cqw var(--scene-mid),
    1.5cqw 3.3cqw 8.8cqw -.3cqw var(--scene-long);
}
.home-case__cover .screen-stage{max-width:1080px;margin-inline:auto}
.home-case__cover .screen-stage img{height:auto;object-fit:initial;filter:none;transform:none}
/* Gallery/hero scenes share the exact same native geometry. Their surrounding
   page stays transparent; the product itself keeps its real theme surface. */
.screen-stage--gallery{
  --scene-contact:rgb(2 8 19 / .65);
  --scene-short:rgb(2 8 19 / .42);
  --scene-long:rgb(2 8 19 / .28);
  --gallery-elevation-base:.1cqw .2cqw .6cqw -.1cqw var(--scene-contact),
    .4cqw .8cqw 1.8cqw -.3cqw var(--scene-short);
  --gallery-elevation-floating:.12cqw .24cqw .65cqw -.12cqw var(--scene-contact),
    .65cqw 1.3cqw 2.4cqw -.4cqw var(--scene-short),
    1.3cqw 2.6cqw 4.8cqw -.6cqw var(--scene-long);
  max-width:none;background:transparent;border:0;border-radius:0;box-shadow:none;
}
.screen-stage--gallery::before{content:none;}
.screen-stage--gallery .screen-stage__piece{
  --piece-scale:1;
  border:0;outline:0;transform:none;transition:none;
  box-shadow:var(--gallery-elevation-base);
}
.screen-stage--gallery .screen-stage__phone,
.screen-stage--gallery .screen-stage__detail-a,
.screen-stage--gallery .screen-stage__detail-b{box-shadow:var(--gallery-elevation-floating);}
html.theme-light .screen-stage--gallery{
  --scene-contact:rgb(12 19 28 / .30);
  --scene-short:rgb(12 19 28 / .22);
  --scene-long:rgb(12 19 28 / .14);
}
.screen-stage--gallery .screen-stage__piece img{width:100%;height:auto;object-fit:contain;transform:none;filter:none;}
.gallery-image--light{display:none!important;}
html.theme-light .gallery-image--dark{display:none!important;}
html.theme-light .gallery-image--light{display:block!important;}
.gallery-caption{margin:var(--air-2) 0 0;color:var(--fg-soft);font-size:var(--fs-xs);line-height:var(--lh-normal);}
/* Feature compositions use the same coordinate system and native image ratios.
   Inline --scene-aspect and --piece-x/y describe each composition, not a crop. */
.product-scene{--desktop-width:110%;--scene-aspect:1.26}
.product-scene__piece{left:var(--piece-x,11%);top:var(--piece-y,9%)}
.product-scene__piece--main{z-index:1}
.product-scene__piece--detail{z-index:3}
.product-scene__piece--phone{--piece-scale:.58;z-index:4;border-radius:1.3cqw}
.product-scene:focus-visible,.product-scene__piece:focus-visible{outline:2px solid var(--hl,#d5a66f);outline-offset:5px}
.screen-evidence .pi:not(.pi--nu){border:0;border-radius:.65cqw;box-shadow:0 .7cqw 1.7cqw #02060d26,0 2.6cqw 5cqw #02060d38}
/* Hero positions remain proportional on mobile. Feature panels instead stack
   at one shared, bounded scale so their content is larger without clipping. */
@media(max-width:600px){
  .product-scene{display:flex;flex-direction:column;gap:24px;aspect-ratio:auto;padding-block:12px;}
  .product-scene__piece{position:relative;left:auto;top:auto;flex:none;align-self:center;width:calc(var(--mobile-width,180%) * var(--piece-ratio));}
  .product-scene__piece--detail{align-self:flex-end;}
}