/* Generated by assets-src/hero/build_hero.py: per screen shape, the pictures, the great lamp
   (its box, the top of its chain it swings from, and where its light comes from), the calm
   inside of the panel (for the words), the groups of flames that catch one after another
   (--step: the order, outermost first) and the flames that flicker. All in % of the picture. */
.hero {
  --pic-r: 0.5628;
  --lamp-l: 38.89%;
  --lamp-t: 0.00%;
  --lamp-w: 21.25%;
  --lamp-h: 28.71%;
  --piv-x: 51.50%;
  --piv-y: 0.00%;
  --swing-x: 49.84%;
  --swing-y: 0.00%;
  --glow-x: 49.61%;
  --glow-y: 22.47%;
  --in-l: 18.70%;
  --in-r: 83.32%;
  --in-t: 31.64%;
  --in-b: 70.69%;
  --steps: 2;
}
.hero .h-dark { background-image: url(dark.webp); }
.hero .h-lit, .hero .h-light { background-image: url(hall.webp); }
.hero .h-lamp-art { background-image: url(lamp.webp); }
.hero .h-light:nth-child(1) { display: block; --x: 4.57%; --y: 85.94%; --rx: 11.57%; --ry: 13.98%; --step: 0; }
.hero .h-light:nth-child(2) { display: block; --x: 94.90%; --y: 85.77%; --rx: 11.78%; --ry: 14.16%; --step: 0; }
.hero .h-light:nth-child(3) { display: block; --x: 17.43%; --y: 81.46%; --rx: 9.55%; --ry: 10.21%; --step: 1; }
.hero .h-light:nth-child(4) { display: block; --x: 81.83%; --y: 81.46%; --rx: 9.34%; --ry: 10.21%; --step: 1; }
.hero .h-light:nth-child(5) { display: none; }
.hero .h-light:nth-child(6) { display: none; }
.hero .h-light:nth-child(7) { display: none; }
.hero .h-light:nth-child(8) { display: none; }
.hero .h-flame:nth-child(1) { display: block; --x: 8.51%; --y: 86.15%; --s: 13.26%; }
.hero .h-flame:nth-child(2) { display: block; --x: 91.37%; --y: 86.23%; --s: 14.37%; }
.hero .h-flame:nth-child(3) { display: block; --x: 96.80%; --y: 80.39%; --s: 15.47%; }
.hero .h-flame:nth-child(4) { display: block; --x: 2.84%; --y: 80.39%; --s: 13.82%; }
.hero .h-flame:nth-child(5) { display: block; --x: 91.26%; --y: 77.55%; --s: 4.97%; }
.hero .h-flame:nth-child(6) { display: block; --x: 8.54%; --y: 77.55%; --s: 4.97%; }
.hero .h-flame:nth-child(7) { display: block; --x: 80.30%; --y: 85.19%; --s: 12.71%; }
.hero .h-flame:nth-child(8) { display: block; --x: 19.55%; --y: 85.20%; --s: 12.71%; }
.hero .h-flame:nth-child(9) { display: block; --x: 80.18%; --y: 76.73%; --s: 3.32%; }
.hero .h-flame:nth-child(10) { display: block; --x: 19.51%; --y: 76.73%; --s: 3.32%; }
.hero .h-flame:nth-child(11) { display: block; --x: 16.58%; --y: 84.81%; --s: 6.63%; }
.hero .h-flame:nth-child(12) { display: block; --x: 83.32%; --y: 84.75%; --s: 6.08%; }
.hero .h-flame:nth-child(13) { display: block; --x: 96.84%; --y: 86.70%; --s: 3.32%; }
.hero .h-flame:nth-child(14) { display: block; --x: 3.05%; --y: 86.64%; --s: 2.76%; }

@media (min-aspect-ratio: 5/8) {
  html:root .hero {
    --pic-r: 0.7500;
    --lamp-l: 42.54%;
    --lamp-t: 0.00%;
    --lamp-w: 14.73%;
    --lamp-h: 28.73%;
    --piv-x: 50.00%;
    --piv-y: 0.00%;
    --swing-x: 49.91%;
    --swing-y: 0.00%;
    --glow-x: 49.89%;
    --glow-y: 22.25%;
    --in-l: 29.01%;
    --in-r: 71.64%;
    --in-t: 31.22%;
    --in-b: 67.68%;
    --steps: 4;
  }
  html:root .hero .h-dark { background-image: url(dark-tab.webp); }
  html:root .hero .h-lit, html:root .hero .h-light { background-image: url(hall-tab.webp); }
  html:root .hero .h-lamp-art { background-image: url(lamp-tab.webp); }
  html:root .hero .h-light:nth-child(1) { display: block; --x: 2.85%; --y: 80.11%; --rx: 9.67%; --ry: 15.45%; --step: 0; }
  html:root .hero .h-light:nth-child(2) { display: block; --x: 97.05%; --y: 80.11%; --rx: 9.76%; --ry: 15.45%; --step: 0; }
  html:root .hero .h-light:nth-child(3) { display: block; --x: 9.94%; --y: 77.97%; --rx: 8.84%; --ry: 7.23%; --step: 1; }
  html:root .hero .h-light:nth-child(4) { display: block; --x: 89.87%; --y: 77.97%; --rx: 8.84%; --ry: 7.23%; --step: 1; }
  html:root .hero .h-light:nth-child(5) { display: block; --x: 16.39%; --y: 82.46%; --rx: 10.31%; --ry: 15.59%; --step: 2; }
  html:root .hero .h-light:nth-child(6) { display: block; --x: 83.24%; --y: 82.67%; --rx: 10.50%; --ry: 15.66%; --step: 2; }
  html:root .hero .h-light:nth-child(7) { display: block; --x: 25.97%; --y: 77.83%; --rx: 8.66%; --ry: 11.52%; --step: 3; }
  html:root .hero .h-light:nth-child(8) { display: block; --x: 73.85%; --y: 78.04%; --rx: 8.84%; --ry: 11.72%; --step: 3; }
  html:root .hero .h-flame:nth-child(1) { display: block; --x: 2.29%; --y: 87.14%; --s: 11.49%; }
  html:root .hero .h-flame:nth-child(2) { display: block; --x: 97.59%; --y: 87.09%; --s: 11.49%; }
  html:root .hero .h-flame:nth-child(3) { display: block; --x: 2.27%; --y: 76.82%; --s: 4.79%; }
  html:root .hero .h-flame:nth-child(4) { display: block; --x: 97.73%; --y: 76.83%; --s: 4.79%; }
  html:root .hero .h-flame:nth-child(5) { display: block; --x: 80.56%; --y: 82.16%; --s: 9.58%; }
  html:root .hero .h-flame:nth-child(6) { display: block; --x: 19.21%; --y: 82.18%; --s: 9.10%; }
  html:root .hero .h-flame:nth-child(7) { display: block; --x: 89.66%; --y: 78.24%; --s: 9.58%; }
  html:root .hero .h-flame:nth-child(8) { display: block; --x: 10.23%; --y: 78.25%; --s: 9.58%; }
  html:root .hero .h-flame:nth-child(9) { display: block; --x: 15.02%; --y: 76.74%; --s: 9.58%; }
  html:root .hero .h-flame:nth-child(10) { display: block; --x: 84.75%; --y: 76.77%; --s: 9.58%; }
  html:root .hero .h-flame:nth-child(11) { display: block; --x: 80.50%; --y: 74.21%; --s: 3.35%; }
  html:root .hero .h-flame:nth-child(12) { display: block; --x: 19.20%; --y: 74.15%; --s: 3.83%; }
  html:root .hero .h-flame:nth-child(13) { display: block; --x: 72.70%; --y: 81.51%; --s: 9.10%; }
  html:root .hero .h-flame:nth-child(14) { display: block; --x: 27.50%; --y: 80.64%; --s: 9.58%; }
}

@media (min-aspect-ratio: 6/5) {
  html.is-tablet .hero {
    --pic-r: 1.3333;
    --lamp-l: 44.61%;
    --lamp-t: 0.00%;
    --lamp-w: 9.94%;
    --lamp-h: 31.68%;
    --piv-x: 52.78%;
    --piv-y: 0.00%;
    --swing-x: 49.86%;
    --swing-y: 0.00%;
    --glow-x: 49.63%;
    --glow-y: 23.71%;
    --in-l: 32.67%;
    --in-r: 68.02%;
    --in-t: 32.04%;
    --in-b: 69.89%;
    --steps: 3;
  }
  html.is-tablet .hero .h-dark { background-image: url(dark-land.webp); }
  html.is-tablet .hero .h-lit, html.is-tablet .hero .h-light { background-image: url(hall-land.webp); }
  html.is-tablet .hero .h-lamp-art { background-image: url(lamp-land.webp); }
  html.is-tablet .hero .h-light:nth-child(1) { display: block; --x: 3.87%; --y: 79.10%; --rx: 8.66%; --ry: 22.22%; --step: 0; }
  html.is-tablet .hero .h-light:nth-child(2) { display: block; --x: 94.89%; --y: 83.24%; --rx: 7.97%; --ry: 18.45%; --step: 0; }
  html.is-tablet .hero .h-light:nth-child(3) { display: block; --x: 9.46%; --y: 89.59%; --rx: 7.35%; --ry: 15.78%; --step: 1; }
  html.is-tablet .hero .h-light:nth-child(4) { display: block; --x: 9.46%; --y: 74.22%; --rx: 7.48%; --ry: 12.74%; --step: 1; }
  html.is-tablet .hero .h-light:nth-child(5) { display: block; --x: 90.26%; --y: 87.11%; --rx: 7.35%; --ry: 13.29%; --step: 1; }
  html.is-tablet .hero .h-light:nth-child(6) { display: block; --x: 90.26%; --y: 74.13%; --rx: 7.48%; --ry: 12.83%; --step: 1; }
  html.is-tablet .hero .h-light:nth-child(7) { display: block; --x: 72.10%; --y: 82.87%; --rx: 11.97%; --ry: 19.92%; --step: 2; }
  html.is-tablet .hero .h-light:nth-child(8) { display: block; --x: 27.97%; --y: 82.78%; --rx: 11.63%; --ry: 20.01%; --step: 2; }
  html.is-tablet .hero .h-flame:nth-child(1) { display: block; --x: 90.28%; --y: 87.09%; --s: 5.03%; }
  html.is-tablet .hero .h-flame:nth-child(2) { display: block; --x: 9.45%; --y: 87.19%; --s: 5.39%; }
  html.is-tablet .hero .h-flame:nth-child(3) { display: block; --x: 90.29%; --y: 74.18%; --s: 3.23%; }
  html.is-tablet .hero .h-flame:nth-child(4) { display: block; --x: 9.46%; --y: 74.23%; --s: 2.87%; }
  html.is-tablet .hero .h-flame:nth-child(5) { display: block; --x: 72.96%; --y: 84.71%; --s: 5.03%; }
  html.is-tablet .hero .h-flame:nth-child(6) { display: block; --x: 27.06%; --y: 84.81%; --s: 4.67%; }
  html.is-tablet .hero .h-flame:nth-child(7) { display: block; --x: 24.06%; --y: 77.97%; --s: 5.03%; }
  html.is-tablet .hero .h-flame:nth-child(8) { display: block; --x: 76.18%; --y: 78.17%; --s: 5.75%; }
  html.is-tablet .hero .h-flame:nth-child(9) { display: block; --x: 4.72%; --y: 77.54%; --s: 4.31%; }
  html.is-tablet .hero .h-flame:nth-child(10) { display: block; --x: 72.94%; --y: 75.99%; --s: 2.51%; }
  html.is-tablet .hero .h-flame:nth-child(11) { display: block; --x: 95.10%; --y: 88.56%; --s: 4.31%; }
  html.is-tablet .hero .h-flame:nth-child(12) { display: block; --x: 27.06%; --y: 76.05%; --s: 2.15%; }
  html.is-tablet .hero .h-flame:nth-child(13) { display: block; --x: 95.25%; --y: 77.44%; --s: 2.15%; }
  html.is-tablet .hero .h-flame:nth-child(14) { display: block; --x: 4.62%; --y: 88.54%; --s: 2.87%; }
}