/* BRASLOL 2 - tela de abertura (Aviso Legal no livro da Yuumi). Logica: js/game/intro.js ; cena 3D: js/vendor/yuumi3d.js.
   Sem estilo inline no HTML (a CSP nao deixa): tudo aqui. O yuumi3d.js so mexe em tamanho/posicao via CSSOM. */
#intro{position:fixed;inset:0;z-index:70;overflow:hidden;color:#fff;font-family:var(--ui);background:#101010;outline:0}
/* fundo: a mesma arte do menu inicial, bem escura, com vinheta */
#intro::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:url(../assets/img/backgrounds/tela-inicial2.webp) center/cover no-repeat;opacity:.34}
#intro::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,rgba(16,16,16,0) 0%,rgba(16,16,16,.55) 68%,rgba(16,16,16,.92) 100%)}
.intro-3d{position:absolute;inset:0;z-index:1}
.intro-3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.intro-css{position:absolute;inset:0;pointer-events:none}   /* camada do texto (CSS3DRenderer); so o painel recebe cliques/rolagem */

.intro-load{position:absolute;left:0;right:0;top:50%;z-index:2;text-align:center;font-size:13px;color:#8a8a8a;transition:opacity .3s}
#intro.pronta .intro-load,#intro.plano .intro-load{opacity:0;visibility:hidden}

/* ---- o texto, na pagina do livro (pergaminho). --pw (largura do painel em px) e --fp (tamanho da letra) vem do yuumi3d.js ---- */
.intro-pagina{box-sizing:border-box;--pw:780px;--fp:15px;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s linear .8s;
  padding:calc(var(--pw) * .03) calc(var(--pw) * .045);
  font-family:Georgia,"Times New Roman",serif;font-size:var(--fp);line-height:1.42;color:#3a2a12;text-align:left;hyphens:auto;-webkit-hyphens:auto;
  background:rgba(243,229,190,.9);border-radius:calc(var(--pw) * .008);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9a7b3f transparent;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.intro-pagina.ver{opacity:1;visibility:visible;transition:opacity .8s ease}
.intro-pagina:focus-visible{outline:2px solid rgba(90,58,12,.75);outline-offset:-5px}
.intro-pagina h2{margin:0;font-family:"Hegarown",Georgia,"Times New Roman",serif;font-weight:400;font-synthesis:none;font-size:2em;line-height:1.05;color:#2b1d0a;letter-spacing:0}
.intro-pagina .sub{margin:.15em 0 .9em;font-style:italic;font-size:.95em;color:#6b4f24}
.intro-pagina p{margin:0 0 .72em;orphans:2;widows:2}
.intro-pagina a{color:#7a3b0a;text-decoration:underline;word-break:break-all}
.intro-pagina a:hover{color:#a04f0e}
.intro-corpo{display:block}
/* modo LIVRO (duas paginas inclinadas, criado pelo yuumi3d.js): cada pagina e uma "janela" sobre um bloco de 2 colunas; o JS define larguras e deslocamentos */
.intro-pagina.livro{padding:0;overflow:hidden;overflow:clip;border-radius:calc(var(--pw) * .014);box-shadow:inset 0 0 calc(var(--pw) * .05) rgba(120,84,30,.25)}
.intro-pagina.livro .intro-corpo{column-count:2;column-fill:balance}

/* ---- botao ---- */
.intro-rodape{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + clamp(18px,5vh,56px));z-index:3;display:flex;justify-content:center;pointer-events:none}
.intro-ok{pointer-events:auto;opacity:0;visibility:hidden;transition:opacity .6s ease .25s,visibility 0s linear .85s,transform .12s,background .15s;box-shadow:0 10px 34px rgba(0,0,0,.5)}
.intro-ok.ver{opacity:1;visibility:visible;transition:opacity .6s ease .25s,transform .12s,background .15s}
/* ---- caixinha "Nao mostrar novamente" (ao lado do botao; em tela estreita passa para cima dele) ---- */
.intro-rodape{flex-wrap:wrap;align-items:center;gap:14px 26px;padding:0 16px;box-sizing:border-box}
.intro-nao{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;line-height:1.2;color:#ebe8e1;text-shadow:0 1px 6px rgba(0,0,0,.7);user-select:none;-webkit-user-select:none;opacity:0;visibility:hidden;transition:opacity .6s ease .25s,visibility 0s linear .85s}
.intro-nao.ver{opacity:1;visibility:visible;transition:opacity .6s ease .25s}
.intro-nao input{appearance:none;-webkit-appearance:none;flex:none;display:grid;place-content:center;width:22px;height:22px;margin:0;border:2px solid #8b8989;border-radius:5px;background:rgba(16,16,16,.6);cursor:pointer;transition:background .15s,border-color .15s}
.intro-nao input::after{content:'';width:12px;height:12px;background:rgba(0, 0, 0, 0.596);transform:scale(0);transition:transform .12s ease;clip-path:polygon(14% 44%,0 62%,40% 100%,100% 18%,84% 4%,40% 66%)}
.intro-nao input:checked{background:#ffffff6c;border-color:#fdfdfd6c}
.intro-nao input:checked::after{transform:scale(1)}
.intro-nao input:focus-visible{outline:2px solid #fff;outline-offset:3px}
.intro-nao:hover input{border-color:#fafaf9af}

/* ---- plano B: sem 3D, o aviso num cartao no centro ---- */
#intro.plano{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vh,28px);padding:20px;box-sizing:border-box}
#intro.plano .intro-pagina{position:relative;z-index:2;width:min(780px,100%);max-height:min(68vh,560px);--pw:780px;--fp:15px;border-radius:10px;box-shadow:0 18px 60px rgba(0,0,0,.55)}
#intro.plano .intro-rodape{position:relative;left:auto;right:auto;bottom:auto}

/* ---- saida: a abertura desvanece por cima do menu inicial ---- */
@keyframes introout{to{opacity:0}}
#intro.saindo{animation:introout .55s ease both;pointer-events:none}