/* Irreal Cassino — VIDA: movimento, física e som da página (site/vida.js).
   A abertura mora dentro do palco da cena (cena.css): a frase de efeito na primeira tela; ao rolar, a noite começa.
   As classes .js-vida só valem com o JS rodando. */

/* ---------- abertura: luz e fichas sobre o palco ---------- */
.cenaPalco > .fichasCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.cenaPalco > .luzCursor{position:absolute;z-index:0;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(217,181,110,.17),rgba(43,106,80,.12) 40%,transparent 68%);opacity:0;transition:opacity .8s;will-change:transform}
.cenaPalco.mouse > .luzCursor{opacity:1}

/* a frase de efeito (primeira tela) */
.cenaAbertura{position:absolute;z-index:3;left:max(var(--lado),calc((100% - 1128px)/2));top:50%;width:min(700px,54vw);transform:translateY(-50%);will-change:transform,opacity}
.cenaAbertura .chapeu{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--latao-claro);margin:0 0 18px}
.cenaAbertura h1{font-size:clamp(42px,6.2vw,96px);font-weight:500;line-height:1;letter-spacing:-.03em;margin:0 0 28px;color:var(--marfim)}
.cenaAbertura h1 em{font-style:italic;color:var(--latao-claro)}
.cenaAbertura .linhaFina{font-size:clamp(18px,1.6vw,23px);line-height:1.5;color:rgba(242,237,228,.82);max-width:36ch;margin:0}
.cenaAbertura .aberturaAcoes{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 22px}
.cenaAbertura .aberturaNota{font-family:var(--sans);font-size:14px;color:rgba(242,237,228,.6);margin:0}
.cenaAbertura .aberturaNota b{color:var(--marfim)}
.cena.passouAbertura .cenaAbertura{pointer-events:none}

/* título palavra por palavra */
.palavra{display:inline-block;white-space:pre}
.js-vida .cenaAbertura h1 .palavra{opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(8px)}
.js-vida .cenaAbertura.entrou h1 .palavra{animation:palavraSobe 1.1s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.15s + var(--i) * .08s)}
@keyframes palavraSobe{to{opacity:1;transform:none;filter:none}}
.cenaAbertura h1 em .palavra{background:linear-gradient(100deg,var(--latao-claro) 25%,#fff4d2 42%,var(--latao-claro) 60%) 0 0/260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.05em;background-position:100% 0}
.js-vida .cenaAbertura.entrou h1 em .palavra{animation:palavraSobe 1.1s cubic-bezier(.16,1,.3,1) forwards,reluz 5.5s ease-in-out infinite;
  animation-delay:calc(.15s + var(--i) * .08s),calc(2.4s + var(--i) * .09s)}
@keyframes reluz{0%,62%{background-position:100% 0}100%{background-position:-70% 0}}
.js-vida .cenaAbertura .chapeu,.js-vida .cenaAbertura .linhaFina,.js-vida .cenaAbertura .aberturaAcoes,.js-vida .cenaAbertura .aberturaNota{opacity:0;transform:translateY(16px)}
.js-vida .cenaAbertura.entrou .chapeu{animation:sobe .9s .05s cubic-bezier(.16,1,.3,1) forwards}
.js-vida .cenaAbertura.entrou .linhaFina{animation:sobe 1s .8s cubic-bezier(.16,1,.3,1) forwards}
.js-vida .cenaAbertura.entrou .aberturaAcoes{animation:sobe 1s 1s cubic-bezier(.16,1,.3,1) forwards}
.js-vida .cenaAbertura.entrou .aberturaNota{animation:sobe 1s 1.25s cubic-bezier(.16,1,.3,1) forwards}
@keyframes sobe{to{opacity:1;transform:none}}

/* o celular entra em cena (uma vez) e depois só respira; quem o inclina é a cena (cena.js) */
.celularEntra{height:100%;width:100%;perspective:1200px}
.js-vida .celularEntra{opacity:0;transform:translateY(80px) rotateX(22deg) rotateY(-18deg) scale(.92)}
.js-vida .entrou .celularEntra{animation:celularChega 1.7s .3s cubic-bezier(.16,1,.3,1) forwards}
@keyframes celularChega{to{opacity:1;transform:none}}
.brilho{position:absolute;z-index:2;inset:10px;border-radius:34px;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(55% 38% at var(--bx,30%) var(--by,18%),rgba(255,255,255,.55),transparent 70%)}

/* o Milo (um só): respira, pula, olha para o mouse */
.miloCorpo{display:block;transform-origin:50% 96%;animation:respira 3.2s ease-in-out infinite}
@keyframes respira{50%{transform:scale(1.018,.982)}}
.milo .olhar{display:block;transform-origin:50% 90%;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.milo.pulo .miloCorpo{animation:pulo .62s cubic-bezier(.3,1.4,.5,1)}
/* o nível do Milo no Cofre (só aparece para quem já jogou neste aparelho) */
.miloNivel{position:absolute;z-index:2;top:8%;right:4%;padding:3px 8px;border-radius:99px;background:#5a3c22;color:#FFE7A8;font-family:var(--sans);font-size:12px;font-weight:700;box-shadow:0 4px 10px rgba(0,0,0,.3);pointer-events:none}
@keyframes pulo{0%{transform:none}16%{transform:scale(1.15,.8)}44%{transform:translateY(-18%) scale(.9,1.12) rotate(-5deg)}70%{transform:scale(1.07,.93)}100%{transform:none}}

.balao{position:absolute;z-index:4;max-width:min(250px,64vw);margin:0;padding:12px 15px;border-radius:16px 16px 16px 4px;
  background:var(--papel);color:var(--tinta);font-family:var(--sans);font-size:14px;line-height:1.42;font-weight:500;
  box-shadow:0 14px 34px rgba(0,0,0,.35);opacity:0;transform:translateY(8px) scale(.88);transform-origin:12% 100%;pointer-events:none;
  transition:opacity .3s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.balao.on{opacity:1;transform:none}
.balao b{color:var(--ficha);font-weight:700}

@media (max-width:820px){
  .cenaAbertura{left:var(--lado);right:var(--lado);width:auto;top:calc(60px + 4svh);transform:none}
  .cenaAbertura h1{font-size:clamp(38px,10.5vw,48px);margin-bottom:16px}
  .cenaAbertura .linhaFina{font-size:16.5px}
  .cenaAbertura .aberturaAcoes{margin:20px 0 0}
  .cenaAbertura .aberturaAcoes .botao{min-height:46px;padding:0 18px;font-size:15px}
  .cenaAbertura .aberturaNota{display:none}
}

/* ---------- barra: progresso de leitura e som ---------- */
.progresso{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--feltro-claro),var(--latao-claro));pointer-events:none}
.som{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:rgba(242,237,228,.07);color:var(--marfim);cursor:pointer;flex:none}
.som:hover{background:rgba(242,237,228,.14)}
.somOnda{display:flex;align-items:center;gap:2px;height:14px}
.somOnda i{display:block;width:3px;height:100%;border-radius:2px;background:currentColor;animation:onda 1s ease-in-out infinite}
.somOnda i:nth-child(2){animation-delay:-.33s}.somOnda i:nth-child(3){animation-delay:-.66s}
@keyframes onda{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.som[aria-pressed="false"] .somOnda i{animation:none;transform:scaleY(.3);opacity:.5}
.barra .barraCta{margin-left:0}
@media (max-width:900px){.barra .som{margin-left:auto}}
@media (max-width:380px){.som{width:34px;height:34px}}

/* ---------- revelar ao rolar ---------- */
.js-vida .revela{opacity:0;transform:translateY(36px);transition:opacity 1.1s cubic-bezier(.4,0,.2,1),transform 1.5s cubic-bezier(.16,1,.3,1);transition-delay:var(--atraso,0s)}
.js-vida .revela.visto{opacity:1;transform:none}
.js-vida .cabecalho h2 .palavra{opacity:0;transform:translateY(.45em);filter:blur(4px);transition:opacity .7s,transform .9s cubic-bezier(.2,.9,.2,1),filter .7s;transition-delay:calc(.1s + var(--i) * .05s)}
.js-vida .cabecalho.visto h2 .palavra{opacity:1;transform:none;filter:none}
.js-vida .regioes .barraR{width:0;transition:width 1.4s cubic-bezier(.2,.8,.2,1) .3s}
.js-vida .regioes .visto .barraR{width:var(--v)}
.js-vida .destaque.revela{transform:scale(.95)}
.js-vida .destaque.revela.visto{transform:none}
.js-vida .numero strong{transition:color .6s}
.numero.contando strong{color:var(--feltro)}

/* ---------- gráfico arrastável ---------- */
.grafico .curva{stroke-dasharray:var(--comp,600);stroke-dashoffset:0}
.js-vida .grafico .curva{transition:stroke-dashoffset 1.8s cubic-bezier(.6,0,.2,1) .25s}
.js-vida .grafico:not(.visto) .curva{stroke-dashoffset:var(--comp,600)}
.js-vida .grafico .curvaArea{opacity:0;transition:opacity 1s 1.5s}
.js-vida .grafico.visto .curvaArea{opacity:1}
.grafico .guia{stroke:var(--ficha);stroke-width:1;stroke-dasharray:2 3;opacity:.55}
.grafico .alca{fill:#fff;stroke:var(--ficha);stroke-width:3;cursor:grab;transition:r .2s}
.grafico .alca:hover,.grafico .alca.pega{r:12}
.grafico .alca.pega{cursor:grabbing}
.grafico .alca:focus{outline:none;stroke-width:5}
.grafico svg{touch-action:pan-y;user-select:none}
.js-vida .grafico.visto:not(.mexeu) .alca{animation:chama 1.3s 2.2s ease-in-out 5}
@keyframes chama{0%,100%{r:9}50%{r:14}}
.curvaLeitura{font-family:var(--sans);font-size:14.5px;line-height:1.5;color:var(--tinta-2);margin:12px 0 0;min-height:4.5em}
.curvaLeitura b{color:var(--ficha)}

/* ---------- toque e inclinação ---------- */
[data-inclina]{transition:transform .7s cubic-bezier(.2,.8,.2,1);will-change:transform}
[data-inclina].ativo{transition:transform .1s linear}
.truqueN{display:inline-block;transition:transform .45s cubic-bezier(.34,1.56,.64,1),color .3s}
.truques li:hover .truqueN{transform:rotate(-14deg) scale(1.2);color:var(--ficha)}
.historia{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.historia:hover{transform:translateY(-5px)}
.contato{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.contato:hover{box-shadow:0 18px 44px rgba(29,27,23,.11)}

/* botões: ímã, onda e reflexo */
.botao,.barraCta{position:relative;overflow:hidden;isolation:isolate}
.botao{translate:var(--mx,0) var(--my,0);transition:translate .4s cubic-bezier(.2,.8,.2,1),transform .15s,background .15s}
.onda{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;background:rgba(255,255,255,.5);animation:ondaSai .7s ease-out forwards}
@keyframes ondaSai{to{transform:scale(30);opacity:0}}
.botao:not(.vazado)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%);transform:translateX(-130%);animation:passa 5s 2.6s ease-in-out infinite}
@keyframes passa{0%,72%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

/* ---------- Milo que acompanha a leitura ---------- */
.miloFiel{position:fixed;z-index:30;right:max(12px,env(safe-area-inset-right));bottom:calc(8px + env(safe-area-inset-bottom,0px));width:88px;height:88px;padding:0;border:0;background:none;cursor:pointer;
  transform:translateY(140%) rotate(12deg);transition:transform .7s cubic-bezier(.34,1.56,.64,1);-webkit-tap-highlight-color:transparent}
.miloFiel[hidden]{display:block!important;visibility:hidden}
.miloFiel.on{transform:none;visibility:visible}
.miloFiel img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35));pointer-events:none;transform-origin:50% 95%}
.miloFiel.pulo img{animation:pulo .62s cubic-bezier(.3,1.4,.5,1)}
.miloFiel.on:hover img{transform:rotate(-6deg) translateY(-3px);transition:transform .3s}
.balao.fiel{position:fixed;z-index:31;left:auto;right:max(20px,env(safe-area-inset-right));bottom:calc(100px + env(safe-area-inset-bottom,0px));
  border-radius:16px 16px 4px 16px;transform-origin:90% 100%;max-width:min(280px,calc(100vw - 40px))}
@media (max-width:560px){
  .miloFiel{width:68px;height:68px}
  .balao.fiel{bottom:calc(80px + env(safe-area-inset-bottom,0px));font-size:13.5px}
}
body:has(dialog[open]) .miloFiel,body:has(dialog[open]) .balao.fiel{display:none!important}

/* "reduzir movimento": sem tremor nem clarão; o resto fica, mais calmo */
@media (prefers-reduced-motion:reduce){.milo.tonto .olhar,.miloFiel.tonto img{animation:none}}
.milo:focus,.miloFiel:focus,.cenaMilo:focus{outline:none}
.milo:focus-visible img,.miloFiel:focus-visible img,.cenaMilo:focus-visible img{filter:drop-shadow(0 0 0 2px var(--latao-claro)) drop-shadow(0 0 12px rgba(217,181,110,.7))}