/* Load after site.css and slideshow.css. All content is visible without JS. */

.photo-mask-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Replace the previous page-load stack with one entrance owner per group.
   Keep header/navigation, media frames and slideshow controls stationary.
   This never selects a slide: its opacity/transform still belong to slideshow.css. */
html.js:is(.is-loaded, :not(.is-loaded))
  :is(
    .utility,
    .site-header,
    .hero-plate,
    .hero-copy > *,
    .hero-foot,
    .visit-ribbon,
    .page-intro h1,
    .page-intro-grid > p,
    .chapter-nav
  ) {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
}

/* The photo owns its clip; neither its figure nor its text owns image motion. */
html.js .reveal.ready {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Opening a native disclosure is immediate, particularly from keyboard/hash. */
html.js .care-accordion[open] .accordion-body {
  animation: none;
}

html.js.motion-enhanced body [data-scroll-reveal="pending"] {
  opacity: 0;
  transform: translateY(18px);
}

html.js.motion-enhanced body [data-scroll-reveal="running"] {
  will-change: opacity, transform;
}

html.js.motion-enhanced img[data-photo-reveal="pending"] {
  /* A fully clipped pending image defeats both native lazy loading and IO. */
  opacity: 0;
}

html.js.motion-enhanced img[data-photo-reveal="running"]:not(.care-slide) {
  will-change: mask-image;
}

/* JS settles the whole group on focus/hash, including any running WAAPI effect.
   These also provide an immediate CSS escape before the event handler runs. */
html.js.motion-enhanced body [data-scroll-reveal]:is(:focus-within, :target) {
  opacity: 1 !important;
  transform: none !important;
}

html.js.motion-enhanced img[data-photo-reveal]:is(:focus, :target) {
  clip-path: none !important;
  mask-image: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html.js body [data-scroll-reveal] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto;
  }

  html.js img[data-photo-reveal] {
    clip-path: none !important;
    mask-image: none !important;
    will-change: auto;
  }
}

@media print {
  html.js body [data-scroll-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  html.js img[data-photo-reveal] {
    clip-path: none !important;
    mask-image: none !important;
  }
}