/* ============================================================
   skeleton.css — Resource-loading placeholders

   Industry-standard principles:
   1. Static text (system font) renders instant — never skeleton
   2. Webfont icons reserve 1em × 1em space, fade-in when loaded
      (no shimmer — text adjacent renders instantly, shimmer next
      to ready text creates visual noise)
   3. Images (async resource) shimmer until JS adds .loaded
   4. Composite cards where primary content = image (provider-card
      marquee) skeleton whole card, mengikuti pattern Stripe/Linear

   .fonts-loaded class added by font-readiness script in
   apps/user/layout.php (document.fonts.ready API + 4s fallback).
   @keyframes shimmer lives in style.css (shared).
   ============================================================ */


/* ── ICON FONT PLACEHOLDER ──────────────────────────────── */
/* Reserve square 1em slot so icon glyph pops into place without
   layout shift. No shimmer animation — text adjacent renders
   instantly with system font; shimmer next to ready text would
   only add visual noise. */

html:not(.fonts-loaded) .material-symbols-rounded {
    color: transparent !important;
    display: inline-block;
    width: 1em;
    height: 1em;
    overflow: hidden;
    vertical-align: middle;
}

/* Smooth color fade when font becomes available */
.material-symbols-rounded {
    transition: color 0.2s ease;
}


/* ── IMAGE PLACEHOLDER (shimmer behind img) ─────────────── */
/* Image is a real async network resource — show shimmer until
   the JS image-load handler in js-ui.js adds .loaded class. */

.game-card-image,
.provider-logo,
.highlight-scroll>li figure,
#banner .splide__slide figure,
.sidebar-logo,
.sidebar-social-link,
.footer-social-btn,
.footer-brand-name figure {
    background: linear-gradient(90deg,
            var(--surface) 25%,
            var(--surface2) 50%,
            var(--surface) 75%);
    background-size: 400% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
}

.game-card-image.loaded,
.provider-logo.loaded,
.highlight-scroll>li figure.loaded,
#banner .splide__slide figure.loaded,
.sidebar-logo.loaded,
.sidebar-social-link.loaded,
.footer-social-btn.loaded,
.footer-brand-name figure.loaded {
    animation: none;
    background: none;
}


/* ── COMPOSITE CARD SKELETON ────────────────────────────── */
/* Provider card homepage marquee: primary content IS the logo
   image. Until image loads, flatten the entire card to a single
   shimmer block (not piecewise) so it feels like one unit
   loading. Once .provider-logo gets .loaded, card returns to its
   normal gradient + name + logo design. */

.provider-scroll .provider-card:has(.provider-logo:not(.loaded)) {
    background: linear-gradient(90deg,
            var(--surface) 25%,
            var(--surface2) 50%,
            var(--surface) 75%);
    background-size: 400% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
    border-color: transparent;
    box-shadow: none;
}

.provider-scroll .provider-card:has(.provider-logo:not(.loaded))::before {
    display: none;
}

.provider-scroll .provider-card:has(.provider-logo:not(.loaded)) .provider-logo,
.provider-scroll .provider-card:has(.provider-logo:not(.loaded)) .provider-name {
    visibility: hidden;
    animation: none;
    background: none;
}