/* /js/cenas/cenas.css -- cenários animados dentro das calculadoras e telas do Naruto (regra 11; mockup aprovado em 30/09/2026:
   docs/mockups/naruto/cards-animados-areas.html). cenas.js veste o card do topo; os cards internos ganham filete e cortes aqui. */

/* ---------- card do topo: cenário ao fundo ---------- */
.wpg-cena{position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--border);border-radius:14px;
  background:var(--s-850,#0f131c);padding:20px 20px 30px;min-height:150px;box-sizing:border-box}
.wpg-cena::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--faixa);z-index:1;pointer-events:none}
.wpg-cena::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,15,22,.96) 0%,rgba(12,15,22,.9) 46%,rgba(12,15,22,.35) 74%,rgba(12,15,22,0) 100%)}
.wpg-cena-fundo{position:absolute;inset:0;z-index:-3;pointer-events:none}
.wpg-cena-fundo svg{width:100%;height:100%;display:block}
.wpg-cena h1,.wpg-cena h2,.wpg-cena .calc-title{text-shadow:0 2px 10px rgba(0,0,0,.6)}
.wpg-cena .event-meta{color:var(--faixa);border:1px solid color-mix(in srgb,var(--faixa) 55%,transparent);border-radius:999px;
  padding:3px 10px;background:rgba(9,12,19,.72);font-family:var(--mono,ui-monospace,monospace);align-self:flex-start;width:max-content;max-width:100%}
/* cada topo mantém o seu conteúdo; só ganha o cartão */
.event-section-head.wpg-cena{align-items:flex-start}
.sc-cabeca.wpg-cena{padding:16px 18px 30px;min-height:120px;align-items:flex-start;align-content:flex-start}
#page-pacotes > .pacotes-hero.wpg-cena{padding:26px 24px 34px;margin-bottom:18px}
.events-intro.wpg-cena{max-width:none;padding:22px 22px 32px}

/* cortes (raio X) */
.wpg-cena-cortes{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}
.wpg-cena-cortes i{position:absolute;height:2px;right:-8%;transform:rotate(-26deg);opacity:.55;
  background:linear-gradient(90deg,transparent,var(--faixa) 35%,#fff 50%,var(--faixa) 65%,transparent);box-shadow:0 0 12px var(--faixa)}
.wpg-cena-cortes i:nth-child(1){width:46%;top:26%}
.wpg-cena-cortes i:nth-child(2){width:28%;top:52%;right:18%;opacity:.3}
.wpg-cena-cortes i::after{content:"";position:absolute;inset:-3px 0;width:30%;transform:translateX(-120%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);animation:wcCorte 3.6s ease-in-out infinite}
.wpg-cena-cortes i:nth-child(2)::after{animation-delay:1.6s}
@keyframes wcCorte{0%,45%{transform:translateX(-120%);opacity:0}55%{opacity:1}85%,100%{transform:translateX(420%);opacity:0}}

/* detalhes que se mexem */
.wpg-cena-fundo .tb{transform-box:fill-box}
.wpg-cena-fundo .faisca{animation:wcFaisca 1.5s ease-out infinite}
@keyframes wcFaisca{0%{transform:translate(0,0) scale(1);opacity:0}8%{opacity:1}100%{transform:translate(var(--dx),-110px) scale(.4);opacity:0}}
.wpg-cena-fundo .brasa{animation:wcBrasa 2.2s ease-in-out infinite alternate}
@keyframes wcBrasa{from{opacity:.55}to{opacity:1}}
.wpg-cena-fundo .balanca{animation:wcBalanca 3s ease-in-out infinite alternate;transform-origin:50% 0}
@keyframes wcBalanca{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.wpg-cena-fundo .fogo{animation:wcFogo 3.2s ease-out infinite;transform-origin:50% 50%}
@keyframes wcFogo{0%{transform:scale(.1);opacity:0}15%{opacity:1}70%{opacity:.8}100%{transform:scale(1.1);opacity:0}}
.wpg-cena-fundo .risco{stroke-dasharray:420;stroke-dashoffset:420;animation:wcRisco 4s ease-in-out infinite}
@keyframes wcRisco{0%{stroke-dashoffset:420}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.wpg-cena-fundo .po{animation:wcPo 4s linear infinite}
@keyframes wcPo{0%{transform:translate(0,0);opacity:0}20%{opacity:.8}100%{transform:translate(-30px,-60px);opacity:0}}
.wpg-cena-fundo .confete{animation:wcCair 4.5s linear infinite}
@keyframes wcCair{0%{transform:translate(0,-30px) rotate(0);opacity:0}8%{opacity:1}100%{transform:translate(-50px,330px) rotate(340deg);opacity:0}}
.wpg-cena-fundo .raio{animation:wcRaio 4s ease-in-out infinite alternate;transform-origin:50% 0}
@keyframes wcRaio{from{opacity:.25}to{opacity:.6}}
.wpg-cena-fundo .moeda{animation:wcSubir 3.2s ease-in infinite}
@keyframes wcSubir{0%{transform:translateY(60px) scaleX(1);opacity:0}15%{opacity:1}50%{transform:translateY(-60px) scaleX(.3)}100%{transform:translateY(-190px) scaleX(1);opacity:0}}
.wpg-cena-fundo .folha{animation:wcFolha 6s linear infinite}
@keyframes wcFolha{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate(-280px,190px) rotate(320deg);opacity:0}}
.wpg-cena-fundo .nevoa{animation:wcNevoa 11s ease-in-out infinite alternate}
@keyframes wcNevoa{from{transform:translateX(-60px)}to{transform:translateX(60px)}}
.wpg-cena-fundo .chama{animation:wcChama .7s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes wcChama{from{transform:scaleY(1) skewX(-3deg)}to{transform:scaleY(1.22) skewX(5deg)}}
.wpg-cena-fundo .halo{animation:wcHalo 1.4s ease-in-out infinite alternate;transform-origin:50% 50%}
@keyframes wcHalo{from{transform:scale(.92);opacity:.55}to{transform:scale(1.08);opacity:.9}}
.wpg-cena-fundo .estrela{animation:wcPiscar 2.6s ease-in-out infinite}
@keyframes wcPiscar{0%,100%{opacity:.15}50%{opacity:1}}
.wpg-cena-fundo .cadente{animation:wcCadente 5s ease-in infinite}
@keyframes wcCadente{0%,60%{transform:translate(0,0);opacity:0}65%{opacity:1}85%,100%{transform:translate(-260px,130px);opacity:0}}
.wpg-cena-fundo .no{animation:wcNo 2s ease-in-out infinite alternate;transform-origin:50% 50%}
@keyframes wcNo{from{transform:scale(1)}to{transform:scale(1.35)}}

/* ---------- cards internos: filete na cor da área e cortes parados ---------- */
#page-eventos{--area:#ff4a5a}
#sub2-conversor{--area:#8fd96a}
#sub2-planejador{--area:#6fcf4a}
#page-upgrade{--area:#ff8a3d}
#page-pacotes{--area:#f5c542}
#page-guias,#page-gameplay,#page-armazem,#page-bauDescoberta{--area:#b04dff}
#page-historico{--area:#c46bff}
#page-eventos .subpage .card,#page-ferramentas .subpage .card,#page-upgrade .screen .card,#sub3-calc .card,
#page-pacotes .subpage .card,#page-guias .subpage .card,#page-gameplay .subpage .card,#page-historico .subpage .card,#page-armazem .subpage .card,#page-bauDescoberta .subpage .card{
  background-image:
    linear-gradient(90deg,color-mix(in srgb,var(--area) 70%,transparent),transparent 55%),
    linear-gradient(180deg,color-mix(in srgb,var(--area) 80%,transparent),color-mix(in srgb,var(--area) 0%,transparent)),
    linear-gradient(-26deg,transparent 48.6%,color-mix(in srgb,var(--area) 22%,transparent) 49.6%,transparent 50.6%),
    linear-gradient(-26deg,transparent 48.8%,color-mix(in srgb,var(--area) 12%,transparent) 49.6%,transparent 50.4%);
  background-size:100% 2px,3px 100%,300px 150px,200px 100px;
  background-position:0 0,0 0,right -60px top -20px,right 90px top 10px;
  background-repeat:no-repeat}

/* celular: o cenário fica mais apagado e o véu desce de cima para baixo */
@media (max-width:760px){
  .wpg-cena::after{background:linear-gradient(180deg,rgba(12,15,22,.55),rgba(12,15,22,.92) 70%)}
  .wpg-cena-fundo{opacity:.8}
  .wpg-cena-cortes i:nth-child(2){display:none}
}
@media (prefers-reduced-motion:reduce){
  .wpg-cena-cortes i::after,.wpg-cena-fundo *{animation:none !important}
  .wpg-cena-fundo .risco{stroke-dashoffset:0}
}