/* MineChef — decorative art applied through CSS (background illustrations, textures, ore veins). Owned by the "visual" piece.
   Reference files under assets/ from here. Loaded after layout styles.

   Above the fold:
     .scene::after           a paper / paint grain laid over the whole layered picture (speckle tile, no blend mode so
                             the parallax layers underneath stay cheap to composite)
   Below the fold the page is one continuous cave painting:
     .underground            banded strata (tokens) with wavy hand-drawn boundaries, the same grain, a roots/topsoil
                             strip with a ventilation shaft at the top, a side gallery (rails, a parked cart, the foreman
                             with his map) right of the heading, a scatter of sediment / fossils / ore, and the bedrock
                             floor (chest, stalagmites, crystals) at the bottom
     .underground::before    left gallery wall: rock face, ore veins, gems, a mole, a ladder, a bucket on a rope, a
                             sign, a canary, a pickaxe, a candle jar, cave mushrooms — one 1600px-tall tile
     .underground::after     right gallery wall, drawn separately (not mirrored): the water line and its dripping tap,
                             a shelf of jars, a round miner's lamp, crates and a map, a bell, a shovel, the mine cat
     .feature::before        a timber set (lintel + two posts) around each card and a lantern pool of light
     .feature::after         a helper from the crew at each depth: the old-timer napping on the lintel, a digger in
                             goggles, a hauler with a cart — each a different person, all the same size
     .bedrock::after         crystal clusters and a helper sitting on the ledge with a mug by the last CTA
   Everything is SVG or gradients; no filters or blurs. */

/* ===== paper grain over the hero picture ===== */
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background: url("../assets/scene/grain.svg") 0 0 / 170px 170px repeat;
  /* a hint of paper tooth only: any more and the speckle lifts the darks and dulls the sun / lantern brights,
     so the whole fold reads dusty instead of lit (was 0.45, then 0.14) */
  opacity: 0.09;
}

/* ===== strata ===== */
.underground {
  --band-1: 14%;   /* topsoil → clay */
  --band-2: 38%;   /* clay → stone */
  --band-3: 62%;   /* stone → deep */
  --band-4: 90%;   /* deep → bedrock */
  background-color: var(--strata-deep, #221B3A);
  background-image:
    /* paint grain over the whole cave */
    url("../assets/scene/grain.svg"),
    /* the mine lantern's spill continues down from the hero (matches the ellipse at the foot of ground.svg) */
    radial-gradient(760px 150px at 50% 0, rgba(255, 184, 92, 0.26), rgba(255, 184, 92, 0) 100%),
    /* atmospheric depth: the gallery is lit down its middle and falls off into the rock at both sides */
    linear-gradient(to right, rgba(10, 8, 24, 0.42), rgba(10, 8, 24, 0) 22%, rgba(10, 8, 24, 0) 78%, rgba(10, 8, 24, 0.42)),
    url("../assets/scene/topsoil.svg"),
    url("../assets/scene/topsoil-props.svg"),
    url("../assets/scene/gallery.svg"),
    url("../assets/scene/floor.svg"),
    url("../assets/scene/edge-1.svg"),
    url("../assets/scene/edge-2.svg"),
    url("../assets/scene/edge-3.svg"),
    url("../assets/scene/edge-4.svg"),
    url("../assets/scene/gems-tile.svg"),
    linear-gradient(to bottom,
      var(--strata-topsoil, #5A3627) 0, #513022 var(--band-1),
      var(--strata-clay, #7A4B24) var(--band-1), #6A3F21 var(--band-2),
      var(--strata-stone, #46293A) var(--band-2), #382131 var(--band-3),
      var(--strata-deep, #221B3A) var(--band-3), #191430 var(--band-4),
      var(--bedrock, #0D0B1B) var(--band-4), #06050E 100%);
  /* NOTE: anything with a character or a landmark in it must NEVER repeat, or the same miner shows up twice
     side by side on a wide screen. Only the seamless texture bands tile: grain, topsoil, floor, edges, gems. */
  background-repeat: repeat, no-repeat, no-repeat, repeat-x, no-repeat, no-repeat, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x, repeat, no-repeat;
  background-position:
    0 0,
    center top,
    0 0,
    center top,
    center top,
    center 130px,
    center bottom,
    0 var(--band-1),
    0 var(--band-2),
    0 var(--band-3),
    0 var(--band-4),
    0 0,
    0 0;
  background-size:
    170px 170px,
    100% 150px,
    100% 100%,
    auto 240px,
    auto 240px,
    auto 320px,
    auto 200px,
    600px 48px,
    600px 48px,
    600px 48px,
    600px 48px,
    960px 960px,
    100% 100%;
  background-blend-mode: soft-light, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal, normal;
}

/* ===== gallery walls, left and right (wide screens) — two different drawings ===== */
.underground::before,
.underground::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  height: auto;
  width: 200px;
  opacity: 1;
  pointer-events: none;
}
.underground::before {
  left: 0;
  right: auto;
  background: url("../assets/scene/wall.svg") left top / 200px auto repeat-y;
}
.underground::after {
  left: auto;
  right: 0;
  transform: none;
  background: url("../assets/scene/wall-right.svg") right top / 200px auto repeat-y;
}

/* ===== timber sets and lantern pools around the feature cards ===== */
.feature {
  position: relative;
  isolation: isolate;
}
.feature::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -26px;
  bottom: -14px;
  left: -60px;
  right: -60px;
  padding: 0 26px;
  pointer-events: none;
  background-image:
    url("../assets/scene/lintel.svg"),
    url("../assets/scene/post.svg"),
    url("../assets/scene/post.svg"),
    radial-gradient(60% 100% at 50% 0%, rgba(255, 184, 92, 0.26), rgba(255, 184, 92, 0.07) 60%, rgba(255, 184, 92, 0) 88%);
  background-repeat: repeat-x, repeat-y, repeat-y, no-repeat;
  background-position: left top, left 30px top 22px, right 30px top 22px, center;
  background-size: auto 30px, 26px auto, 26px auto, 100% 100%;
  background-clip: content-box, padding-box, padding-box, border-box;
  border-radius: 8px;
  box-shadow: 0 0 60px 18px rgba(255, 184, 92, 0.09);
}
.feature::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background: no-repeat center / contain;
}
/* 0 m: the old-timer is napping on the lintel — idle by design */
.feature:nth-child(1)::after {
  right: 44px;
  bottom: 100%;
  margin-bottom: 21px;
  width: 150px;
  height: 92px;
  background-image: url("../assets/scene/crew-nap.svg");
}
/* 25 m: a digger in goggles swinging a pickaxe at the timber, sparks flying */
.feature:nth-child(2)::after {
  right: 100%;
  margin-right: 4px;
  bottom: -8px;
  width: 87px;
  height: 96px;
  background-image: url("../assets/scene/crew-dig.svg");
}
/* 50 m: the hauler pushing a cart of ore back up the gallery */
.feature:nth-child(3)::after {
  right: 100%;
  margin-right: 10px;
  bottom: -10px;
  width: 140px;
  height: 84px;
  background-image: url("../assets/scene/crew-cart.svg");
}

/* ===== bedrock: crystals around the last CTA, and a helper on a break sitting on the ledge =====
   (.bedrock::before belongs to the motion piece — an ember glow — so all the art lives on ::after) */
.bedrock {
  position: relative;
  isolation: isolate;
}
.bedrock::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -80px -50px -30px;
  pointer-events: none;
  background-image:
    url("../assets/scene/crew-sit.svg"),
    url("../assets/scene/crystals-a.svg"),
    url("../assets/scene/crystals-b.svg"),
    radial-gradient(closest-side at 34% 26%, rgba(255, 184, 92, 0.26), rgba(255, 184, 92, 0.07) 52%, rgba(255, 184, 92, 0) 82%);
  background-repeat: no-repeat;
  background-position: right 40px top 6px, right 34px bottom 20px, left 24px top 22px, center;
  background-size: 128px auto, 168px auto, 88px auto, 100% 100%;
}

/* ===== responsive: narrower galleries, then a phone-sized cave ===== */
@media (max-width: 1399px) {
  .underground::before, .underground::after { width: 100px; }
}
@media (max-width: 1099px) {
  .underground::before, .underground::after { width: 56px; }
  /* less room right of the heading: the gallery scene shrinks a little and parks against the copy's right edge */
  .underground {
    background-position: 0 0, center top, 0 0, center top, center top, -71px 145px, center bottom, 0 var(--band-1), 0 var(--band-2), 0 var(--band-3), 0 var(--band-4), 0 0, 0 0;
    background-size: 170px 170px, 100% 150px, 100% 100%, auto 240px, auto 240px, auto 260px, auto 200px, 600px 48px, 600px 48px, 600px 48px, 600px 48px, 960px 960px, 100% 100%;
  }
}
@media (max-width: 820px) {
  .underground::before, .underground::after { display: none; }
  /* Phones: the underground starts inside the first screen, so only the topsoil strip (and the grain tile the hero
     already fetched) stay on .underground. The strata below the fold ride on a pseudo-element that begins 150px
     down — outside the first viewport — so their images never compete with the hero for bandwidth while loading.
     Its gradient stops are the same bands expressed in its own height (H-150): 14%H-150 = 14%(H-150)-129 etc. */
  .underground {
    background-color: var(--strata-topsoil, #5A3627);
    background-image:
      url("../assets/scene/grain.svg"),
      radial-gradient(760px 150px at 50% 0, rgba(255, 184, 92, 0.26), rgba(255, 184, 92, 0) 100%),
      url("../assets/scene/topsoil-props.svg"),
      url("../assets/scene/topsoil.svg");
    background-repeat: repeat, no-repeat, no-repeat, repeat-x;
    background-position: 0 0, center top, 53% top, 53% top;
    background-size: 170px 170px, 100% 110px, auto 150px, auto 150px;
    background-blend-mode: soft-light, normal, normal, normal;
  }
  .underground__inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 150px;
    bottom: -140px;
    width: 100vw;
    translate: -50% 0;
    pointer-events: none;
    background-image:
      url("../assets/scene/grain.svg"),
      url("../assets/scene/edge-1.svg"),
      url("../assets/scene/edge-2.svg"),
      url("../assets/scene/edge-3.svg"),
      url("../assets/scene/edge-4.svg"),
      url("../assets/scene/gems-tile.svg"),
      linear-gradient(to bottom,
        #563325 0, #513022 calc(14% - 129px),
        var(--strata-clay, #7A4B24) calc(14% - 129px), #6A3F21 calc(38% - 93px),
        var(--strata-stone, #46293A) calc(38% - 93px), #382131 calc(62% - 57px),
        var(--strata-deep, #221B3A) calc(62% - 57px), #191430 calc(90% - 15px),
        var(--bedrock, #0D0B1B) calc(90% - 15px), #06050E 100%);
    background-repeat: repeat, repeat-x, repeat-x, repeat-x, repeat-x, repeat, no-repeat;
    background-position: 0 -150px, 0 calc(14% - 129px), 0 calc(38% - 93px), 0 calc(62% - 57px), 0 calc(90% - 15px), 0 0, 0 0;
    background-size: 170px 170px, 480px 40px, 480px 40px, 480px 40px, 480px 40px, 640px 640px, 100% 100%;
    background-blend-mode: soft-light, normal, normal, normal, normal, normal, normal;
  }
  /* the bedrock floor hangs off the footer (the last thing on the page), bottom-aligned with the cave */
  .footer::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: -160px;
    bottom: 0;
    width: 100vw;
    translate: -50% 0;
    pointer-events: none;
    background: url("../assets/scene/floor.svg") 55% bottom / auto 120px repeat-x;
  }
  .feature::before {
    top: -22px;
    bottom: -10px;
    left: -18px;
    right: -18px;
    padding: 0;
    background-position: left top, left 4px top 18px, right 4px top 18px, center;
    background-size: auto 24px, 18px auto, 18px auto, 100% 100%;
    box-shadow: 0 0 40px 10px rgba(255, 184, 92, 0.08);
  }
  .feature:nth-child(1)::after {
    right: 18px;
    margin-bottom: 17px;
    width: 104px;
    height: 60px;
  }
  .feature:nth-child(2)::after,
  .feature:nth-child(3)::after { display: none; }
  /* the hauler and his cart, parked in the clear stretch of gallery mobile.css leaves between the last card and
     the bedrock CTA (the only free spot in the phone-sized cave) */
  .features { position: relative; }
  .features::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 6%; /* left, so he is not stacked over the helper on the ledge at the CTA's top-right corner */
    margin-top: 12px;
    width: 132px;
    height: 80px;
    pointer-events: none;
    background: url("../assets/scene/crew-cart.svg") no-repeat center / contain;
  }
  .bedrock::after {
    inset: -72px -20px -24px;
    background-image:
      url("../assets/scene/crew-sit.svg"),
      url("../assets/scene/crystals-a.svg"),
      radial-gradient(70% 60% at 30% 20%, rgba(255, 184, 92, 0.30), rgba(255, 184, 92, 0.08) 55%, rgba(255, 184, 92, 0) 85%);
    background-position: right 22px top 4px, right 8px bottom 6px, center;
    background-size: 100px auto, 96px auto, 100% 100%;
  }
}