.yl-skeleton {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #252525;
}
.catalogue-feedback.is-loading { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
#catalogue-grid.results-stale { opacity: .45; pointer-events: none; }
.yl-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgb(255 255 255 / 5%) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: yl-sheen 1.8s ease-in-out infinite;
}
.yl-home-placeholder, .yl-skeleton-shelf, .yl-skeleton-card { pointer-events: none; user-select: none; }
.yl-home-placeholder .hero-content { min-width: 0; }
.yl-hero-backdrop { background: linear-gradient(120deg, var(--surface, #0b0b0b), #252525); }
.yl-hero-title { width: 85%; height: 1.8em; font-size: 64px; }
.yl-hero-meta { width: 45%; height: 22px; margin-top: 22px; }
.yl-hero-description { width: 96%; height: 18px; margin-top: 16px; }
.yl-line-short { width: 68%; margin-top: 10px; }
.yl-hero-action { width: 120px; max-width: calc(50% - 6px); height: 44px; }
.yl-skeleton-shelf .shelf-header { min-height: 36px; }
.yl-shelf-title { width: min(180px, 60%); height: 23px; }
.yl-skeleton-track { overflow: hidden; scrollbar-width: none; }
.yl-skeleton-card .poster-frame { aspect-ratio: 2 / 3; }
.yl-card-title { position: relative; }
.yl-card-title::before, .yl-card-title::after, .yl-card-meta::before {
  content: "";
  display: block;
  height: .8em;
  border-radius: 2px;
  background: #252525;
}
.yl-card-title::before { width: 86%; margin-top: .2em; }
.yl-card-title::after { width: 60%; margin-top: .6em; }
.yl-card-meta::before { width: 48%; margin-top: .35em; }
#main-content .card-title, #title-dialog .card-title { min-height: 2.8em; }
#main-content .card-meta, #title-dialog .card-meta { min-height: 1.5em; }
.yl-image-revealed { animation: yl-image-in 160ms ease-out; }
.yl-image-frame.yl-image-error { background: linear-gradient(135deg, #252525, var(--surface, #0b0b0b)); }
@keyframes yl-sheen { to { transform: translateX(100%); } }
@keyframes yl-image-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1100px) {
  .yl-hero-title { font-size: 52px; }
}
@media (max-width: 760px) {
  .yl-hero-title { font-size: 42px; }
  .yl-hero-meta { margin-top: 16px; }
  .yl-hero-description { height: 16px; }
}
@media (max-width: 440px) {
  .yl-hero-title { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .yl-skeleton::after, .yl-image-revealed { animation: none; }
  .yl-image-frame img { transition: none; }
}
