/* Optimized artwork sources. This file is loaded after each page's themed
   styles so the design stays identical while browsers fetch modern assets. */

/* Home */
.home-steam-feature {
  background-image: url("assets/home-steam-valley.webp");
}
.home-wuxia-card {
  background-image: url("assets/steam-wuxia-hero.webp");
}
.home-books-feature {
  background-image: url("assets/home-books-garden.webp");
}
.wuxia-practice {
  background-image: url("assets/wuxia-practice-atlas.webp");
}
.home-library-card {
  background-image: url("assets/books-library-hero.webp");
}
.home-books-feature > .home-shadow-readers {
  background-image: url("assets/shadow-readers-easter-egg.webp");
}

/* Steam Games */
.steam-page .worlds-head::before {
  background-image: url("assets/steam-three-roads-v2.webp");
}
.steam-page .pixel-hud {
  background-image: linear-gradient(90deg, #031316, rgba(3, 19, 22, 0.88)),
    url("assets/home-steam-valley.webp");
}
.steam-page .worlds-head::after,
.steam-page .world-panel .side-scene {
  background-image: url("assets/wuxia-section-sprites-v3.webp");
}
.steam-page .hud-item::after {
  background-image: url("assets/wuxia-hud-sprites-v3.webp");
}

/* Books */
.books-page .shelf-intro {
  background-image: linear-gradient(90deg, #100d24 0 42%, rgba(16, 13, 36, 0.7) 57%, transparent),
    url("assets/books-observatory-v2.webp");
}
.books-page .writing-room::before {
  background-image: linear-gradient(90deg, rgba(11, 8, 28, 0.9), rgba(11, 8, 28, 0.35)),
    url("assets/books-library-hero.webp");
}
.books-page .fireflies {
  background-image: url("assets/reader-brawler-sprite-v2.webp");
}
.books-page .chapter:nth-child(1) { --reader: url("assets/reader-scout-sprite-v2.webp"); }
.books-page .chapter:nth-child(2) { --reader: url("assets/reader-brawler-sprite-v2.webp"); }
.books-page .chapter:nth-child(3) { --reader: url("assets/reader-frost-sprite-v2.webp"); }
.books-page .chapter:nth-child(4) { --reader: url("assets/reader-knight-sprite-v2.webp"); }
.books-page .books-cta {
  background-image: linear-gradient(90deg, #0d091d 0 50%, rgba(13, 9, 29, 0.76)),
    url("assets/books-observatory-v2.webp");
}
.books-page .reader-shadow { --reader: url("assets/reader-shadow-hunter-v3.webp"); }
.books-page .reader-knight { --reader: url("assets/reader-knight-sprite-v2.webp"); }
.books-page .reader-frost { --reader: url("assets/reader-frost-sprite-v2.webp"); }
.books-page .reader-scout { --reader: url("assets/reader-scout-sprite-v2.webp"); }

/* Products */
.product-card-art.steam-art { background-image: url("assets/steam-lanterns-dawn.webp"); }
.product-card-art.book-art { background-image: url("assets/books-fiction-storm.webp"); }

@media (max-width: 860px) {
  .home-steam-feature { background-image: url("assets/home-steam-valley.mobile.webp"); }
  .home-wuxia-card { background-image: url("assets/steam-wuxia-hero.mobile.webp"); }
  .home-books-feature { background-image: url("assets/home-books-garden.mobile.webp"); }
  .home-library-card { background-image: url("assets/books-library-hero.mobile.webp"); }

  .steam-page .worlds-head::before {
    background-image: url("assets/steam-three-roads-v2.mobile.webp");
  }
  .steam-page .pixel-hud {
    background-image: linear-gradient(90deg, #031316, rgba(3, 19, 22, 0.88)),
      url("assets/home-steam-valley.mobile.webp");
  }

  .books-page .shelf-intro {
    background-image: linear-gradient(0deg, #100d24 0 45%, rgba(16, 13, 36, 0.28)),
      url("assets/books-observatory-v2.mobile.webp");
  }
  .books-page .writing-room::before {
    background-image: linear-gradient(90deg, rgba(11, 8, 28, 0.9), rgba(11, 8, 28, 0.35)),
      url("assets/books-library-hero.mobile.webp");
  }
  .books-page .books-cta {
    background-image: linear-gradient(90deg, #0d091d 0 50%, rgba(13, 9, 29, 0.76)),
      url("assets/books-observatory-v2.mobile.webp");
  }
}

/* Defer artwork that begins well below the fold. The page colors remain in
   place while each scene is waiting, and the script reveals it before the
   user reaches it. */
html.lazy-art-enabled .home-steam-feature:not(.art-loaded),
html.lazy-art-enabled .home-books-feature:not(.art-loaded),
html.lazy-art-enabled .home-steam-feature:not(.art-loaded) .home-wuxia-card,
html.lazy-art-enabled .home-books-feature:not(.art-loaded) .home-library-card,
html.lazy-art-enabled .home-books-feature:not(.art-loaded) > .home-shadow-readers,
html.lazy-art-enabled .home-steam-feature:not(.art-loaded) .wuxia-practice,
html.lazy-art-enabled .steam-page .worlds-head:not(.art-loaded)::before,
html.lazy-art-enabled .steam-page .worlds-head:not(.art-loaded)::after,
html.lazy-art-enabled .steam-page .world-panel:not(.art-loaded) .side-scene,
html.lazy-art-enabled .books-page .story-card:not(.art-loaded) .fireflies,
html.lazy-art-enabled .books-page .chapter-track:not(.art-loaded) .chapter::after,
html.lazy-art-enabled .books-page .shadow-readers:not(.art-loaded) .reader-sprite {
  background-image: none;
}

html.lazy-art-enabled .steam-page .pixel-hud:not(.art-loaded) {
  background-image: linear-gradient(90deg, #031316, rgba(3, 19, 22, 0.88));
}
html.lazy-art-enabled .books-page .shelf-intro:not(.art-loaded) {
  background-image: linear-gradient(90deg, #100d24 0 42%, rgba(16, 13, 36, 0.7) 57%, transparent);
}
html.lazy-art-enabled .books-page .writing-room:not(.art-loaded)::before {
  background-image: linear-gradient(90deg, rgba(11, 8, 28, 0.9), rgba(11, 8, 28, 0.35));
}
html.lazy-art-enabled .books-page .books-cta:not(.art-loaded) {
  background-image: linear-gradient(90deg, #0d091d 0 50%, rgba(13, 9, 29, 0.76));
}