/* =============================
   css/scenes/brand.css
   ============================= */
/* ===== cena: vinheta do estúdio ===== */
#scene-brand{background:#090B10;overflow:hidden;cursor:pointer}
#scene-brand .glow{left:-60px;top:70px;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,#ff5d7344,#ff5d7300 62%);opacity:0}
#scene-brand .mk{left:90px;top:130px;width:180px;height:180px;border-radius:42px;box-shadow:0 18px 50px #ff5d7340,0 0 0 2px #ffffff14;opacity:0}
#scene-brand .wm{left:0;top:322px;width:360px;height:130px;opacity:0}
#scene-brand .ap{left:0;right:0;top:456px;text-align:center;font:600 12px "Inter","Segoe UI",Arial,sans-serif;letter-spacing:.3em;color:#8a90a3;opacity:0}
#scene-brand .stone{left:174px;top:-20px;width:12px;height:12px;border-radius:50%;background:#fff;opacity:0}
#scene-brand .tap{left:0;right:0;bottom:36px;text-align:center;font:600 11px "Inter","Segoe UI",Arial,sans-serif;letter-spacing:.25em;color:#8a90a3;opacity:0}
#scene-brand.play .glow{animation:brGlow 1.6s ease-out .1s forwards}
#scene-brand.play .stone{animation:brStone .55s cubic-bezier(.5,0,1,.6) .25s forwards}
#scene-brand.play .mk{animation:brMk .9s cubic-bezier(.2,1.3,.4,1) .85s forwards}
#scene-brand.play .wm{animation:brIn 1s ease-out 1.5s forwards}
#scene-brand.play .ap{animation:brIn 1s ease-out 2.6s forwards}
#scene-brand.play .tap{animation:brBlink 1.4s ease-in-out 3.4s infinite}
@keyframes brGlow{to{opacity:1}}
@keyframes brStone{0%{opacity:1;transform:translateY(0)}85%{opacity:1;transform:translateY(300px)}100%{opacity:0;transform:translateY(310px) scale(3)}}
@keyframes brMk{from{opacity:0;transform:scale(.55) translateY(14px)}to{opacity:1;transform:none}}
@keyframes brIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes brBlink{0%,100%{opacity:0}50%{opacity:1}}