/* Icon font loading skeleton — shared by every page.
 * While "Material Symbols Outlined" is loading, each icon shows a shimmering
 * placeholder instead of the raw ligature text (e.g. "play_arrow").
 * js/icon-fix.js adds `fonts-ready` to <html> once the font is actually loaded. */
.material-symbols-outlined { visibility: hidden; }
html:not(.fonts-ready) .material-symbols-outlined::after {
  content: "";
  visibility: visible;
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 0.25em;
  vertical-align: -0.15em;
  background: linear-gradient(100deg,
    rgba(255,255,255,0.05) 30%,
    rgba(255,255,255,0.16) 50%,
    rgba(255,255,255,0.05) 70%);
  background-size: 200% 100%;
  animation: icon-skeleton-shimmer 1.1s linear infinite;
}
@keyframes icon-skeleton-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
html.fonts-ready .material-symbols-outlined { visibility: visible; }
html.fonts-ready .material-symbols-outlined::after { display: none; }