/* Loading placeholders inherit the actual layout, so there is no second layout. */
@keyframes skeleton-sheen { from { background-position: 200% 0; } to { background-position: -200% 0; } }
html.skeleton-loading [data-skeleton] { position: relative; color: transparent !important; text-shadow: none !important; }
html.skeleton-loading [data-skeleton] *,
html.skeleton-loading [data-skeleton]::before { visibility: hidden !important; }
html.skeleton-loading [data-skeleton]::after,
html.skeleton-loading [data-skeleton-image]::after,
html.skeleton-enabled [data-image-pending]::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; transform: none;
  border-radius: 4px; background: linear-gradient(100deg, #dbe1d4 20%, #eaf0e3 45%, #dbe1d4 70%);
  background-size: 240% 100%; animation: skeleton-sheen 1.8s ease-in-out infinite;
}
html.skeleton-loading [data-skeleton='text']::after {
  inset: .2em 0 .1em; border-radius: 3px;
  mask-image: repeating-linear-gradient(to bottom, #000 0, #000 .65em, transparent .65em, transparent 1.85em);
}
html.skeleton-loading [data-skeleton='heading']::after {
  inset: .09em 0 .02em; width: min(94%, 22ch);
  mask-image: repeating-linear-gradient(to bottom, #000 0, #000 .7em, transparent .7em, transparent 1.05em);
}
html.skeleton-loading a.brand::after { mask-image: none; border-radius: 5px; }
html.skeleton-loading [data-skeleton='control']::after { border-radius: inherit; }
html.skeleton-loading select[data-skeleton] {
  background: linear-gradient(100deg, #dbe1d4 20%, #eaf0e3 45%, #dbe1d4 70%);
  background-size: 240% 100%; animation: skeleton-sheen 1.8s ease-in-out infinite;
}
html.skeleton-loading .featured[data-skeleton]::after,
html.skeleton-loading .editorial-doctor [data-skeleton]::after {
  background-image: linear-gradient(100deg, #3a5949 20%, #58725d 45%, #3a5949 70%);
}
html.skeleton-loading [data-skeleton-image]::after,
html.skeleton-enabled [data-image-pending]::after { border-radius: 0; }
html.skeleton-loading [data-skeleton-image] > *,
html.skeleton-enabled [data-image-pending] > * { visibility: hidden; }
/* Reveal effects wait behind the placeholders instead of making them invisible. */
html.skeleton-loading.motion-ready [data-reveal],
html.skeleton-loading.motion-ready [data-image-reveal] {
  opacity: 1; transform: none; clip-path: none; transition: none;
}
html.skeleton-loading .hero-line { visibility: hidden !important; }
@media (prefers-reduced-motion: reduce) {
  html.skeleton-loading [data-skeleton]::after,
  html.skeleton-loading [data-skeleton-image]::after,
  html.skeleton-enabled [data-image-pending]::after,
  html.skeleton-loading select[data-skeleton] { animation: none; }
}