/* Lumen pass: ambient light and restrained motion. Everything here is decorative, slow and
   switched off under prefers-reduced-motion. Light sources: the sky (shafts), the board (underglow
   in the colour of the last match) and impacts (enemy rim flash). */

/* ---------------------------------------------------------------- sky shafts over the battlefield */
#screen-battle > .battle-light { position: absolute; inset: 0 0 45% 0; z-index: 0; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.battle-light i { position: absolute; top: -20%; width: 22%; height: 140%; transform-origin: 50% 0;
  background: linear-gradient(180deg, #fff4d633 0%, #ffe6b018 45%, transparent 85%); filter: blur(8px); opacity: .7; animation: shaftSway 15s ease-in-out infinite; }
.battle-light i:nth-child(1) { left: 12%; rotate: 16deg; }
.battle-light i:nth-child(2) { left: 46%; width: 14%; rotate: 9deg; animation-duration: 19s; animation-delay: -6s; opacity: .5; }
.battle-light i:nth-child(3) { left: 70%; width: 26%; rotate: 20deg; animation-duration: 23s; animation-delay: -12s; opacity: .45; }
@keyframes shaftSway { 0%, 100% { translate: 0 0; opacity: .25; } 50% { translate: 6% 0; opacity: .75; } }
/* a slow-breathing vignette keeps the eye on the fight */
#screen-battle.has-art .battle-art { box-shadow: inset 0 0 calc(var(--u) * 22) calc(var(--u) * 6) #000c; }

/* ---------------------------------------------------------------- board light */
.b-board-wrap { position: relative; }
.b-board-wrap::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 112%; height: 112%; translate: -50% -50%; pointer-events: none; border-radius: 12%;
  background: radial-gradient(ellipse at 50% 50%, var(--board-glow, #e3bf78) 0%, transparent 62%); opacity: .1; filter: blur(14px); transition: opacity .9s ease-out; }
.b-board-wrap.board-lit::before { animation: boardUnderglow .9s ease-out; }
@keyframes boardUnderglow { 0% { opacity: .55; } 100% { opacity: .1; } }
.b-board-wrap.board-lit .board { animation: boardRim .7s ease-out; }
@keyframes boardRim { 0% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--board-glow) 70%, #fff), 0 0 24px 2px color-mix(in srgb, var(--board-glow) 60%, transparent); } 100% { box-shadow: none; } }

/* A light sheen crosses the runes now and then — once every ~11 s, never while you read it. */
.board::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 42%, #fff6dc2e 50%, transparent 58%) no-repeat; background-size: 260% 100%; background-position: 140% 0; animation: boardSheen 11s ease-in-out infinite; animation-delay: 3s; }
@keyframes boardSheen { 0% { background-position: 140% 0; } 14% { background-position: -40% 0; } 100% { background-position: -40% 0; } }

/* ---------------------------------------------------------------- actors */
.enemy.lit-hit .portrait img { animation: actorLit .45s ease-out, actorIdle 4s ease-in-out infinite; }
@keyframes actorLit { 0% { filter: brightness(1.9) saturate(.7) drop-shadow(0 0 10px #ffd7a8); } 100% { filter: drop-shadow(0 8px 5px #000b); } }
/* the hero portrait breathes slowly, the frontier of the HUD feels alive without moving layout */
.b-player .avatar img { animation: heroBreath 5s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes heroBreath { 50% { transform: scale(1.04); filter: brightness(1.08); } }

/* ---------------------------------------------------------------- skills */
.skill.ready .ic { position: relative; overflow: hidden; }
.skill.ready .ic::after { content: ''; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(120deg, transparent 35%, #fff3cf66 50%, transparent 65%) no-repeat; background-size: 250% 100%; animation: skillGlint 3.2s ease-in-out infinite; }
.skill.ready:nth-child(2) .ic::after { animation-delay: .4s; } .skill.ready:nth-child(3) .ic::after { animation-delay: .8s; } .skill.ready:nth-child(4) .ic::after { animation-delay: 1.2s; }
@keyframes skillGlint { 0% { background-position: 130% 0; } 35%, 100% { background-position: -30% 0; } }
.skill.ult.ready { animation: ultReady 2.2s ease-in-out infinite; }
@keyframes ultReady { 50% { box-shadow: 0 0 0 1px #ffd98a, 0 0 18px #ffb44a88; } }

@media (prefers-reduced-motion: reduce) {
  .battle-light i, .board::after, .b-board-wrap.board-lit::before, .b-board-wrap.board-lit .board, .enemy.lit-hit .portrait img,
  .b-player .avatar img, .skill.ready .ic::after, .skill.ult.ready { animation: none !important; }
}