/* ============================================================
   yourcustomprofile.app — catalogue signature art
   The 20 backdrop scenes added with the rank-gated catalogue
   (content/catalog.mjs, lane `artPresets`).

   Contract, same as profile-v3.css: `.pg-art[data-art="<id>"]` paints the
   three existing layers (a: conic/radial field, b: second mass, c: one hard
   light pass). No new markup, no new animation — the layer animations are
   already owned by profile-v3.css and these rules only supply backgrounds.

   Each preset is one place. The test for whether it works: cover the card and
   you should still be able to name where you are standing.
   ============================================================ */

/* ---------------------------------------------------------- sumi paper
   One stroke, a lot of air. The paper is the subject. */
.pg-art[data-art="sumiPaper"] .pg-art__layer--a::before {
  background:
    radial-gradient(ellipse at 24% 30%, rgba(28, 26, 24, 0.85), transparent 42%),
    radial-gradient(ellipse at 72% 66%, rgba(40, 36, 32, 0.6), transparent 46%),
    linear-gradient(160deg, #e8e2d6, #cfc7b8 62%, #b8ae9d);
}
.pg-art[data-art="sumiPaper"] .pg-art__layer--b::before {
  background:
    radial-gradient(ellipse at 62% 22%, rgba(20, 18, 16, 0.5), transparent 30%),
    linear-gradient(102deg, transparent 40%, rgba(30, 26, 22, 0.35) 46%, transparent 54%);
}
.pg-art[data-art="sumiPaper"] .pg-art__layer--c::before {
  background: linear-gradient(96deg, transparent 22%, rgba(245, 240, 230, 0.5) 50%, transparent 74%);
}

/* ----------------------------------------------------------- torii fog
   A gate in low morning fog: cold blue-grey, one warm note. */
.pg-art[data-art="toriiFog"] .pg-art__layer--a::before {
  background:
    radial-gradient(ellipse at 50% 74%, rgba(180, 60, 45, 0.55), transparent 34%),
    linear-gradient(180deg, #1b2430, #2f3b47 54%, #47535f);
}
.pg-art[data-art="toriiFog"] .pg-art__layer--b::before {
  background:
    linear-gradient(180deg, transparent 46%, rgba(214, 226, 235, 0.3) 58%, transparent 70%),
    radial-gradient(ellipse at 50% 60%, rgba(230, 238, 244, 0.22), transparent 48%);
}
.pg-art[data-art="toriiFog"] .pg-art__layer--c::before {
  background: linear-gradient(180deg, transparent 30%, rgba(255, 236, 214, 0.26) 56%, transparent 78%);
}

/* ------------------------------------------------------------- koi pond
   Dark water, two red shapes. Almost nothing else. */
.pg-art[data-art="koiPond"] .pg-art__layer--a::before {
  background:
    radial-gradient(ellipse at 50% 54%, #0d2b2a, #071a1c 56%, #04100f);
}
.pg-art[data-art="koiPond"] .pg-art__layer--b::before {
  background:
    radial-gradient(ellipse at 36% 42%, rgba(220, 80, 50, 0.75), transparent 18%),
    radial-gradient(ellipse at 66% 68%, rgba(240, 130, 70, 0.55), transparent 16%);
}
.pg-art[data-art="koiPond"] .pg-art__layer--c::before {
  background: repeating-linear-gradient(114deg, transparent 0 26px, rgba(120, 200, 190, 0.14) 26px 27px);
}

/* ------------------------------------------------------------ city rain
   Neon on wet asphalt: one vertical smear per light source. */
.pg-art[data-art="cityRain"] .pg-art__layer--a::before {
  background:
    radial-gradient(ellipse at 22% 26%, rgba(236, 72, 153, 0.6), transparent 30%),
    radial-gradient(ellipse at 76% 40%, rgba(56, 189, 248, 0.55), transparent 32%),
    linear-gradient(180deg, #08080f, #101018 62%, #1a1a24);
}
.pg-art[data-art="cityRain"] .pg-art__layer--b::before {
  background:
    repeating-linear-gradient(180deg, transparent 0 6px, rgba(200, 220, 255, 0.09) 6px 7px),
    linear-gradient(180deg, transparent 48%, rgba(236, 72, 153, 0.16) 58%, transparent 72%);
}
.pg-art[data-art="cityRain"] .pg-art__layer--c::before {
  background: linear-gradient(88deg, transparent 20%, rgba(56, 189, 248, 0.3) 52%, transparent 78%);
}

/* ------------------------------------------------------------ pixel sky
   A dithered gradient, hard: every step is a band, never a blend. */
.pg-art[data-art="pixelSky"] .pg-art__layer--a::before {
  background: repeating-linear-gradient(
    180deg,
    #2b1055 0 8%, #3b1a6b 8% 16%, #5b2a8a 16% 24%,
    #8a3fa0 24% 32%, #c058a0 32% 40%, #e8789a 40% 48%,
    #f8a488 48% 56%, #f8c878 56% 64%, #f8e8a0 64% 72%,
    #e8f0a8 72% 80%, #b8e0a8 80% 88%, #88c8a8 88% 100%
  );
}
.pg-art[data-art="pixelSky"] .pg-art__layer--b::before {
  background:
    linear-gradient(0deg, #14121c 0 22%, transparent 22%),
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 255, 255, 0.05) 12px 13px);
}
.pg-art[data-art="pixelSky"] .pg-art__layer--c::before {
  background: linear-gradient(180deg, transparent 68%, rgba(20, 18, 28, 0.9) 82%, #14121c);
}

/* ----------------------------------------------------------- arena dust
   Lit dust over a dead field: warm haze, one hard light, no horizon detail. */
.pg-art[data-art="arenaDust"] .pg-art__layer--a::before {
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255, 226, 170, 0.5), transparent 44%),
    linear-gradient(180deg, #2a2318, #3a3222 48%, #211c14);
}
.pg-art[data-art="arenaDust"] .pg-art__layer--b::before {
  background: radial-gradient(ellipse at 50% 8%, rgba(255, 240, 200, 0.34), transparent 30%);
}
.pg-art[data-art="arenaDust"] .pg-art__layer--c::before {
  background: linear-gradient(180deg, transparent 40%, rgba(255, 220, 160, 0.16) 60%, transparent 88%);
}

/* ------------------------------------------------------------ riso bloom
   Two inks, one flower: pink and blue, overlapping to make a third colour. */
.pg-art[data-art="risoBloom"] .pg-art__layer--a::before {
  background:
    radial-gradient(circle at 40% 34%, rgba(244, 114, 182, 0.85), transparent 26%),
    radial-gradient(circle at 62% 58%, rgba(56, 189, 248, 0.8), transparent 28%),
    linear-gradient(160deg, #0f1024, #171a34);
}
.pg-art[data-art="risoBloom"] .pg-art__layer--b::before {
  background: radial-gradient(circle at 52% 44%, rgba(160, 120, 230, 0.6), transparent 22%);
}
.pg-art[data-art="risoBloom"] .pg-art__layer--c::before {
  background: repeating-radial-gradient(circle at 50% 46%, transparent 0 18px, rgba(255, 255, 255, 0.05) 18px 19px);
}

/* ------------------------------------------------------------ ink figure
   A shape made of absence: the figure is the only part with no light. */
.pg-art[data-art="inkFigure"] .pg-art__layer--a::before {
  background:
    radial-gradient(ellipse at 50% 46%, transparent 0 18%, rgba(230, 226, 218, 0.6) 22%, rgba(200, 194, 184, 0.24) 42%, transparent 64%),
    linear-gradient(180deg, #14130f, #1e1c17);
}
.pg-art[data-art="inkFigure"] .pg-art__layer--b::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(10, 10, 10, 0.95) 0 16%, transparent 32%);
}
.pg-art[data-art="inkFigure"] .pg-art__layer--c::before {
  background: linear-gradient(80deg, transparent 30%, rgba(245, 240, 230, 0.18) 52%, transparent 70%);
}

/* ---------------------------------------------------------- stone garden
   Raked lines and one rock. The rake is the whole picture. */
.pg-art[data-art="stoneGarden"] .pg-art__layer--a::before {
  background: repeating-linear-gradient(180deg, #d8d2c2 0 14px, #c9c2b0 14px 16px);
}
.pg-art[data-art="stoneGarden"] .pg-art__layer--b::before {
  background:
    radial-gradient(ellipse at 62% 58%, rgba(70, 66, 58, 0.85) 0 12%, transparent 18%),
    radial-gradient(ellipse at 30% 34%, rgba(96, 90, 78, 0.6) 0 7%, transparent 12%);
}
.pg-art[data-art="stoneGarden"] .pg-art__layer--c::before {
  background: linear-gradient(180deg, rgba(255, 252, 240, 0.22), transparent 42%, rgba(60, 56, 48, 0.24));
}

/* ---------------------------------------------------------- night market
   Lanterns, smoke, no faces: warm dots at three depths. */
.pg-art[data-art="nightMarket"] .pg-art__layer--a::before {
  background:
    radial-gradient(circle at 18% 24%, rgba(251, 146, 60, 0.8), transparent 8%),
    radial-gradient(circle at 42% 18%, rgba(248, 113, 113, 0.7), transparent 7%),
    radial-gradient(circle at 68% 30%, rgba(251, 191, 36, 0.65), transparent 9%),
    radial-gradient(circle at 86% 22%, rgba(251, 146, 60, 0.55), transparent 6%),
    linear-gradient(180deg, #170f0b, #221610 58%, #120c09);
}
.pg-art[data-art="nightMarket"] .pg-art__layer--b::before {
  background:
    radial-gradient(ellipse at 34% 56%, rgba(251, 191, 36, 0.16), transparent 34%),
    radial-gradient(ellipse at 72% 48%, rgba(248, 113, 113, 0.12), transparent 30%);
}
.pg-art[data-art="nightMarket"] .pg-art__layer--c::before {
  background: linear-gradient(180deg, transparent 52%, rgba(251, 191, 36, 0.1) 72%, transparent 92%);
}

/* ------------------------------------------------------------ cyanotype
   A photographic blue, sun-fixed: flat, even, and slightly deep at the edges. */
.pg-art[data-art="cyanotype"] .pg-art__layer--a::before {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(120, 190, 235, 0.55), transparent 52%),
    linear-gradient(180deg, #0b2f52, #14487f 54%, #0a2644);
}
.pg-art[data-art="cyanotype"] .pg-art__layer--b::before {
  background:
    radial-gradient(ellipse at 34% 38%, rgba(220, 240, 255, 0.24), transparent 26%),
    radial-gradient(ellipse at 70% 66%, rgba(180, 220, 250, 0.18), transparent 24%);
}
.pg-art[data-art="cyanotype"] .pg-art__layer--c::before {
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(4, 20, 36, 0.6) 88%);
}

/* ----------------------------------------------------------- silkscreen
   Three passes, one misplaced: each pass is a hard flat shape, and the third
   sits four pixels off. */
.pg-art[data-art="silkscreen"] .pg-art__layer--a::before {
  background:
    linear-gradient(115deg, rgba(239, 68, 68, 0.75) 0 34%, transparent 34%),
    linear-gradient(115deg, transparent 34% 62%, rgba(250, 204, 21, 0.65) 62%);
}
.pg-art[data-art="silkscreen"] .pg-art__layer--b::before {
  background: linear-gradient(115deg, transparent 38% 58%, rgba(59, 130, 246, 0.6) 58%);
  translate: 4px 3px;
}
.pg-art[data-art="silkscreen"] .pg-art__layer--c::before {
  background: linear-gradient(180deg, rgba(10, 10, 14, 0.4), transparent 40%, rgba(10, 10, 14, 0.7));
}

/* ---------------------------------------------------------- vitrine room
   A case in an empty hall: one lit object, everything else grey. */
.pg-art[data-art="vitrineRoom"] .pg-art__layer--a::before {
  background:
    radial-gradient(ellipse at 50% 54%, rgba(226, 232, 240, 0.5), transparent 22%),
    linear-gradient(180deg, #1c1e22, #26292e 60%, #14161a);
}
.pg-art[data-art="vitrineRoom"] .pg-art__layer--b::before {
  background:
    linear-gradient(180deg, transparent 62%, rgba(226, 232, 240, 0.12) 66%, transparent 70%),
    linear-gradient(90deg, transparent 18%, rgba(226, 232, 240, 0.08) 20%, transparent 22%, transparent 78%, rgba(226, 232, 240, 0.08) 80%, transparent 82%);
}
.pg-art[data-art="vitrineRoom"] .pg-art__layer--c::before {
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.16), transparent 38%);
}

/* --------------------------------------------------------- archival light
   A shelf, lit from the left: the light falls off across the frame. */
.pg-art[data-art="archivalLight"] .pg-art__layer--a::before {
  background:
    linear-gradient(90deg, rgba(226, 214, 190, 0.6), rgba(150, 140, 122, 0.28) 46%, rgba(40, 38, 34, 0.7)),
    linear-gradient(180deg, #2a2620, #1c1a16);
}
.pg-art[data-art="archivalLight"] .pg-art__layer--b::before {
  background: repeating-linear-gradient(0deg, transparent 0 54px, rgba(20, 18, 14, 0.65) 54px 56px);
}
.pg-art[data-art="archivalLight"] .pg-art__layer--c::before {
  background: linear-gradient(90deg, rgba(255, 246, 226, 0.34), transparent 34%);
}

/* ------------------------------------------------------------ caustic pool
   Light on the bottom of a pool: bright net, cold water, no surface. */
.pg-art[data-art="causticPool"] .pg-art__layer--a::before {
  background:
    repeating-conic-gradient(from 0deg at 30% 40%, rgba(186, 230, 253, 0.35) 0 4deg, transparent 4deg 14deg),
    repeating-conic-gradient(from 40deg at 72% 66%, rgba(56, 189, 248, 0.28) 0 3deg, transparent 3deg 12deg),
    linear-gradient(180deg, #06303f, #0a4a5e 52%, #032430);
}
.pg-art[data-art="causticPool"] .pg-art__layer--b::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(125, 211, 252, 0.22), transparent 56%);
}
.pg-art[data-art="causticPool"] .pg-art__layer--c::before {
  background: linear-gradient(180deg, transparent 40%, rgba(186, 230, 253, 0.14) 66%, transparent 90%);
}

/* --------------------------------------------------------- eclipse field
   A corona over a dark plain: one ring, one flat ground. */
.pg-art[data-art="eclipseField"] .pg-art__layer--a::before {
  background:
    radial-gradient(circle at 50% 40%, #050507 0 14%, rgba(255, 226, 170, 0.55) 15%, rgba(255, 200, 120, 0.16) 22%, transparent 32%),
    linear-gradient(180deg, #101018, #16161e 62%, #0a0a10);
}
.pg-art[data-art="eclipseField"] .pg-art__layer--b::before {
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 220, 160, 0.2), transparent 40%);
}
.pg-art[data-art="eclipseField"] .pg-art__layer--c::before {
  background: linear-gradient(180deg, transparent 62%, rgba(255, 220, 160, 0.08) 74%, transparent 92%);
}

/* -------------------------------------------------------- wireframe city
   Unlit edges, infinite depth: a vanishing-point grid with no fills at all. */
.pg-art[data-art="wireframeCity"] .pg-art__layer--a::before {
  background:
    linear-gradient(180deg, transparent 38%, rgba(148, 163, 184, 0.4) 38.4%, transparent 39%),
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(148, 163, 184, 0.22) 40px 41px),
    linear-gradient(180deg, #08080c, #12121a 56%, #08080c);
}
.pg-art[data-art="wireframeCity"] .pg-art__layer--b::before {
  background:
    linear-gradient(62deg, transparent 46%, rgba(148, 163, 184, 0.28) 46.3%, transparent 46.8%),
    linear-gradient(118deg, transparent 46%, rgba(148, 163, 184, 0.22) 46.3%, transparent 46.8%);
}
.pg-art[data-art="wireframeCity"] .pg-art__layer--c::before {
  background: linear-gradient(180deg, transparent 44%, rgba(226, 232, 240, 0.14) 52%, transparent 60%);
}

/* ---------------------------------------------------------- server aisle
   One lit rack in a dark row: a single warm column, everything else cold. */
.pg-art[data-art="serverAisle"] .pg-art__layer--a::before {
  background:
    linear-gradient(90deg, #0a0c10 0 22%, rgba(34, 211, 238, 0.16) 34%, rgba(34, 211, 238, 0.22) 50%, rgba(34, 211, 238, 0.16) 66%, #0a0c10 78%),
    linear-gradient(180deg, #05070a, #0b0e14);
}
.pg-art[data-art="serverAisle"] .pg-art__layer--b::before {
  background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(34, 211, 238, 0.14) 18px 20px);
  -webkit-mask: linear-gradient(90deg, transparent 26%, #000 42%, #000 58%, transparent 74%);
  mask: linear-gradient(90deg, transparent 26%, #000 42%, #000 58%, transparent 74%);
}
.pg-art[data-art="serverAisle"] .pg-art__layer--c::before {
  background: linear-gradient(180deg, transparent 40%, rgba(34, 211, 238, 0.1) 60%, transparent 84%);
}

/* ------------------------------------------------------------- onyx hall
   Black stone, one slit of light: the slit is the entire composition. */
.pg-art[data-art="onyxHall"] .pg-art__layer--a::before {
  background:
    linear-gradient(90deg, transparent 46%, rgba(255, 246, 226, 0.5) 49.4%, rgba(255, 246, 226, 0.18) 50.6%, transparent 54%),
    linear-gradient(180deg, #06060a, #14141c 56%, #050508);
}
.pg-art[data-art="onyxHall"] .pg-art__layer--b::before {
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 246, 226, 0.16), transparent 42%);
}
.pg-art[data-art="onyxHall"] .pg-art__layer--c::before {
  background: linear-gradient(180deg, transparent 30%, rgba(255, 246, 226, 0.06) 52%, transparent 76%);
}

/* ------------------------------------------------------------ gilt frame
   An empty frame, lit hard: the gold is the subject and nothing hangs in it. */
.pg-art[data-art="giltFrame"] .pg-art__layer--a::before {
  background:
    linear-gradient(180deg, transparent 18%, rgba(214, 178, 96, 0.5) 20%, transparent 22%),
    linear-gradient(180deg, transparent 78%, rgba(214, 178, 96, 0.42) 80%, transparent 82%),
    linear-gradient(90deg, transparent 16%, rgba(214, 178, 96, 0.5) 18%, transparent 20%),
    linear-gradient(90deg, transparent 80%, rgba(214, 178, 96, 0.42) 82%, transparent 84%),
    linear-gradient(170deg, #14100a, #1f1912);
}
.pg-art[data-art="giltFrame"] .pg-art__layer--b::before {
  background: radial-gradient(ellipse at 50% 34%, rgba(255, 236, 190, 0.2), transparent 44%);
}
.pg-art[data-art="giltFrame"] .pg-art__layer--c::before {
  background: linear-gradient(150deg, transparent 30%, rgba(255, 246, 214, 0.28) 52%, transparent 72%);
}

/* ═════════════════════════════════════════ third wave: the ladder ══════
   Fifteen more places, three per rank. The contract is unchanged: three
   layers, each one a `background` on a pseudo, no new markup and no new
   animation. The test is the same — cover the card and you can still name
   where you are standing. */

/* -------------------------------------------------------------- press room
   Two machines, one window: the light is the only warm thing in the room. */
.pg-art[data-art="pressRoom"] .pg-art__layer--a::before {
  background:
    linear-gradient(90deg, rgba(255, 226, 168, 0.16), transparent 34%),
    linear-gradient(180deg, #12120f, #1c1b17 58%, #0e0e0c);
}
.pg-art[data-art="pressRoom"] .pg-art__layer--b::before {
  background:
    linear-gradient(90deg, transparent 18%, rgba(70, 68, 60, 0.9) 18% 34%, transparent 34%),
    linear-gradient(90deg, transparent 58%, rgba(58, 56, 50, 0.85) 58% 78%, transparent 78%);
}
.pg-art[data-art="pressRoom"] .pg-art__layer--c::before {
  background: linear-gradient(74deg, rgba(255, 226, 168, 0.16) 0 12%, transparent 32%);
}

/* ------------------------------------------------------------- proof sheet
   A grid of tries, one inked: the grid is regular and only one cell has
   anything in it, which is the joke. */
.pg-art[data-art="proofSheet"] .pg-art__layer--a::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(240, 236, 226, 0.09) 46px 47px),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(240, 236, 226, 0.09) 46px 47px),
    linear-gradient(168deg, #e6e0d2, #cdc6b6);
}
.pg-art[data-art="proofSheet"] .pg-art__layer--b::before {
  background: radial-gradient(ellipse 46px 40px at 34% 42%, rgba(30, 26, 22, 0.72), transparent 72%);
}
.pg-art[data-art="proofSheet"] .pg-art__layer--c::before {
  background: linear-gradient(118deg, transparent 40%, rgba(255, 250, 240, 0.24) 52%, transparent 66%);
}

/* ------------------------------------------------------------ binding line
   A stitched spine in shadow: one vertical seam, the stitches crossing it. */
.pg-art[data-art="bindingLine"] .pg-art__layer--a::before {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0 8%, rgba(146, 132, 112, 0.28) 8% 9%, transparent 9%),
    linear-gradient(160deg, #2a241d, #1a1612 62%, #100d0a);
}
.pg-art[data-art="bindingLine"] .pg-art__layer--b::before {
  background: repeating-linear-gradient(
    0deg,
    transparent 0 22px,
    rgba(226, 214, 196, 0.5) 22px 30px,
    transparent 30px 52px
  );
  background-size: 7px 100%;
  background-position: 8.4% 0;
  background-repeat: no-repeat;
}
.pg-art[data-art="bindingLine"] .pg-art__layer--c::before {
  background: linear-gradient(96deg, rgba(255, 244, 222, 0.12), transparent 26%);
}

/* ---------------------------------------------------------------- mat hall
   A pale wall, one dark opening: the mat is the wall, the opening is the
   subject, and the bevel is the only detail. */
.pg-art[data-art="matHall"] .pg-art__layer--a::before {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(14, 13, 16, 0.94) 0 22%, transparent 44%),
    linear-gradient(178deg, #ddd6c8, #b9b2a4 72%, #918b7f);
}
.pg-art[data-art="matHall"] .pg-art__layer--b::before {
  background:
    linear-gradient(180deg, transparent 26%, rgba(255, 252, 244, 0.5) 30%, transparent 34%),
    linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.22) 66%, transparent 70%);
  -webkit-mask: radial-gradient(ellipse 30% 26% at 50% 46%, transparent 62%, #000 72%, transparent 96%);
  mask: radial-gradient(ellipse 30% 26% at 50% 46%, transparent 62%, #000 72%, transparent 96%);
}
.pg-art[data-art="matHall"] .pg-art__layer--c::before {
  background: linear-gradient(150deg, transparent 30%, rgba(255, 252, 240, 0.3) 46%, transparent 62%);
}

/* ------------------------------------------------------------- pinned case
   One specimen, one lamp: a cone of light and a single square inside it. */
.pg-art[data-art="pinnedCase"] .pg-art__layer--a::before {
  background:
    radial-gradient(ellipse 120px 90px at 62% 44%, rgba(255, 240, 208, 0.28), transparent 70%),
    linear-gradient(170deg, #15161a, #0c0d11);
}
.pg-art[data-art="pinnedCase"] .pg-art__layer--b::before {
  background:
    linear-gradient(90deg, transparent 58%, rgba(228, 216, 196, 0.5) 59.4%, transparent 61%),
    linear-gradient(0deg, transparent 40%, rgba(228, 216, 196, 0.4) 41.4%, transparent 43%);
}
.pg-art[data-art="pinnedCase"] .pg-art__layer--c::before {
  background: linear-gradient(96deg, transparent 44%, rgba(255, 246, 222, 0.22) 56%, transparent 68%);
}

/* ------------------------------------------------------------- cold storage
   Drawers, shut, numbered: horizontal bands with one gap. */
.pg-art[data-art="coldStorage"] .pg-art__layer--a::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(255, 255, 255, 0.06) 34px 36px),
    linear-gradient(176deg, #2a2f36, #1b1f25 66%, #14171b);
}
.pg-art[data-art="coldStorage"] .pg-art__layer--b::before {
  background: linear-gradient(90deg, transparent 26%, rgba(140, 160, 180, 0.18) 26% 74%, transparent 74%);
}
.pg-art[data-art="coldStorage"] .pg-art__layer--c::before {
  background: linear-gradient(180deg, transparent 44%, rgba(206, 224, 240, 0.12) 48%, transparent 54%);
}

/* --------------------------------------------------------------- lens room
   Glass elements in a row: three circles of different sizes, nothing else. */
.pg-art[data-art="lensRoom"] .pg-art__layer--a::before {
  background:
    radial-gradient(circle at 26% 54%, rgba(190, 220, 255, 0.2) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, rgba(190, 220, 255, 0.26) 0 11%, transparent 12%),
    radial-gradient(circle at 76% 56%, rgba(190, 220, 255, 0.18) 0 6%, transparent 7%),
    linear-gradient(168deg, #0b0f16, #131a24);
}
.pg-art[data-art="lensRoom"] .pg-art__layer--b::before {
  background: radial-gradient(circle at 50% 50%, transparent 0 10.5%, rgba(255, 255, 255, 0.3) 11%, transparent 12.4%);
}
.pg-art[data-art="lensRoom"] .pg-art__layer--c::before {
  background: linear-gradient(122deg, transparent 36%, rgba(210, 232, 255, 0.18) 52%, transparent 70%);
}

/* ------------------------------------------------------------- flare field
   A low sun and a long streak: the horizon is low and the streak is long. */
.pg-art[data-art="flareField"] .pg-art__layer--a::before {
  background:
    radial-gradient(ellipse 220px 90px at 68% 62%, rgba(255, 214, 150, 0.55), transparent 68%),
    linear-gradient(180deg, #1a1b22 0 58%, #2c2a2a 58%, #3b352c);
}
.pg-art[data-art="flareField"] .pg-art__layer--b::before {
  background: linear-gradient(90deg, transparent 24%, rgba(255, 228, 176, 0.4) 62%, transparent 92%);
  background-size: 100% 2px;
  background-position: 0 58%;
  background-repeat: no-repeat;
}
.pg-art[data-art="flareField"] .pg-art__layer--c::before {
  background: radial-gradient(circle at 68% 62%, rgba(255, 246, 220, 0.24), transparent 40%);
}

/* -------------------------------------------------------------- prism wall
   One beam, a wall of colour: the beam enters from the left, the wall is the
   band on the right, and the two never touch. */
.pg-art[data-art="prismWall"] .pg-art__layer--a::before {
  background: linear-gradient(168deg, #0b0d12, #12161d);
}
.pg-art[data-art="prismWall"] .pg-art__layer--b::before {
  background:
    linear-gradient(90deg, transparent 0 62%, rgba(255, 120, 190, 0.24) 62% 71%, rgba(120, 200, 255, 0.22) 71% 80%, rgba(150, 240, 190, 0.2) 80% 89%, transparent 89%);
}
.pg-art[data-art="prismWall"] .pg-art__layer--c::before {
  background: linear-gradient(96deg, transparent 18%, rgba(255, 255, 255, 0.3) 34%, transparent 56%);
  background-size: 100% 1.5px;
  background-position: 0 46%;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------- server wake
   An aisle lighting up in order: four racks, one lit. */
.pg-art[data-art="serverWake"] .pg-art__layer--a::before {
  background: linear-gradient(172deg, #080a0e, #0e1218);
}
.pg-art[data-art="serverWake"] .pg-art__layer--b::before {
  background:
    repeating-linear-gradient(90deg,
      transparent 0 12%,
      rgba(46, 58, 70, 0.7) 12% 20%,
      transparent 20% 32%,
      rgba(40, 50, 62, 0.7) 32% 40%,
      transparent 40% 52%,
      rgba(34, 44, 56, 0.7) 52% 60%,
      transparent 60% 72%,
      rgba(30, 38, 48, 0.7) 72% 80%,
      transparent 80%);
}
.pg-art[data-art="serverWake"] .pg-art__layer--c::before {
  background: linear-gradient(90deg, transparent 52%, rgba(74, 222, 168, 0.22) 56% 58%, transparent 62%);
}

/* -------------------------------------------------------------- radar sweep
   A disc, one arm turning: a static arm is enough, the composition implies
   the turn. */
.pg-art[data-art="radarSweep"] .pg-art__layer--a::before {
  background:
    radial-gradient(circle at 50% 52%, rgba(74, 222, 168, 0.12) 0 30%, transparent 32%),
    linear-gradient(172deg, #060a0c, #0a1114);
}
.pg-art[data-art="radarSweep"] .pg-art__layer--b::before {
  background:
    repeating-radial-gradient(circle at 50% 52%, transparent 0 34px, rgba(74, 222, 168, 0.14) 34px 35px, transparent 35px 68px);
  -webkit-mask: radial-gradient(circle at 50% 52%, #000 0 46%, transparent 52%);
  mask: radial-gradient(circle at 50% 52%, #000 0 46%, transparent 52%);
}
.pg-art[data-art="radarSweep"] .pg-art__layer--c::before {
  background: conic-gradient(from 208deg at 50% 52%, rgba(74, 222, 168, 0.26) 0deg 24deg, transparent 24deg 360deg);
}

/* ------------------------------------------------------------- cable trench
   A cut in the floor, full of runs: one dark slot with bundles inside it. */
.pg-art[data-art="cableTrench"] .pg-art__layer--a::before {
  background:
    linear-gradient(180deg, transparent 58%, rgba(6, 7, 9, 0.96) 58% 74%, transparent 74%),
    linear-gradient(172deg, #1b1d20, #26282c 56%, #17191c);
}
.pg-art[data-art="cableTrench"] .pg-art__layer--b::before {
  background:
    repeating-linear-gradient(96deg, transparent 0 18px, rgba(255, 170, 90, 0.4) 18px 20px, transparent 20px 41px, rgba(90, 170, 255, 0.34) 41px 43px, transparent 43px 66px);
  -webkit-mask: linear-gradient(180deg, transparent 58%, #000 60%, #000 72%, transparent 74%);
  mask: linear-gradient(180deg, transparent 58%, #000 60%, #000 72%, transparent 74%);
}
.pg-art[data-art="cableTrench"] .pg-art__layer--c::before {
  background: linear-gradient(180deg, transparent 74%, rgba(255, 200, 140, 0.1) 78%, transparent 86%);
}

/* -------------------------------------------------------------- velvet room
   Cloth walls, one hard light: two folds and a light that does not soften. */
.pg-art[data-art="velvetRoom"] .pg-art__layer--a::before {
  background:
    radial-gradient(ellipse 180px 120px at 66% 34%, rgba(255, 226, 200, 0.16), transparent 70%),
    linear-gradient(160deg, #1e0d18, #2b1020 52%, #15080f);
}
.pg-art[data-art="velvetRoom"] .pg-art__layer--b::before {
  background: repeating-linear-gradient(
    104deg,
    transparent 0 62px,
    rgba(255, 220, 230, 0.06) 62px 74px,
    transparent 74px 132px
  );
}
.pg-art[data-art="velvetRoom"] .pg-art__layer--c::before {
  background: linear-gradient(88deg, transparent 40%, rgba(255, 240, 230, 0.2) 52%, transparent 58%);
}

/* ---------------------------------------------------------------- gilt vault
   Metal behind a grille: the grille is coarse, the metal is what shows
   through it. */
.pg-art[data-art="giltVault"] .pg-art__layer--a::before {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(214, 178, 96, 0.42), transparent 62%),
    linear-gradient(172deg, #1a1408, #241b0b);
}
.pg-art[data-art="giltVault"] .pg-art__layer--b::before {
  background: repeating-linear-gradient(
    90deg, transparent 0 34px, rgba(12, 10, 6, 0.9) 34px 40px
  ), repeating-linear-gradient(0deg, transparent 0 34px, rgba(12, 10, 6, 0.9) 34px 40px);
}
.pg-art[data-art="giltVault"] .pg-art__layer--c::before {
  background: linear-gradient(140deg, transparent 34%, rgba(255, 240, 200, 0.22) 50%, transparent 66%);
}

/* ------------------------------------------------------------- obsidian pool
   Black water, no reflection: the surface is darker than the rock, which is
   the only way a pool of this reads. */
.pg-art[data-art="obsidianPool"] .pg-art__layer--a::before {
  background:
    linear-gradient(180deg, #14121a 0 46%, #05040a 46%);
}
.pg-art[data-art="obsidianPool"] .pg-art__layer--b::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(150, 160, 200, 0.05) 9px 10px);
  -webkit-mask: linear-gradient(180deg, transparent 46%, #000 48%);
  mask: linear-gradient(180deg, transparent 46%, #000 48%);
}
.pg-art[data-art="obsidianPool"] .pg-art__layer--c::before {
  background: linear-gradient(96deg, transparent 30%, rgba(190, 200, 240, 0.1) 46%, transparent 62%);
}