/* Fairy Elf hero variant (hero-elf.html / js/hero-elf.js): the picture ends in a softer, shorter fade so her boots stay visible */
.hero::after { height: 80px; }
.hero::before {
  background:
    linear-gradient(180deg, rgba(11, 9, 8, .45) 0%, rgba(11, 9, 8, 0) 28%, rgba(11, 9, 8, 0) 74%, var(--stone-950) 100%),
    radial-gradient(60% 80% at 22% 50%, rgba(8, 10, 18, .55), transparent 75%);
}

@media (max-width: 860px) {  /* phone: picture on top; the elf is full-body, so the text starts lower and the fade is shorter */
  .hero { padding-top: calc(var(--art-h, 420px) - 24px); }
  .hero canvas#embers {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--art-h, 420px) - 70px), transparent var(--art-h, 420px));
    mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--art-h, 420px) - 70px), transparent var(--art-h, 420px));
  }
}

@media (min-width: 861px) {  /* text column = 470 px (site.css meant that, but `.hero p.lead` { max-width: 640px } wins), so the elf has a fixed free space */
  .hero p.lead { max-width: 470px; }
}

/* ---- close-up variant (hero-elf-close.html, class hero--close): head + upper body fill the hero, the lower body fades into the dark like the knight ---- */
.hero--close::after { height: 150px; }
@media (max-width: 860px) {
  .hero--close { padding-top: calc(var(--art-h, 420px) - 90px); }
  .hero--close canvas#embers {
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--art-h, 420px) - 150px), transparent var(--art-h, 420px));
    mask-image: linear-gradient(180deg, #000 0, #000 calc(var(--art-h, 420px) - 150px), transparent var(--art-h, 420px));
  }
}

@media (min-width: 861px) {  /* desktop: the logo is as big as in the web/ preview (site.css has it at 270 px here); the phone keeps its own size */
  .hero__logo { width: min(420px, 62vw); }
}