/* =============================
   css/scenes/endgood.css
   ============================= */
/* ===== final bom: o povo ovaciona (cena de cinema) ===== */
#scene-endgood{background:#000;overflow:hidden}
#scene-endgood .world{inset:0;transform-origin:50% 62%}
#scene-endgood .world>*{position:absolute}
#scene-endgood.play .world{animation:egZoom 16s ease-out forwards}
@keyframes egZoom{from{transform:scale(1)}to{transform:scale(1.14)}}
#scene-endgood .bg,#scene-endgood .crowd{position:absolute;left:0;top:0;width:360px;height:640px}

/* raios de sol girando atrás da escola */
#scene-endgood .rays{left:0;top:0;width:360px;height:350px;overflow:hidden;mix-blend-mode:soft-light;pointer-events:none}
#scene-endgood .rays i{position:absolute;left:-170px;top:-190px;width:700px;height:700px;
  background:repeating-conic-gradient(from 0deg at 50% 50%,#fff 0 9deg,transparent 9deg 24deg);opacity:.8;animation:egRays 40s linear infinite}
@keyframes egRays{to{transform:rotate(360deg)}}

/* multidão batendo palma */
#scene-endgood .clapL{animation:egClapL .38s ease-in-out infinite alternate}
#scene-endgood .clapR{animation:egClapR .38s ease-in-out infinite alternate}
@keyframes egClapL{from{transform:rotate(-26deg)}to{transform:rotate(14deg)}}
@keyframes egClapR{from{transform:rotate(26deg)}to{transform:rotate(-14deg)}}

/* H com o cachorro no colo, descendo o tapete */
#scene-endgood .hh{left:97px;top:372px;width:166px;height:249px;transform-origin:50% 100%;z-index:3}
#scene-endgood.play .hh{animation:egWalk 9s cubic-bezier(.25,.6,.3,1) forwards}
@keyframes egWalk{from{transform:translateY(-150px) scale(.42);opacity:.2}12%{opacity:1}to{transform:translateY(0) scale(1)}}
#scene-endgood .hh>*{position:absolute}
#scene-endgood .hh .char.h{left:0;top:0;width:166px;height:249px}
#scene-endgood .dogwrap{left:34px;top:88px;width:98px;height:104px;z-index:2}
#scene-endgood .dogwrap .dogf{width:98px;height:104px}
#scene-endgood .dogwrap .dhead{transform-box:fill-box;transform-origin:50% 90%;animation:egDog .5s ease-in-out infinite alternate}
@keyframes egDog{from{transform:rotate(-4deg)}to{transform:rotate(4deg) translateY(-2px)}}
#scene-endgood .hand{top:158px;width:20px;height:20px;border-radius:50%;background:#f2b684;border:3px solid var(--k);z-index:3}
#scene-endgood .hl{left:26px}
#scene-endgood .hr{left:122px}

/* confete */
#scene-endgood .confetti{inset:0;overflow:hidden;pointer-events:none;z-index:5}
#scene-endgood .confetti i{position:absolute;top:-24px;border:1.5px solid #111;opacity:0}
#scene-endgood.play .confetti i{animation:egFall linear infinite}
@keyframes egFall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(680px) rotate(720deg);opacity:1}}

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

/* cartão final */
#scene-endgood .title{inset:0;z-index:10;background:radial-gradient(ellipse at center,rgba(0,0,0,.55),rgba(0,0,0,.86));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center;animation:egTitle 1s ease-out}
@keyframes egTitle{from{opacity:0;transform:scale(1.15)}}
#scene-endgood .title h2{font:900 46px/1 "PDDTitle",Impact,sans-serif;color:var(--y);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-endgood .title p{margin-top:12px;font:900 18px "PDDText","Comic Sans MS",sans-serif;color:#fff;text-shadow:2px 2px 0 var(--k)}
#scene-endgood .title p b{color:var(--g)}
#scene-endgood .title small{display:block;margin:12px 0 22px;font:700 13px/1.4 "PDDText","Comic Sans MS",sans-serif;color:#ffe9a8;text-shadow:1px 1px 0 var(--k)}
#scene-endgood .title .btn{width:100%}