/* Boss fight intro (ctrl_bossquest spawnBoss): a 50 % dim, lightning flashes, the original fx_boss_light picture
   (title plate, rune circle, name plate) zooming in with the title and the boss name on its plates, the boss card
   scaling in over the circle; then the card flies up to the pre-battle row. Times: src/ui/screens/boss-intro.js
   BOSS_INTRO. */
.boss-body {
  background: url('/assets/orig/ui/village_normal_bg.png') center / cover no-repeat #1a2a1a;
  overflow: hidden;
}
.boss-body.portal::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(50, 10, 70, .35), rgba(20, 0, 40, .3));
}
.boss-stage { position: absolute; inset: 0; z-index: 1; cursor: pointer; outline: none; }
.boss-dim { position: absolute; inset: 0; background: #000; animation: bossDim 400ms linear both; }
@keyframes bossDim { from { opacity: 0; } to { opacity: .5; } }

/* a faint second rune circle turning behind the picture */
.boss-circle {
  position: absolute; left: 50%; top: 395px; width: 760px; height: 760px; margin: -380px 0 0 -380px;
  opacity: .35; pointer-events: none; mix-blend-mode: screen;
  animation: bossCircle 40s linear infinite;
}
@keyframes bossCircle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* fx_boss_light.png (475 x 487) at 1.65x: title plate centre y 88, name plate centre y 393, circle centre y ~240 */
.boss-light {
  position: absolute; left: 50%; top: 0; width: 784px; height: 804px; margin-left: -392px;
  background: url('/assets/orig/ui/fx_boss_light.png') center / 100% 100% no-repeat;
  transform-origin: 50% 49%;
  animation: bossLight 300ms cubic-bezier(.16, 1, .3, 1) 400ms both;
}
@keyframes bossLight { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: none; } }
.boss-title, .boss-name {
  position: absolute; left: 140px; right: 140px; display: flex; align-items: center; justify-content: center;
  color: #faaa32; font-weight: 600; white-space: nowrap; text-shadow: 0 2px 3px rgba(0, 0, 0, .9);
}
.boss-title { top: 112px; height: 66px; font-size: 58px; }
.boss-name { top: 615px; height: 64px; font-size: 48px; }

.boss-card {
  position: absolute; left: 50%; top: 395px; width: 250px; height: 352px; margin: -176px 0 0 -125px;
  border: 6px solid #a9adb1; border-radius: 6px; background: #000;
  box-shadow: 0 0 0 3px #2b2e31, 0 0 26px rgba(0, 0, 0, .8);
  overflow: hidden;
  animation: bossCardIn 800ms cubic-bezier(.16, 1, .3, 1) 450ms both;
}
.boss-card > img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes bossCardIn { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }

/* lightning_long: a few lightining.png flashes across the screen */
.boss-bolt {
  position: absolute; left: -90px; right: -90px; height: 186px; margin-top: -93px; pointer-events: none;
  background: url('/assets/orig/ui/lightining.png') center / 100% 100% no-repeat;
  mix-blend-mode: screen; opacity: 0;
  animation: bossBolt 560ms step-end both;
}
@keyframes bossBolt {
  0% { opacity: 1; scale: 1 .25; } 14% { scale: 1 .5; } 28% { scale: 1 1; } 42% { scale: 1 .5; }
  57% { scale: 1 1; } 71% { scale: 1 .5; } 85% { scale: 1 .25; } 100% { opacity: 0; scale: 1 .01; }
}

/* leaving: the picture, the circle and the dim fade (BOSS_INTRO.leave); the card stays where it is - the
   pre-battle takes it over and flies it into its slot of the enemy row */
.boss-stage.leaving .boss-light, .boss-stage.leaving .boss-circle, .boss-stage.leaving .boss-bolt { animation: bossFade 300ms linear both; }
.boss-stage.leaving .boss-dim { animation: bossDimOut 300ms linear both; }
@keyframes bossFade { from { opacity: 1; } to { opacity: 0; } }
@keyframes bossDimOut { from { opacity: .5; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .boss-dim, .boss-light, .boss-card, .boss-bolt, .boss-stage.leaving .boss-light, .boss-stage.leaving .boss-dim { animation-duration: 1ms; }
  .boss-circle { animation: none; }
}