/* =============================
   css/scenes/intro.css
   ============================= */
/* ===== cena: TV com o comentarista ===== */
#scene-intro{background:repeating-linear-gradient(45deg,var(--b) 0 18px,#6bbcff 18px 36px)}

#scene-intro .tv{left:14px;right:14px;top:44px;height:372px;background:#d98a43;border:5px solid var(--k);border-radius:28px;box-shadow:6px 6px 0 var(--k)}
#scene-intro .tv::before,#scene-intro .tv::after{content:"";position:absolute;top:-38px;width:5px;height:42px;background:var(--k);transform-origin:bottom}
#scene-intro .tv::before{left:42%;transform:rotate(-28deg)}
#scene-intro .tv::after{left:58%;transform:rotate(28deg)}
#scene-intro .screen{position:absolute;left:14px;right:14px;top:14px;bottom:56px;border:5px solid var(--k);border-radius:20px;overflow:hidden;background:linear-gradient(#7fd0ff 0 60%,#3d8fe0 60%)}
#scene-intro .screen>*{position:absolute}
#scene-intro .screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 3px,#0001 3px 4px)}
#scene-intro .live{left:8px;top:8px;background:var(--r);color:#fff;font:900 11px "PDDText","Comic Sans MS",sans-serif;padding:3px 7px;border:3px solid var(--k);border-radius:8px;box-shadow:2px 2px 0 var(--k)}
#scene-intro .gfx{right:8px;top:8px;background:var(--y);font:900 13px "PDDText","Comic Sans MS",sans-serif;padding:3px 9px;border:3px solid var(--k);border-radius:10px;box-shadow:3px 3px 0 var(--k)}
#scene-intro .gfx.pop{animation:pop .3s ease-out}

/* comentarista (feito de divs) */
#scene-intro .tvhost{inset:0}
#scene-intro .tvhost>*{position:absolute;left:50%}
#scene-intro .tvhost .body{bottom:60px;width:130px;height:80px;margin-left:-65px;background:#2b2f77;border:4px solid var(--k);border-radius:46px 46px 0 0}
#scene-intro .tvhost .tie{position:absolute;left:50%;top:0;margin-left:-9px;width:18px;height:46px;background:var(--r);border:3px solid var(--k);border-radius:0 0 8px 8px}
#scene-intro .tvhost .head{bottom:128px;width:82px;height:88px;margin-left:-41px;background:#f7c08a;border:4px solid var(--k);border-radius:45% 45% 50% 50%;overflow:hidden}
#scene-intro .tvhost .hair{position:absolute;top:-2px;left:-2px;right:-2px;height:26px;background:#3a2a1a;border-bottom:4px solid var(--k);border-radius:40px 40px 10px 10px}
#scene-intro .tvhost .eye{position:absolute;top:36px;width:20px;height:20px;border:3px solid var(--k);border-radius:50%;background:radial-gradient(circle,var(--k) 0 3px,#fff 3.5px);animation:blink 4s infinite}
#scene-intro .tvhost .eye.l{left:11px}
#scene-intro .tvhost .eye.r{right:11px}
#scene-intro .tvhost .mouth{position:absolute;left:50%;bottom:11px;margin-left:-14px;width:28px;height:9px;background:#8a1c1c;border:3px solid var(--k);border-radius:0 0 16px 16px}
#scene-intro .tvhost.talk .mouth{animation:yap .16s infinite alternate}
#scene-intro .tvhost.talk .head{animation:bob .3s infinite alternate}

#scene-intro .desk{left:-4px;right:-4px;bottom:24px;height:44px;background:#8b5a2b;border-top:4px solid var(--k)}
#scene-intro .mic{position:absolute;left:24%;top:-30px;width:6px;height:30px;background:var(--k)}
#scene-intro .mic::after{content:"";position:absolute;left:-6px;top:-10px;width:18px;height:18px;background:var(--y);border:3px solid var(--k);border-radius:50%}
#scene-intro .lower{left:0;right:0;bottom:0;height:24px;background:var(--r);border-top:4px solid var(--k);overflow:hidden;color:#fff;font:700 12px/20px "PDDText","Comic Sans MS",sans-serif}
#scene-intro .lower b{position:absolute;left:0;top:0;bottom:0;z-index:1;background:var(--k);color:var(--y);padding:0 7px}
#scene-intro .lower span{position:absolute;white-space:nowrap;animation:tk 14s linear infinite}
@keyframes tk{from{transform:translateX(300px)}to{transform:translateX(-100%)}}
#scene-intro .spk{position:absolute;left:22px;bottom:18px;width:70px;height:22px;background:repeating-linear-gradient(90deg,var(--k) 0 4px,transparent 4px 10px)}
#scene-intro .knob{position:absolute;bottom:14px;width:26px;height:26px;background:var(--y);border:4px solid var(--k);border-radius:50%}
#scene-intro .k1{right:60px}
#scene-intro .k2{right:22px;background:var(--g)}

#scene-intro .dlg{left:14px;right:14px;top:438px;height:176px;background:var(--w);border:4px solid var(--k);border-radius:18px;box-shadow:6px 6px 0 var(--k);padding:14px 14px 56px}
#scene-intro .dtxt{font:700 16px/1.35 "PDDText","Comic Sans MS",sans-serif}
#scene-intro .dcount{position:absolute;right:12px;top:4px;font:700 11px sans-serif}
#scene-intro .dnext{position:absolute;right:10px;bottom:10px;padding:6px 14px;font-size:15px}
#scene-intro .dskip{position:absolute;left:8px;bottom:8px;min-width:64px;min-height:48px;padding:0 10px;background:none;border:0;font:800 14px "PDDText",sans-serif;text-decoration:underline;cursor:pointer}