/* ============================================================
   APP SCREENSHOTS — shared rules for placing real app captures
   (see src/assets/app-screenshots/README.md)
   ============================================================ */

/* ---------- matched theme swap ----------
   The app's shot follows the SITE theme: dark shots on the dark site, light
   shots on the light site. Both variants ship; only one ever renders.
   Emitted by ThemedShot.astro. */
.app-shot-light,
.app-shot-dark {
  display: none;
}
/* pre-JS default from the OS preference (one branch always matches) */
@media (prefers-color-scheme: dark) {
  .app-shot-dark {
    display: block;
  }
}
@media (prefers-color-scheme: light) {
  .app-shot-light {
    display: block;
  }
}
/* the site's explicit theme wins over the OS default */
:root[data-theme="dark"] .app-shot-dark {
  display: block;
}
:root[data-theme="dark"] .app-shot-light {
  display: none;
}
:root[data-theme="light"] .app-shot-light {
  display: block;
}
:root[data-theme="light"] .app-shot-dark {
  display: none;
}

/* ---------- real device frame (Pixel 9 Pro XL) ----------
   .device-phone (DevicePhone.astro) overlays the shared frame WebP on a
   ThemedShot pair, so screenshots stay pure in the library. The window
   insets and corner radius are measured from the frame asset's alpha
   channel (window bbox 47,50 -> 1057,2302 in the 1110x2349 image, corner
   R ~126px). The screen box is a hair larger than the measured window
   (~0.28% per side horizontally, ~0.13% vertically, ~1px at typical render
   sizes) so the shot always underlaps the bezel — no background sliver at
   any zoom. */
.device-phone {
  position: relative;
  display: block;
  width: min(100%, 300px);
}
/* Frame + screenshot (and composed scenes marked data-load-together)
   stay hidden from the first paint until their visible images are decoded.
   The reveal is driven by WAAPI so this gate never replaces a composition's
   own transform transition. */
.device-phone.img-gating,
[data-load-together].img-gating {
  transition: none !important;
}
html.media-gate .device-phone,
html.media-gate [data-load-together] {
  opacity: 0;
}
html.media-gate .device-phone.img-ready,
html.media-gate [data-load-together].img-ready {
  opacity: 1;
}
.device-phone .device-frame {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  z-index: 2;
}
.device-phone img.device-screen {
  position: absolute;
  top: 2%;
  left: 3.95%;
  width: 91.65%;
  height: 96.17%;
  border-radius: 13.1% / 5.9%;
  z-index: 1;
}