/* Irreal Cassino — CENA (a noite contada pela rolagem), GRADES que se desenham, DEMOS dos truques e o Milo vivo.
   Uma linguagem só: a página é um gráfico. Grade = eixo, linha = saldo, ponto = você. Mesma curva de movimento em tudo. */
:root{--mola:cubic-bezier(.34,1.56,.64,1);--suave:cubic-bezier(.16,1,.3,1);--fio-claro:rgba(242,237,228,.075)}

/* =========================== CENA =========================== */
.cena{position:relative;height:560vh;background:linear-gradient(180deg,#0A1C15,var(--feltro-fundo) 30%,#0A1C15);color:var(--marfim)}
.cenaPalco{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;--cenaT:0;--cenaTx:0}
/* a passagem da abertura para a noite: tudo que é do gráfico entra junto com a rolagem (--cenaT, de 0 a 1, vem do cena.js) */
.cenaGrafico,.cenaPonto,.cenaRegua{opacity:var(--cenaT)}
.cenaTexto{opacity:var(--cenaTx,0);translate:0 calc((1 - var(--cenaTx,0)) * 48px)}
.cenaGrafico{translate:0 calc((1 - var(--cenaT)) * 30px)}
.cena:not(.passouAbertura) .cenaTexto{pointer-events:none}
.cenaPalco::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 55% at 70% 50%,rgba(43,106,80,.32),transparent 70%)}
.cenaGrade,.cenaGrafico{position:absolute;left:0;width:100%;pointer-events:none}
.cenaGrade{top:0;height:100%}
.cenaGrade line{stroke:var(--fio-claro);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.8s var(--suave)}
.cenaGrade line.h{stroke-dasharray:2000;stroke-dashoffset:2000}
.cena.acesa .cenaGrade line{stroke-dashoffset:0}
.cenaGrade text{fill:rgba(242,237,228,.28);font-family:var(--sans);font-size:11px;letter-spacing:.06em;opacity:0;transition:opacity 1s 1s}
.cena.acesa .cenaGrade text{opacity:1}
.cenaGrafico{top:16%;height:68%;overflow:visible}
.cenaBase{stroke:rgba(242,237,228,.28);stroke-width:1;stroke-dasharray:4 6;vector-effect:non-scaling-stroke}
.cenaLinha{fill:none;stroke:url(#corSaldo);stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px rgba(233,203,134,.35))}
.cenaArea{fill:url(#corSaldo);opacity:.1}
.cenaPonto{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;z-index:2;pointer-events:none;will-change:transform;
  box-shadow:0 0 0 4px rgba(233,203,134,.35),0 0 24px 6px rgba(233,203,134,.45);transition:box-shadow .9s,background .9s}
.cenaPonto.baixo{background:#ffd9d6;box-shadow:0 0 0 4px rgba(210,69,63,.4),0 0 24px 6px rgba(210,69,63,.5)}
.cenaPonto::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid currentColor;color:rgba(233,203,134,.6);animation:radar 1.8s ease-out infinite}
@keyframes radar{from{transform:scale(.4);opacity:1}to{transform:scale(2.2);opacity:0}}

/* texto e placar (um véu de feltro atrás, para a linha nunca atrapalhar a leitura) */
.cenaTexto::before{content:"";position:absolute;z-index:-1;inset:-18% -22% -18% -30%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(10,28,21,.82),rgba(10,28,21,.55) 55%,transparent);filter:blur(6px)}
.cenaDica{position:absolute;z-index:3;left:50%;bottom:52px;margin:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,237,228,.6);transition:opacity .6s,transform .6s}
.cenaDica i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--latao-claro),transparent);transform-origin:top;animation:dica 1.8s ease-in-out infinite}
@keyframes dica{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.cena.andou .cenaDica{opacity:0;transform:translate(-50%,10px)}
/* texto e placar */
.cenaTexto{position:absolute;z-index:3;left:max(var(--lado),calc((100% - 1128px)/2));top:50%;width:min(460px,40vw);transform:translateY(-50%)}
.cenaTexto .rotulo{color:var(--latao-claro)}
.cenaPlacar{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:14px;margin:6px 0 34px;padding-bottom:22px;border-bottom:1px solid rgba(242,237,228,.14)}
.cenaSaldoRot{grid-column:1/-1;font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,237,228,.55)}
.cenaSaldo{font-size:clamp(46px,6vw,84px);font-weight:500;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums lining-nums;transition:color .9s}
.cenaSaldo.alto{color:var(--latao-claro)}
.cenaSaldo.zero{color:#E2665F}
.cenaSaldo.pulsa{animation:pulsaSaldo .5s var(--mola)}
@keyframes pulsaSaldo{40%{transform:scale(1.08)}}
.cenaGiros{font-family:var(--sans);font-size:13px;color:rgba(242,237,228,.55);align-self:end;padding-bottom:12px;white-space:nowrap}
.cenaAtos{list-style:none;margin:0;padding:0;position:relative;min-height:12.5em}
.cenaAtos li{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(34px);filter:blur(8px);transition:opacity .9s cubic-bezier(.4,0,.2,1),transform 1.3s var(--suave),filter 1s var(--suave);pointer-events:none}
.cenaAtos li.agora{opacity:1;transform:none;filter:none}
.cenaAtos li.passou{transform:translateY(-34px);transition-duration:.6s,1s,.7s}
.cenaAtos span{display:block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--latao-claro);margin-bottom:10px}
.cenaAtos h3{font-size:clamp(26px,3vw,40px);font-weight:500;letter-spacing:-.02em;line-height:1.12;margin-bottom:14px}
.cenaAtos p{font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:rgba(242,237,228,.74);margin:0;max-width:38ch}

/* celular da cena */
.cenaCelular{position:absolute;z-index:2;right:max(var(--lado),calc((100% - 1128px)/2 + 40px));top:50%;height:min(76svh,720px);aspect-ratio:410/864;
  margin-top:calc(min(76svh,720px) / -2);perspective:1200px}
.cenaCelular .celular{position:relative;height:100%;width:100%;will-change:transform;transform-style:preserve-3d}
.cenaCelular .celular img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);aspect-ratio:auto;opacity:0;transform:scale(1.035);
  transition:opacity .9s cubic-bezier(.4,0,.2,1),transform 1.6s var(--suave)}
.cenaCelular .celular img.agora{opacity:1;transform:none}
.cenaFlash{position:absolute;inset:10px;border-radius:34px;background:#fff;opacity:0;pointer-events:none;mix-blend-mode:screen}
.cenaFlash.on{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}
.cenaCarimbo{position:absolute;left:50%;top:44%;z-index:3;padding:8px 16px;border:3px solid currentColor;border-radius:8px;
  font-family:var(--sans);font-weight:800;font-size:clamp(16px,2vw,22px);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  color:#E2665F;background:rgba(10,20,15,.82);transform:translate(-50%,-50%) rotate(-12deg) scale(2.2);opacity:0;pointer-events:none}
.cenaCarimbo.on{animation:carimbo 1.6s var(--mola) forwards}
.cenaCarimbo.ouro{color:var(--latao-claro)}
@keyframes carimbo{0%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(2.2)}18%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}
.cenaCelular.treme .celular{animation:treme .45s linear}
@keyframes treme{20%{translate:-8px 2px}40%{translate:7px -3px}60%{translate:-5px 1px}80%{translate:3px 0}}

/* Milo da cena */
.cenaMilo{position:absolute;z-index:4;bottom:5svh;right:calc(max(var(--lado),calc((100% - 1128px)/2 + 40px)) + min(76svh,720px) * .36);width:min(24svh,230px);
  padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transform:translateX(calc(-60vw)) rotate(-20deg);transition:transform 1.3s var(--mola)}
.cena.miloEntrou .cenaMilo{transform:none}
.cenaMilo img{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 20px rgba(0,0,0,.5));pointer-events:none;user-select:none;-webkit-user-drag:none}
.miloSombra{position:absolute;left:18%;right:14%;bottom:1%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);z-index:-1;transition:transform .4s}
.cenaMilo .olhar,.cenaMilo .miloCorpo{display:block;transform-origin:50% 95%}
.cenaMilo .miloCorpo{animation:respira 3.2s ease-in-out infinite}
.cenaMilo.feliz .miloCorpo{animation:festa .7s var(--mola) infinite}
@keyframes festa{0%,100%{transform:none}35%{transform:translateY(-12%) scale(.94,1.06) rotate(-4deg)}60%{transform:scale(1.06,.94)}}
.cenaMilo.feliz .miloSombra{transform:scaleX(.8)}
.cenaMilo.susto .miloCorpo{animation:susto .5s linear 2}
@keyframes susto{0%,100%{transform:none}25%{transform:translateX(-4%) rotate(-5deg) scale(1.04,.96)}75%{transform:translateX(4%) rotate(5deg)}}
.cenaMilo img{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.cenaMilo.triste img{transform:translateY(6%) rotate(-7deg) scale(.96)}
.cenaMilo.triste .miloCorpo{animation-duration:5s}
.cenaMilo.pulo .miloCorpo{animation:pulo .62s cubic-bezier(.3,1.4,.5,1)}
.cenaBalao{z-index:5;left:auto;right:calc(max(var(--lado),calc((100% - 1128px)/2 + 40px)) + min(76svh,720px) * .36 + min(24svh,230px) * .3);bottom:calc(5svh + min(24svh,230px) * .95);
  border-radius:16px 16px 4px 16px;transform-origin:85% 100%;max-width:280px}

/* régua de atos (a linha do tempo da noite) */
.cenaRegua{position:absolute;z-index:3;left:max(var(--lado),calc((100% - 1128px)/2));right:max(var(--lado),calc((100% - 1128px)/2));bottom:28px;height:2px;background:rgba(242,237,228,.12)}
.cenaReguaFio{position:absolute;left:0;top:0;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--latao-claro),#E2665F)}
.cenaRegua i{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--feltro-fundo);border:1.5px solid rgba(242,237,228,.4);transform:rotate(45deg);transition:background .4s,border-color .4s,scale .4s var(--mola)}
.cenaRegua i[data-ato="0"]{left:0}.cenaRegua i[data-ato="1"]{left:16%}.cenaRegua i[data-ato="2"]{left:40%}.cenaRegua i[data-ato="3"]{left:52%}.cenaRegua i[data-ato="4"]{left:86%}
.cenaRegua i.feito{background:var(--latao-claro);border-color:var(--latao-claro);scale:1.25}

@media (max-width:820px){
  .cena{height:600vh}
  .cenaTexto::before{inset:-6% -10% -10% -10%}
  .cenaDica{display:none}
  .cenaTexto{left:var(--lado);right:var(--lado);top:calc(64px + 3svh);width:auto;transform:none}
  .cenaPlacar{margin:0 0 14px;padding-bottom:12px;column-gap:10px}
  .cenaSaldo{font-size:40px}
  .cenaGiros{padding-bottom:6px}
  .cenaAtos{min-height:9.5em}
  .cenaAtos h3{font-size:23px;margin-bottom:8px}
  .cenaAtos p{font-size:15px;line-height:1.5}
  .cenaCelular{height:44svh;right:auto;left:50%;top:auto;bottom:9svh;margin:0;transform:translateX(-30%)}
  /* no celular, na abertura, o aparelho e o Milo descem um pouco para a frase caber */
  .cenaCelular{translate:0 calc((1 - var(--cenaT)) * 8svh)}
  .cenaGrafico{top:44%;height:44%}
  .cenaMilo{width:28vw;max-width:150px;right:auto;left:var(--lado);bottom:7svh}
  .cenaBalao{right:auto;left:var(--lado);bottom:calc(7svh + min(28vw,150px) * .98);border-radius:16px 16px 16px 4px;transform-origin:15% 100%;max-width:min(240px,62vw)}
  .cenaRegua{bottom:16px}
}

/* ====================== GRADES QUE SE DESENHAM ====================== */
.temGrade{position:relative;isolation:isolate}
.grade{position:absolute;z-index:-1;top:0;bottom:0;left:max(var(--lado),calc((100% - 1128px)/2));right:max(var(--lado),calc((100% - 1128px)/2));pointer-events:none;
  background-image:linear-gradient(90deg,var(--fio-grade,rgba(29,27,23,.055)) 1px,transparent 1px),linear-gradient(0deg,var(--fio-grade,rgba(29,27,23,.055)) 1px,transparent 1px);
  background-size:calc(100% / 12) 100%,100% 96px;background-position:0 0,0 0;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
  clip-path:inset(0 0 100% 0);transition:clip-path 2.2s var(--suave)}
.grade::after{content:"";position:absolute;right:-1px;top:0;bottom:0;width:1px;background:var(--fio-grade,rgba(29,27,23,.055))}
.temGrade.gradeAcesa > .grade{clip-path:inset(0 0 0 0)}
.simulador .grade,.abertura .grade{--fio-grade:var(--fio-claro)}
@media (max-width:820px){.grade{background-size:calc(100% / 4) 100%,100% 96px;--fio-grade:rgba(29,27,23,.045)}.simulador .grade{--fio-grade:rgba(242,237,228,.06)}}
.faixa > .grade{left:max(var(--lado),calc((100% - 1128px)/2));right:max(var(--lado),calc((100% - 1128px)/2))}

/* fios que se traçam: rótulos, réguas e bordas */
.rotulo{display:flex;align-items:center;gap:0}
.rotulo::before{content:"";display:block;height:1px;width:0;background:currentColor;margin-right:0;transition:width 1s var(--suave),margin-right 1s var(--suave)}
.cabecalho.visto .rotulo::before,.cenaTexto .rotulo::before,.ofertaTexto .rotulo::before{width:30px;margin-right:12px}
.grade4,.historia,.faq,.lista h3,.oferta{position:relative}
.js-vida .grade4{border-top-color:transparent}
.js-vida .grade4::before,.js-vida .historia::before,.js-vida .faq::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--tinta);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--suave) .15s}
.js-vida .historia,.js-vida .faq{border-top-color:transparent}
.js-vida .grade4.visto::before,.js-vida .historia.visto::before,.js-vida .faq.visto::before{transform:scaleX(1)}
.js-vida .lista h3{border-bottom-color:transparent}
.js-vida .lista h3::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s var(--suave) .2s}
.js-vida .lista.visto h3::after{transform:scaleX(1)}
.js-vida .lista li{transition-delay:calc(.15s + var(--atraso,0s))}

/* ====================== DEMOS DOS TRUQUES ====================== */
.demo{display:flex;align-items:center;gap:18px;margin-top:20px;padding:14px;border-radius:14px;background:var(--feltro-fundo);color:var(--marfim);
  box-shadow:inset 0 0 0 1px rgba(242,237,228,.06),0 12px 30px rgba(14,36,27,.18)}
.demoLado{flex:1;min-width:0}
.demoBotao{min-height:42px;padding:0 18px;border:0;border-radius:999px;cursor:pointer;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.02em;
  color:var(--feltro-fundo);background:var(--latao-claro);box-shadow:0 3px 0 #9c7733;transition:transform .12s,box-shadow .12s}
.demoBotao:active{transform:translateY(3px);box-shadow:0 0 0 #9c7733}
.demoBotao[disabled]{opacity:.6;cursor:progress}
.demoNota{font-family:var(--sans);font-size:13.5px!important;line-height:1.45;color:rgba(242,237,228,.75)!important;margin:10px 0 0!important}
.demoNota b{color:#F08A82}
.rolos{position:relative;display:flex;gap:6px;padding:8px;border-radius:10px;background:#050d09;box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}
.rolo{position:relative;display:block;width:44px;height:58px;overflow:hidden;border-radius:6px;background:linear-gradient(180deg,#d9d2c3,#fffaf0 30%,#fffaf0 70%,#d9d2c3)}
.rolo .fita{position:absolute;left:0;right:0;top:0;will-change:transform}
.rolo .fita b{display:grid;place-items:center;height:58px;font-family:var(--serif);font-size:30px;font-weight:700;color:var(--tinta);line-height:1}
.rolo .fita b.sete{color:var(--ficha)}
.linhaPremio{position:absolute;left:4px;right:4px;top:50%;height:2px;margin-top:-1px;background:rgba(210,69,63,.55);pointer-events:none}
.rolos.quase{animation:quaseBrilho 1s ease-out}
@keyframes quaseBrilho{0%{box-shadow:inset 0 2px 8px rgba(0,0,0,.6),0 0 0 0 rgba(233,203,134,.7)}100%{box-shadow:inset 0 2px 8px rgba(0,0,0,.6),0 0 0 14px rgba(233,203,134,0)}}
.demoTela{position:relative;display:grid;place-items:center;width:150px;height:74px;flex:none;overflow:hidden;border-radius:10px;background:#050d09;text-align:center}
.demoTela strong{display:block;font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:.02em;color:var(--latao-claro);opacity:.18}
.demoTela span{display:block;font-family:var(--sans);font-size:13px;color:rgba(242,237,228,.4)}
.demoTela.festa strong{opacity:1;animation:festaTxt .8s var(--mola)}
.demoTela.festa{animation:festaFundo 1s ease-out}
@keyframes festaTxt{0%{transform:scale(.4)}60%{transform:scale(1.15)}}
@keyframes festaFundo{0%{background:#5e4a1c}100%{background:#050d09}}
.demoTela .confete{position:absolute;width:6px;height:10px;border-radius:2px;top:50%;left:50%;pointer-events:none;animation:confete 1s ease-out forwards}
@keyframes confete{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
@media (max-width:560px){
  .demo{flex-direction:column;align-items:stretch;text-align:left}
  .rolos{align-self:flex-start}
  .demoTela{width:100%}
}

body.naCena .miloFiel{transform:translateY(140%) rotate(12deg)!important}
body.naCena .balao.fiel{opacity:0!important}

/* ====================== MILO VIVO (abertura e o que acompanha) ====================== */
.milo .miloSombra{left:22%;right:18%;bottom:4%}
.milo.dormindo .miloCorpo,.miloFiel.dormindo img{animation:dorme 3.6s ease-in-out infinite}
@keyframes dorme{0%,100%{transform:translateY(3%) scale(1.02,.96) rotate(-3deg)}50%{transform:translateY(4%) scale(1.04,.94) rotate(-3deg)}}
.milo.tonto .olhar,.miloFiel.tonto img{animation:tonto .9s ease-in-out 2}
@keyframes tonto{0%,100%{transform:none}25%{transform:rotate(-9deg) translateX(-4%)}75%{transform:rotate(9deg) translateX(4%)}}
.milo.espia .olhar{transform:rotate(-10deg) translateX(-6%)!important}
.miloFiel img{transition:transform .5s var(--mola)}
.miloFiel.desce img{transform:scaleX(-1)}
.zzz{position:absolute;z-index:5;font-family:var(--serif);font-style:italic;font-weight:600;color:var(--latao-claro);pointer-events:none;animation:zzz 2.6s ease-out forwards;font-size:22px}
@keyframes zzz{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(26px,-60px) scale(1.2)}}

@media (prefers-reduced-motion:reduce){.cenaFlash.on,.cenaCelular.treme .celular{animation:none}}