/* The intact mark shares the photograph's entrance, independent of text. */
html.pandect-about-media-enabled body .implementation-hero > .implementation-hero__image,
html.pandect-about-media-enabled body .implementation-hero > svg.about-hero-logo[data-pandect-dots] {
  opacity: 0 !important;
  transition: opacity 650ms cubic-bezier(.22,1,.36,1);
}
html.pandect-about-media-ready body .implementation-hero > .implementation-hero__image,
html.pandect-about-media-ready body .implementation-hero > svg.about-hero-logo[data-pandect-dots] { opacity: 1 !important; }

/* Never paint an empty dark hero while the photograph is decoding. */
html body .implementation-hero:has(.about-hero-logo) { background: transparent !important; }
html body .implementation-hero:has(.about-hero-logo)::after { opacity: 0; transition: opacity 650ms cubic-bezier(.22,1,.36,1); }
html.pandect-about-media-ready body .implementation-hero:has(.about-hero-logo)::after { opacity: 1; }
@media(prefers-reduced-motion:reduce) { html body .implementation-hero:has(.about-hero-logo)::after { opacity: 1; } }

/* Keep the complete hero, including gradients, out of the first paint until its media is ready. */
html.pandect-about-media-enabled body .implementation-hero:has(.about-hero-logo) { opacity: 0 !important; transition: none !important; }
html.pandect-about-media-ready body .implementation-hero:has(.about-hero-logo) { opacity: 1 !important; transition: opacity 650ms cubic-bezier(.22,1,.36,1) !important; }
html.pandect-about-media-ready body .implementation-hero > .implementation-hero__image,
html.pandect-about-media-ready body .implementation-hero > svg.about-hero-logo[data-pandect-dots] { transition: none !important; }
@media(prefers-reduced-motion:reduce) { html.pandect-about-media-enabled body .implementation-hero:has(.about-hero-logo), html.pandect-about-media-enabled body .implementation-hero > .implementation-hero__image, html.pandect-about-media-enabled body .implementation-hero > svg.about-hero-logo[data-pandect-dots] { opacity: 1 !important; transition: none !important; } }