/* =============================
   css/scenes/endbad.css
   ============================= */
/* ===== final ruim: o apocalipse do 22 ===== */
#scene-endbad{background:#000;overflow:hidden}
#scene-endbad .world{inset:0;transform-origin:50% 60%}
#scene-endbad .world>*{position:absolute}
#scene-endbad.play .world{animation:ebZoom 16s ease-out forwards}
@keyframes ebZoom{from{transform:scale(1)}to{transform:scale(1.1)}}
#scene-endbad .world.shk{animation:ebShake .5s linear}
@keyframes ebShake{0%,100%{transform:none}20%{transform:translate(-5px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(3px,4px)}}
#scene-endbad .l{left:0;top:0;width:360px;height:640px}

/* parallax e fogo */
#scene-endbad .smk{animation:ebSmk 14s ease-in-out infinite alternate}
@keyframes ebSmk{to{transform:translateX(-30px)}}
#scene-endbad .far{animation:ebFar 20s ease-in-out infinite alternate}
#scene-endbad .near{animation:ebNear 20s ease-in-out infinite alternate}
@keyframes ebFar{to{transform:translateX(-8px)}}
@keyframes ebNear{to{transform:translateX(-14px)}}
#scene-endbad .flame{transform-box:fill-box;transform-origin:50% 100%;animation:ebFlame .28s ease-in-out infinite alternate}
#scene-endbad .flame.f2{animation-duration:.2s;animation-delay:-.1s}
@keyframes ebFlame{from{transform:scale(1,.85) skewX(-4deg)}to{transform:scale(.92,1.15) skewX(5deg)}}

/* zumbis marchando */
#scene-endbad .zmb{animation:ebZmb 11s linear infinite}
#scene-endbad .zmb.w2{animation-duration:14s;animation-delay:-3s}
#scene-endbad .zmb.w3{animation-duration:12s;animation-delay:-6s}
@keyframes ebZmb{from{translate:0 0}to{translate:480px 0}}
#scene-endbad .zarm{transform-box:fill-box;transform-origin:0 50%;animation:ebArm .7s ease-in-out infinite alternate}
#scene-endbad .zarm.z2{animation-delay:-.35s}
@keyframes ebArm{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
#scene-endbad .zhd{transform-box:fill-box;transform-origin:50% 100%;animation:ebHd 1.1s ease-in-out infinite alternate}
@keyframes ebHd{from{transform:rotate(-7deg)}to{transform:rotate(9deg)}}

/* médicos da peste, soldados, tanque */
#scene-endbad .doc{transform-box:fill-box;transform-origin:50% 100%;animation:ebSway 2.6s ease-in-out infinite alternate}
#scene-endbad .doc.d2{animation-delay:-1.3s}
@keyframes ebSway{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
#scene-endbad .lant{animation:ebLant .5s steps(2) infinite}
@keyframes ebLant{50%{opacity:.55}}
#scene-endbad .sol{transform-box:fill-box;transform-origin:50% 100%;animation:ebSol 1.2s ease-in-out infinite alternate}
#scene-endbad .sol.s2{animation-delay:-.6s}
@keyframes ebSol{from{transform:translateY(0)}to{transform:translateY(-2px)}}
#scene-endbad .muzz{animation:ebMuzz 3.4s steps(1) infinite;opacity:0}
@keyframes ebMuzz{0%,92%{opacity:0}95%{opacity:1}100%{opacity:0}}
#scene-endbad .tankw{animation:ebTank 3.4s ease-in-out infinite}
@keyframes ebTank{0%,92%{transform:none}95%{transform:translateX(-4px)}100%{transform:none}}

/* ratos */
#scene-endbad .rat{animation:ebRat 6s linear infinite}
#scene-endbad .rat:nth-child(2){animation-duration:8s;animation-delay:-3s}
@keyframes ebRat{from{translate:0 0}to{translate:430px 0}}

/* helicóptero com holofote */
#scene-endbad .heli{left:0;top:70px;width:120px;height:60px;animation:ebHeli 12s linear infinite;z-index:2}
#scene-endbad .heli svg{width:120px;height:60px;overflow:visible}
#scene-endbad .heli .beam{fill:rgba(255,250,200,.28);stroke:none;transform-origin:28px 40px;animation:ebBeam 3s ease-in-out infinite alternate}
@keyframes ebBeam{from{transform:rotate(-12deg)}to{transform:rotate(14deg)}}
@keyframes ebHeli{from{transform:translateX(420px)}to{transform:translateX(-160px)}}
#scene-endbad .rotor{transform-box:fill-box;transform-origin:50% 50%;animation:ebRot .12s linear infinite}
@keyframes ebRot{0%{transform:scaleX(1)}50%{transform:scaleX(.55)}100%{transform:scaleX(1)}}

/* corvos */
#scene-endbad .crows{inset:0;pointer-events:none}
#scene-endbad .crows i{position:absolute;width:14px;height:5px;border-top:3px solid #111;border-radius:50% 50% 0 0;animation:ebCrow 9s linear infinite}
#scene-endbad .crows i:nth-child(1){top:150px}
#scene-endbad .crows i:nth-child(2){top:175px;animation-delay:-2s}
#scene-endbad .crows i:nth-child(3){top:130px;animation-delay:-4s;animation-duration:11s}
#scene-endbad .crows i:nth-child(4){top:200px;animation-delay:-6s}
@keyframes ebCrow{from{left:-20px}to{left:380px}}

/* H e o cachorro, apavorados */
#scene-endbad .hh{left:97px;top:386px;width:166px;height:249px;z-index:3;animation:ebH 1.4s ease-in-out infinite alternate}
@keyframes ebH{from{transform:translateX(-1.5px)}to{transform:translateX(1.5px)}}
#scene-endbad .hh>*{position:absolute}
#scene-endbad .hh .char.h{left:0;top:0;width:166px;height:249px}
#scene-endbad .dogwrap{left:34px;top:88px;width:98px;height:104px;z-index:2}
#scene-endbad .dogwrap .dogf{width:98px;height:104px}
#scene-endbad .hand{top:158px;width:20px;height:20px;border-radius:50%;background:#f2b684;border:3px solid var(--k);z-index:3}
#scene-endbad .hl{left:26px}
#scene-endbad .hr{left:122px}

/* cinzas e brasas */
#scene-endbad .ash{inset:0;overflow:hidden;pointer-events:none;z-index:4}
#scene-endbad .ash i{position:absolute;top:-10px;width:4px;height:4px;border-radius:50%;background:#bbb;opacity:0;animation:ebAsh linear infinite}
#scene-endbad .ash i.em{background:#ff8c42;box-shadow:0 0 4px #ff5a1a}
@keyframes ebAsh{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}100%{transform:translate(-60px,680px);opacity:.7}}

/* explosões e relâmpago */
#scene-endbad .boom{width:200px;height:200px;border-radius:50%;opacity:0;pointer-events:none;mix-blend-mode:screen;z-index:5;
  background:radial-gradient(circle,#fff 0,#ffd93b 25%,#ff6a1a 55%,transparent 72%)}
#scene-endbad .b1{left:10px;top:250px}
#scene-endbad .b2{left:170px;top:290px}
#scene-endbad .boom.go{animation:ebBoom .9s ease-out}
@keyframes ebBoom{0%{opacity:1;transform:scale(.2)}30%{opacity:1}100%{opacity:0;transform:scale(1.5)}}
#scene-endbad .bolt{inset:0;background:#dfe9ff;opacity:0;pointer-events:none;mix-blend-mode:screen;z-index:5}
#scene-endbad .bolt.go{animation:ebBolt .7s linear}
@keyframes ebBolt{0%{opacity:.8}10%{opacity:0}20%{opacity:.6}35%,100%{opacity:0}}

/* acabamento de cinema */
#scene-endbad .vig{inset:0;z-index:6;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 40%,rgba(30,0,0,.75) 100%)}
#scene-endbad .lb{left:0;right:0;height:52px;background:#000;z-index:7}
#scene-endbad .lb.t{top:0}
#scene-endbad .lb.b{bottom:0;display:flex;align-items:center;justify-content:center;padding:0 14px}
#scene-endbad.play .lb.t{animation:ebBarT 1.2s ease-out backwards}
#scene-endbad.play .lb.b{animation:ebBarB 1.2s ease-out backwards}
@keyframes ebBarT{from{transform:translateY(-52px)}}
@keyframes ebBarB{from{transform:translateY(52px)}}
#scene-endbad .cap{color:#ffd9d0;font:italic 700 13.5px/1.25 Georgia,"Times New Roman",serif;text-align:center;letter-spacing:.3px;opacity:0}
#scene-endbad .cap.in{animation:ebCap 3.6s ease-in-out forwards}
@keyframes ebCap{0%{opacity:0;transform:translateY(6px)}15%,80%{opacity:1;transform:none}100%{opacity:0}}
#scene-endbad .fade{inset:0;background:#000;z-index:9;pointer-events:none;opacity:0}
#scene-endbad.play .fade{animation:ebFade 1.6s ease-out forwards;opacity:1}
@keyframes ebFade{from{opacity:1}to{opacity:0}}

/* cartão final */
#scene-endbad .title{inset:0;z-index:10;background:radial-gradient(ellipse at center,rgba(40,0,0,.6),rgba(0,0,0,.9));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center;animation:ebTitle 1s ease-out}
@keyframes ebTitle{from{opacity:0;transform:scale(1.15)}}
#scene-endbad .title h2{font:900 46px/1 "PDDTitle",Impact,sans-serif;color:#e63946;text-shadow:3px 0px 0 var(--k),-3px 0px 0 var(--k),0px 3px 0 var(--k),0px -3px 0 var(--k),3px 3px 0 var(--k),-3px -3px 0 var(--k),3px -3px 0 var(--k),-3px 3px 0 var(--k),5px 5px 0 var(--k);letter-spacing:2px}
#scene-endbad .title p{margin-top:12px;font:900 18px "PDDText","Comic Sans MS",sans-serif;color:#fff;text-shadow:2px 2px 0 var(--k)}
#scene-endbad .title p b{color:#ff8c42}
#scene-endbad .title small{display:block;margin:12px 0 22px;font:700 13px/1.4 "PDDText","Comic Sans MS",sans-serif;color:#ffd0c8;text-shadow:1px 1px 0 var(--k)}
#scene-endbad .title .btn{width:100%}