/* PresenceOS — premium CSS-3D moto g56 treatment (v6)
   Layered over the Astro G56 component on Home / Overview / Order.
   Scope: .g56-stage and children. Attribute selectors keep specificity
   above the component's scoped rules without touching them. */

.g56-stage[data-astro-cid-wv7kradf]{
  --g56-w:min(300px,62vw) !important;
  --g56-r:calc(var(--g56-w) * .145);       /* outer corner radius, proportional */
  --g56-ri:calc(var(--g56-w) * .105);      /* screen corner radius */
  position:relative;
  padding:clamp(28px,4vw,56px) 0 10px;
  gap:1.25rem;
  isolation:isolate;
}
body[data-pos-page="home"] .g56-stage[data-astro-cid-wv7kradf]{--g56-w:min(340px,70vw) !important}

/* ambient studio light behind the handset */
.g56-stage[data-astro-cid-wv7kradf]::before{
  content:"";position:absolute;left:50%;top:46%;z-index:-1;
  width:calc(var(--g56-w) * 2.6);height:calc(var(--g56-w) * 2.2);
  transform:translate(-50%,-50%);
  background:
    radial-gradient(closest-side,rgba(36,91,255,.13),transparent 70%),
    radial-gradient(closest-side at 50% 60%,rgba(255,255,255,.06),transparent 65%);
  filter:blur(18px);pointer-events:none;
}
[data-theme="dark"] .g56-stage[data-astro-cid-wv7kradf]::before,
html.dark .g56-stage[data-astro-cid-wv7kradf]::before{
  background:
    radial-gradient(closest-side,rgba(47,185,169,.12),transparent 70%),
    radial-gradient(closest-side at 50% 60%,rgba(255,255,255,.05),transparent 65%);
}

/* no filter here: a filter flattens the preserve-3d context and kills the edges */

/* ---- chassis ---- */
.g56-body[data-astro-cid-wv7kradf]{--g56-d:calc(var(--g56-w) * .1101)}

.g56-face[data-astro-cid-wv7kradf]{border-radius:var(--g56-r)}

.g56-front[data-astro-cid-wv7kradf]{
  background:#07080a;
  border:0;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),      /* polished rim */
    inset 0 0 0 2px rgba(0,0,0,.9),
    inset 0 0 0 5px #0b0c0f,                     /* bezel */
    inset 0 0 0 6px rgba(255,255,255,.04);
}
/* screen — image or video — seated inside the bezel */
.g56-front[data-astro-cid-wv7kradf] img[data-astro-cid-wv7kradf],
.g56-front[data-astro-cid-wv7kradf] .g56-screen-video{
  position:absolute;inset:2.1% 2.7% 3% 2.7%;
  width:94.6%;height:94.9%;
  object-fit:cover;display:block;
  border-radius:var(--g56-ri);
  background:#000;
}
.g56-front[data-astro-cid-wv7kradf] .g56-screen-video{filter:saturate(1.04) contrast(1.03)}

/* glass: static edge catch + slow travelling sheen */
.g56-glass[data-astro-cid-wv7kradf]{
  border-radius:var(--g56-r);
  background:
    linear-gradient(112deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.03) 18%,transparent 34%,transparent 78%,rgba(255,255,255,.045) 100%);
  overflow:hidden;
}
.g56-glass[data-astro-cid-wv7kradf]::after{
  content:"";position:absolute;top:-30%;bottom:-30%;left:-60%;width:38%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.10) 45%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.10) 55%,transparent 100%);
  transform:skewX(-18deg);
  animation:g56Sheen 9s cubic-bezier(.4,0,.2,1) infinite;
  animation-delay:2s;
}
@keyframes g56Sheen{0%,62%{left:-60%}100%{left:160%}}

.g56-punchhole[data-astro-cid-wv7kradf]{
  top:calc(var(--g56-w) * .042);
  width:calc(var(--g56-w) * .032);height:calc(var(--g56-w) * .032);
  background:radial-gradient(circle at 40% 35%,#1d2026 0%,#000 55%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 1.5px rgba(0,0,0,.85),inset 0 0 2px rgba(80,120,255,.5);
}

/* back panel */
.g56-back[data-astro-cid-wv7kradf]{
  background:#111318;border:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 0 0 2px rgba(0,0,0,.9);
}
.g56-back-img[data-astro-cid-wv7kradf]{border-radius:var(--g56-r)}

/* rails — brushed aluminium */
.g56-edge[data-astro-cid-wv7kradf]{
  background:linear-gradient(to right,#4a4c55 0%,#24262c 22%,#3a3c44 50%,#202227 78%,#474952 100%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12);
}
.g56-edge-t[data-astro-cid-wv7kradf],.g56-edge-b[data-astro-cid-wv7kradf]{
  background:linear-gradient(to bottom,#4a4c55 0%,#24262c 22%,#3a3c44 50%,#202227 78%,#474952 100%);
}
.g56-btn[data-astro-cid-wv7kradf]{
  background:linear-gradient(to right,#55575f,#2b2d34 60%,#3b3d45);
  box-shadow:0 0 0 .5px rgba(0,0,0,.9),inset 0 .5px 0 rgba(255,255,255,.22);
  border-radius:4px;
}

/* contact shadow + floor reflection */
.g56-shadow[data-astro-cid-wv7kradf]{
  width:calc(var(--g56-w) * 1.05);height:34px;margin-top:-6px;
  background:
    radial-gradient(ellipse at 50% 40%,rgba(0,0,0,.55) 0%,rgba(0,0,0,.22) 35%,transparent 70%);
  filter:blur(8px);
}
.g56-stage[data-astro-cid-wv7kradf]::after{
  content:"";position:absolute;left:50%;z-index:-1;
  bottom:calc(10px + 3.2rem);
  width:calc(var(--g56-w) * .78);height:2px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  opacity:.6;pointer-events:none;
}

/* captions under the device */
.g56-hint[data-astro-cid-wv7kradf]{
  font-family:var(--fs-mono,'DM Mono',monospace);
  font-size:.66rem;letter-spacing:.14em;
  color:var(--fs-muted,#6f716b);
  padding:.35rem .9rem;border:1px solid var(--fs-line,rgba(0,0,0,.14));border-radius:999px;
}
.g56-moto-note[data-astro-cid-wv7kradf]{font-size:.64rem;opacity:.8;max-width:320px}

@media (prefers-reduced-motion:reduce){
  .g56-glass[data-astro-cid-wv7kradf]::after{animation:none;display:none}
}
@media (max-width:640px){
  .g56-stage[data-astro-cid-wv7kradf]{--g56-w:min(240px,64vw) !important;padding-top:18px}
  body[data-pos-page="home"] .g56-stage[data-astro-cid-wv7kradf]{--g56-w:min(260px,68vw) !important}
}