/* Dinosaur theme, "After dark": the same black shop with amber for blood red, a reptile eye and a
   faint trail of three-toed footprints between sections. Loaded after shop.css when the theme is on. */

:root {
  --blood: #8a4f0c;          /* fills behind bone text (buttons, the banner): deep amber */
  --blood-hi: #d98a1c;       /* lines, italics, accents: amber */
  --amber-glow: 217, 138, 28;
  --print: url(../../img/themes/dinosaur/footprint.png);
}

.hero__glow { background: radial-gradient(closest-side, rgba(var(--amber-glow), .22), rgba(var(--amber-glow), .05) 55%, transparent 72%); }
.commission-art { background: radial-gradient(closest-side, rgba(var(--amber-glow), .14), transparent); }
.dot--red { box-shadow: 0 0 0 4px rgba(var(--amber-glow), .18); }

/* the marquee's stars become the drawings in turn: footprint, T-rex, skull, claw (numbered
   per half in home.php, so the loop has no jump) */
.marquee i { --icon: var(--print); font-size: 0; width: 20px; height: 24px; background: var(--blood-hi); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.marquee i[data-n="1"] { --icon: url(../../img/themes/dinosaur/trex-skeleton.png); width: 40px; }
.marquee i[data-n="2"] { --icon: url(../../img/themes/dinosaur/triceratops-skull.png); width: 30px; }
.marquee i[data-n="3"] { --icon: url(../../img/themes/dinosaur/claw.png); width: 23px; }

/* specimen numbers on the cards */
.card__no { margin-top: 4px; color: var(--blood-hi); opacity: .8; }

/* a trail of footprints walking across between sections (laid out and animated by shop.js:
   each print appears quickly and fades slowly; still and faint for reduced motion) */
main > section + section, main > .marquee + section { position: relative; }
.trail { position: absolute; left: 0; right: 0; top: 0; height: 90px; transform: translateY(-50%); pointer-events: none; overflow: hidden; }
.trail i { position: absolute; width: 22px; height: 27px; margin: -13px 0 0 -11px; opacity: 0; transform: rotate(var(--turn)); background: var(--blood-hi);
  -webkit-mask: var(--print) center / contain no-repeat; mask: var(--print) center / contain no-repeat; }
.trail.is-still i { opacity: .08; }

/* the drawings */
.commission-art img.commission-art__art { width: 84%; }
.signup { position: relative; }
.signup::before {
  content: ''; position: absolute; right: 0; top: 0; width: clamp(150px, 22vw, 320px); aspect-ratio: 761 / 800;
  transform: translateY(-30%) rotate(10deg); background: url(../../img/themes/dinosaur/claw.png) center / contain no-repeat;
  opacity: .09; pointer-events: none; z-index: -1;
}