/* Homepage desktop: one original photograph, with a source-aligned mask.
 * Preserve the devices and their surrounding light in the same image. This
 * avoids hard cutout halos and mixed source densities at reflective edges.
 * The separate cutouts remain available exclusively for the light theme. */
.hero-device-guard { display: none; }
@media (min-width: 901px) {
  .home-top {
    background: linear-gradient(180deg, transparent 60%, var(--bg)), radial-gradient(ellipse at 73% 37%, #081b2c 0%, #05111b 42%, #040c14 76%);
  }
  .home-top::before {
    inset: 0 0 auto;
    width: 100%;
    height: 100%;
    opacity: .28;
    background: url('assets/stars.webp') center top / cover no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
  }
  .home-top .hero-art::before { display: none; }
  .home-top .hero-art picture {
    position: relative;
    z-index: 0;
    /* Match the source crop, then soften its outer edge. Keep this final fade
       narrower than the watch's 24px clearance at the widest desktop crop. */
    -webkit-mask-image: url('assets/hero-desktop-mask.svg?v=20260927-soft-light'), linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: url('assets/hero-desktop-mask.svg?v=20260927-soft-light'), linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    mask-mode: alpha;
  }
  .home-top .hero-device-guard { display: none; }
}