/* Static decoration: lantern glows, the seigaiha wave band and the sakura petals.
   How they move lives in motion.css, so turning motion off never removes the picture. */

/* ---------- Lanterns and waves (inside .hero) ---------- */
.lantern {
  position: absolute; top: -40px; width: 340px; height: 340px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(255, 190, 90, .5), rgba(242, 165, 59, .16) 45%, transparent 70%);
}
.lantern-left { left: -60px; }
.lantern-right { right: -50px; top: -20px; width: 280px; height: 280px; }
.waves {
  position: absolute; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none; z-index: 0; opacity: .2;
  background: url("/static/img/seigaiha.svg") repeat-x left bottom / 80px 40px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 85%);
  mask-image: linear-gradient(180deg, transparent, #000 85%);
}

/* ---------- Sakura petals ---------- */
.petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.petals span { /* cut-outs of real blossoms and petals, five shapes in turn */
  position: absolute; top: -40px; left: var(--x); width: calc(var(--size) * 1.8); height: calc(var(--size) * 1.8);
  opacity: .9; background: url("/static/img/sakura/petal-1.webp") center / contain no-repeat;
}
.petals span:nth-child(5n + 2) { background-image: url("/static/img/sakura/petal-4.webp"); }
.petals span:nth-child(5n + 3) { background-image: url("/static/img/sakura/petal-3.webp"); }
.petals span:nth-child(5n + 4) { background-image: url("/static/img/sakura/petal-5.webp"); }
.petals span:nth-child(5n) { background-image: url("/static/img/sakura/petal-2.webp"); }

/* On the catalog's paper panel the wave band sits at the top and uses the paper tones. */
.catalog > .waves { z-index: 0; top: 0; bottom: auto; height: 120px; opacity: .13; transform: scaleY(-1); }
.catalog-inner { position: relative; z-index: 1; }

/* ---------- Icons ---------- */
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.2em; }
.tabbar .icon { width: 22px; height: 22px; }
.meta .icon { width: 14px; height: 14px; vertical-align: -.15em; margin-right: 2px; }

@media (max-width: 760px) {
  .lantern { width: 220px; height: 220px; }
  .waves { height: 100px; }
}