/* Abertura do LUMA PLAY. Copiada de C:\sistemas\luma-abertura\abertura.css (gerado de fonte/abertura.src.css por fonte/prefix.py, já com -webkit-). Só anima opacity e transform; medidas em vmin. */
.la{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;overflow:hidden;background:#04060c}
.la img{display:block;width:100%;height:100%}
.la-bg{position:absolute;top:0;left:0;right:0;bottom:0;background:#0A0E19;opacity:0}
.la-glow{position:absolute;left:50%;top:50%;width:150vmin;height:100vmin;margin:-50vmin 0 0 -75vmin;
  background:radial-gradient(closest-side,rgba(255,181,71,.22),rgba(224,115,31,.07) 55%,rgba(224,115,31,0));opacity:0}
.la-lock{position:absolute;left:50%;top:50%;width:94vmin;height:40vmin;margin:-20vmin 0 0 -47vmin}
.la-mv{position:absolute;left:0;top:0;width:40vmin;height:40vmin;z-index:2;-webkit-transition:-webkit-transform .35s ease-in-out;transition:transform .35s ease-in-out}
.la-cat{position:relative;width:100%;height:100%;-webkit-transform-origin:52% 70%;transform-origin:52% 70%}
.la-gata{opacity:0}
.la-eb,.la-nose{position:absolute;overflow:hidden;opacity:0}
.la-ol{left:38.37%;top:38.30%;width:11.20%;height:8.25%}
.la-or{left:60.53%;top:38.47%;width:11.20%;height:8.17%}
.la-nose{left:51.82%;top:47.80%;width:6.14%;height:4.17%}
.la-lid{position:absolute;left:-5%;right:-5%;top:-10%;height:120%;background:#030304;border-radius:0 0 50% 50%/0 0 45% 45%;-webkit-transform:translateY(0);transform:translateY(0)}
.la-txt{position:absolute;left:44vmin;top:8.1vmin;width:50vmin;height:23.8vmin;opacity:0;-webkit-transform:translateX(-25vmin);transform:translateX(-25vmin)}
.la-load{position:absolute;left:0;right:0;bottom:11%;text-align:center;opacity:0;-webkit-transition:opacity .35s;transition:opacity .35s}
.la-bar{position:relative;width:53vmin;height:.9vmin;margin:0 auto 2.6vmin;border-radius:1vmin;overflow:hidden;background:rgba(255,181,71,.16)}
.la-bar i{position:absolute;top:0;left:0;width:40%;height:100%;border-radius:1vmin;
  background:linear-gradient(90deg,rgba(255,181,71,0),#FFB547,rgba(255,181,71,0));-webkit-transform:translateX(-100%);transform:translateX(-100%)}
.la-load img{display:inline-block;width:auto;height:4.6vmin}
.la-flash{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 50% 55%,#FFE2A8,#FFB547 35%,#E0731F 75%);opacity:0}

/* Entrada (2,4 s): olhos e nariz no escuro, olhos abrem e piscam, a gata aparece, o nome desliza */
.la-in .la-eb{-webkit-animation:la-fade .25s .3s forwards;animation:la-fade .25s .3s forwards}
.la-in .la-nose{-webkit-animation:la-fade .4s .55s forwards;animation:la-fade .4s .55s forwards}
.la-in .la-lid{-webkit-animation:la-open .5s .35s cubic-bezier(.3,.7,.3,1) forwards,la-blink .26s 1.2s ease-in-out;animation:la-open .5s .35s cubic-bezier(.3,.7,.3,1) forwards,la-blink .26s 1.2s ease-in-out}
.la-in .la-bg{-webkit-animation:la-fade .8s 1.5s forwards;animation:la-fade .8s 1.5s forwards}
.la-in .la-gata{-webkit-animation:la-fade .6s 1.55s forwards;animation:la-fade .6s 1.55s forwards}
.la-in .la-glow{-webkit-animation:la-glow .9s 1.55s forwards;animation:la-glow .9s 1.55s forwards}
.la-in .la-txt{-webkit-animation:la-slide .55s 1.85s cubic-bezier(.2,.8,.2,1) forwards;animation:la-slide .55s 1.85s cubic-bezier(.2,.8,.2,1) forwards}

/* Espera (enquanto a lista carrega): "Carregando conteúdo…", barra correndo, gata pisca de vez em quando */
.la-wait .la-load{opacity:1}
.la-wait .la-bar i{-webkit-animation:la-run 1.1s linear infinite;animation:la-run 1.1s linear infinite}
.la-wait .la-glow{-webkit-animation:la-breathe 1.8s ease-in-out infinite alternate;animation:la-breathe 1.8s ease-in-out infinite alternate}
.la-wait .la-lid{-webkit-transform:translateY(-102%);transform:translateY(-102%);-webkit-animation:la-blinkloop 3.6s 1s ease-in-out infinite;animation:la-blinkloop 3.6s 1s ease-in-out infinite}

/* Saída (1,5 s): o nome sai, a gata vai ao centro e cresce até tomar a tela */
.la-out .la-load{opacity:0;-webkit-transition-duration:.2s;transition-duration:.2s}
.la-out .la-bg,.la-out .la-gata,.la-out .la-eb,.la-out .la-nose{opacity:1}
.la-out .la-lid{-webkit-animation:none;animation:none;-webkit-transform:translateY(-102%);transform:translateY(-102%)}
.la-out .la-txt{opacity:1;-webkit-transform:none;transform:none;-webkit-animation:la-txtout .3s forwards;animation:la-txtout .3s forwards}
.la-out .la-cat{-webkit-animation:la-dive .8s .4s cubic-bezier(.55,0,.85,.35) forwards;animation:la-dive .8s .4s cubic-bezier(.55,0,.85,.35) forwards}
.la-out .la-lock{-webkit-animation:la-hide .01s 1.05s forwards;animation:la-hide .01s 1.05s forwards}
.la-out .la-flash{-webkit-animation:la-flash .6s .9s forwards;animation:la-flash .6s .9s forwards}
.la-out .la-glow{opacity:.75}

@-webkit-keyframes la-fade{to{opacity:1}}
@keyframes la-fade{to{opacity:1}}
@-webkit-keyframes la-open{from{-webkit-transform:translateY(0)}to{-webkit-transform:translateY(-102%)}}
@keyframes la-open{from{transform:translateY(0)}to{transform:translateY(-102%)}}
@-webkit-keyframes la-blink{0%{-webkit-transform:translateY(-102%)}50%{-webkit-transform:translateY(0)}100%{-webkit-transform:translateY(-102%)}}
@keyframes la-blink{0%{transform:translateY(-102%)}50%{transform:translateY(0)}100%{transform:translateY(-102%)}}
@-webkit-keyframes la-blinkloop{0%{-webkit-transform:translateY(-102%)}90%{-webkit-transform:translateY(-102%)}95%{-webkit-transform:translateY(0)}100%{-webkit-transform:translateY(-102%)}}
@keyframes la-blinkloop{0%{transform:translateY(-102%)}90%{transform:translateY(-102%)}95%{transform:translateY(0)}100%{transform:translateY(-102%)}}
@-webkit-keyframes la-glow{0%{opacity:0}40%{opacity:1}100%{opacity:.75}}
@keyframes la-glow{0%{opacity:0}40%{opacity:1}100%{opacity:.75}}
@-webkit-keyframes la-breathe{from{opacity:.55}to{opacity:1}}
@keyframes la-breathe{from{opacity:.55}to{opacity:1}}
@-webkit-keyframes la-slide{to{opacity:1;-webkit-transform:translateX(0)}}
@keyframes la-slide{to{opacity:1;transform:translateX(0)}}
@-webkit-keyframes la-run{to{-webkit-transform:translateX(250%)}}
@keyframes la-run{to{transform:translateX(250%)}}
@-webkit-keyframes la-txtout{to{opacity:0;-webkit-transform:translateX(4vmin)}}
@keyframes la-txtout{to{opacity:0;transform:translateX(4vmin)}}
@-webkit-keyframes la-dive{from{-webkit-transform:scale(1)}to{-webkit-transform:scale(16)}}
@keyframes la-dive{from{transform:scale(1)}to{transform:scale(16)}}
@-webkit-keyframes la-hide{to{opacity:0}}
@keyframes la-hide{to{opacity:0}}
@-webkit-keyframes la-flash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
@keyframes la-flash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}

/* Celular em pé: tudo menor para caber na largura */
@media (orientation:portrait){
  .la-lock{width:58vmin;height:24.8vmin;margin:-12.4vmin 0 0 -29vmin}
  .la-mv{width:24.8vmin;height:24.8vmin}
  .la-txt{left:27.3vmin;top:5vmin;width:31vmin;height:14.8vmin}
  .la-bar{width:46vmin}
  .la-load img{height:4vmin}
}