/* Richie Gold & Diamonds — first-visit performance layer, 2026-09-21.
 * Visual-only rules. No product, price, checkout, cart, or customer-message
 * behaviour is represented here.
 */

/* Skip rendering and painting remote sections until they approach the viewport.
 * Explicit intrinsic heights prevent mobile scroll jumps while preserving normal
 * document flow and accessible content. */
@supports (content-visibility: auto) {
  .campaign-ribbon-section,
  .high-jewellery-edit,
  .look-section,
  .gold,
  .why,
  .story,
  .faq,
  .contact,
  .payment-trust-marks,
  .footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 920px;
  }
}

/* Decorative editorial cards begin with their approved navy/near-black canvas.
 * Their poster or loop is only hydrated shortly before it enters the viewport. */
.motion-model[data-richie-video-pending="true"] {
  background:
    radial-gradient(circle at 50% 22%, rgba(198, 164, 84, 0.16), transparent 46%),
    #071426;
}
.motion-model[data-richie-video-pending="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(145deg, rgba(7, 20, 38, 0.1), rgba(2, 6, 13, 0.7));
}

/* Contain decode work for inactive, lazy media; visible hero presentation is
 * deliberately excluded so the first screen remains immediate. */
.campaign-ribbon-card img[loading="lazy"],
.high-jewellery-image img[loading="lazy"],
.look-figure img[loading="lazy"],
.payment-trust-marks img[loading="lazy"] {
  content-visibility: auto;
}

@media (prefers-reduced-motion: reduce) {
  .motion-model[data-richie-video-pending="true"] {
    background: #071426;
  }
}