/* ========================================================================
 * Hero battle scene — SaiCore defends server from incoming threats
 * ======================================================================== */
.hero-scene-wrap{max-width:860px;margin:0 auto;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:
  radial-gradient(ellipse at 30% 100%,rgba(34,197,94,.08),transparent 60%),
  linear-gradient(180deg,#05070a 0%,#080c0a 100%);
  box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.03);position:relative}
.hero-scene-head{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border-soft);background:rgba(0,0,0,.3);font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-dim)}
.hero-scene-head .live-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 8px var(--brand);animation:pulse 1.4s ease-in-out infinite}
.hero-scene-head .live-label{color:var(--brand);font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.hero-scene-head .counter{margin-left:auto;color:var(--ink)}
.hero-scene-head .counter .num{color:var(--brand);font-weight:700;font-variant-numeric:tabular-nums}
.hero-scene{position:relative;width:100%;height:260px;overflow:hidden;background:
  repeating-linear-gradient(0deg,transparent 0,transparent 12px,rgba(34,197,94,.025) 12px,rgba(34,197,94,.025) 13px),
  repeating-linear-gradient(90deg,transparent 0,transparent 12px,rgba(34,197,94,.025) 12px,rgba(34,197,94,.025) 13px)}
.hero-scene svg{width:100%;height:100%;display:block}
.hero-scene .scanline{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 0%,transparent 49%,rgba(34,197,94,.05) 50%,transparent 51%,transparent 100%);background-size:100% 6px;animation:scanlines 8s linear infinite;opacity:.5}
@keyframes scanlines{from{background-position:0 0}to{background-position:0 100%}}
.hero-scene .event-log{position:absolute;left:14px;bottom:12px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-dim);line-height:1.6;max-width:280px;pointer-events:none}
.hero-scene .event-log .line{opacity:0;transform:translateX(-10px);animation:logIn .3s forwards}
.hero-scene .event-log .line .t{color:var(--brand);font-weight:600}
.hero-scene .event-log .line.bad .t{color:#ef4444}
.hero-scene .event-log .line.warn .t{color:#f59e0b}
@keyframes logIn{to{opacity:1;transform:none}}

/* pixelated sprites */
.hero-scene .sprite{shape-rendering:crispEdges}

/* ninja (defender) — idle breathing, multiple attack poses */
.hero-scene .scene-ninja{animation:ninjaBreathe 3.2s ease-in-out infinite;transform-origin:center bottom;transform-box:fill-box}
@keyframes ninjaBreathe{
  0%,100%{transform:translateY(0) scaleY(1)}
  50%    {transform:translateY(-1px) scaleY(1.02)}
}
/* lean towards a target before shuriken throw */
.hero-scene .scene-ninja.lean-right{animation:ninjaLean .5s ease-out}
@keyframes ninjaLean{
  0%  {transform:translateY(0) skewX(0deg)}
  35% {transform:translateY(-2px) skewX(-4deg) scaleX(.97)}
  70% {transform:translateY(-1px) skewX(3deg) scaleX(1.03)}
  100%{transform:translateY(0) skewX(0deg)}
}
/* dash forward, strike, return */
.hero-scene .scene-ninja.dash{animation:ninjaDash .8s cubic-bezier(.4,0,.4,1)}
@keyframes ninjaDash{
  0%  {transform:translate(0,0) scale(1)}
  30% {transform:translate(28px,-2px) scale(1.06)}
  45% {transform:translate(32px,-1px) scale(1.08) rotate(-3deg)}
  55% {transform:translate(32px, 2px) scale(1.05) rotate(3deg)}
  100%{transform:translate(0,0) scale(1)}
}
/* channel — charging a beam */
.hero-scene .scene-ninja.channel{animation:ninjaChannel .4s ease-out}
@keyframes ninjaChannel{
  0%  {transform:translateY(0) scale(1)}
  50% {transform:translateY(-2px) scale(1.04);filter:drop-shadow(0 0 4px rgba(34,197,94,.6))}
  100%{transform:translateY(0) scale(1)}
}

/* shuriken fly */
.shuriken{animation:shurikenFly .45s linear forwards;transform-origin:center}
@keyframes shurikenFly{
  0%  {transform:translate(0,0) rotate(0deg);opacity:1}
  100%{transform:translate(var(--fx,180px),var(--fy,0)) rotate(900deg);opacity:1}
}

/* slash fade */
@keyframes slashFade{
  0%  {opacity:1;transform:scale(.8)}
  100%{opacity:0;transform:scale(1.3)}
}
/* beam fire */
@keyframes beamFire{
  0%  {opacity:0;stroke-width:1}
  40% {opacity:1;stroke-width:3}
  100%{opacity:0;stroke-width:1}
}
/* charge dots */
@keyframes dotFlash{
  0%  {opacity:0;transform:scale(.5)}
  50% {opacity:1;transform:scale(1.5)}
  100%{opacity:0;transform:scale(.5)}
}

/* ambient shield wave from ninja */
.shield-wave{transform-origin:center;animation:waveOut 1.4s ease-out forwards}
@keyframes waveOut{
  0%  {transform:scale(.4);opacity:.5;stroke-width:2}
  100%{transform:scale(2.4);opacity:0;stroke-width:.5}
}

/* incoming threat */
.threat{transform-origin:center;animation:threatIn 1.6s linear forwards}
@keyframes threatIn{
  0%  {transform:translateX(0);opacity:0}
  10% {opacity:1}
  100%{transform:translateX(var(--dx,-430px));opacity:1}
}
.threat.dead{animation:threatDie .35s ease-out forwards!important}
@keyframes threatDie{
  0%  {transform:translateX(var(--stop,-240px)) scale(1);opacity:1}
  60% {transform:translateX(var(--stop,-240px)) scale(1.4);opacity:1}
  100%{transform:translateX(var(--stop,-240px)) scale(0);opacity:0}
}

/* explosion ring */
.explosion{transform-origin:center;animation:explode .45s ease-out forwards;pointer-events:none}
@keyframes explode{
  0%  {transform:scale(.3);opacity:1}
  100%{transform:scale(2.2);opacity:0}
}

/* shield pulse when threat is blocked */
.shield-pulse{transform-origin:center;animation:shieldPulse .6s ease-out forwards}
@keyframes shieldPulse{
  0%  {transform:scale(.6);opacity:.7}
  100%{transform:scale(2);opacity:0}
}

@media (max-width:700px){
  .hero-scene{height:200px}
  .hero-scene .event-log{display:none}
}